基于Vue和Quasar的前端SPA我的项目实战之业务数据（七）

回顾

通过上一篇文章 基于Vue和Quasar的前端SPA我的项目实战之表关系（六）的介绍，元数据设计性能全副实现了，本文次要介绍业务数据的crud增删改查性能。

简介

在crudapi零碎中，通过配置表单的形式定义元数据。表单配置好之后，对应的crud接口就主动生成了，前端集成RESTful API就能够实现业务数据的crud性能，如果配置了表关系，也反对奴才表的级联操作。

UI界面

业务数据列表

编辑业务数据

省市区奴才表

API

业务数据API包含根本的CRUD操作，具体的通过swagger文档能够查看。通过axios封装api，名称为table

import { axiosInstance } from "boot/axios";

const table = {
  create: function(tableName, data) {
    return axiosInstance.post("/api/business/" + tableName,
       data
    );
  },
  update: function(tableName, id, data) {
    return axiosInstance.patch("/api/business/" + tableName + "/" + id,
       data
    );
  },
  list: function(tableName, page, rowsPerPage, search, query, filter) {
    if (!page) {
      page = 1
    }

    if (!rowsPerPage) {
      rowsPerPage = 10
    }

    let filterStrEncode;
    if (filter) {
      let filterStr = JSON.stringify(filter);
      filterStrEncode = encodeURIComponent(filterStr);
    }
    
    return axiosInstance.get("/api/business/" + tableName,
      {
        params: {
          offset: (page - 1) * rowsPerPage,
          limit: rowsPerPage,
          search: search,
          ...query,
          filter: filterStrEncode
        }
      }
    );
  },
  count: function(tableName, search, query) {
    return axiosInstance.get("/api/business/" + tableName + "/count",
      {
        params: {
          search: search,
          ...query
        }
      }
    );
  },
  get: function(tableName, id) {
    return axiosInstance.get("/api/business/" + tableName + "/" + id,
      {
        params: {
        }
      }
    );
  },
  delete: function(tableName, id) {
    return axiosInstance.delete("/api/business/" + tableName + "/" + id);
  },
  batchDelete: function(tableName, ids) {
    return axiosInstance.delete("/api/business/" + tableName,
      {data: ids}
    );
  }
};

export { table };

外围代码

代码构造

代码构造

下拉抉择q-select

<q-select
  v-if="item.options"
  style="min-width: 150px;height: 40px;"
  outlined
  option-label="name"
  use-input
  hide-selected
  fill-input
  input-debounce="0"
  @filter="item.filterFn"
  @filter-abort="item.abortFilterFn"
  v-model="item.value"
  :options="item.options"
/>

对于多对一和一对一（子主方向）应用q-select抉择数据。

CFile组件

<q-file v-model="localFile">
  <template v-slot:prepend>
    <q-icon name="attach_file" />
  </template>
  <template v-slot:after>
    <q-btn round dense flat icon="send" @click="onSubmitClick" />
  </template>
</q-file>

用到了q-file组件，用于上传和显示附件。

表单组件

包含四种类型CTableNew、CTableEdit，CTableList，CTableListEdit

1. CTableNew
   新建数据时候采纳该组件，CTableNew把主表字段平铺展现，而后能够嵌套CTableNew（一对一奴才表）和CTableList（一对多奴才表）。
2. CTableEdit
   编辑数据时候采纳该组件，CTableEdit把主表字段平铺展现，而后能够嵌套CTableNew（一对一奴才表）、CTableEdit（一对一奴才表）、CTableList（一对多奴才表），CTableListEdit（一对多奴才表）。
3. CTableList
   新建数据时候作为子表采纳该组件，CTableList采纳q-table反对多行子表数据，而后能够嵌套CTableNew（一对一奴才表）和CTableList（一对多奴才表）。
4. CTableListEdit
   编辑数据时候作为子表采纳该组件，CTableListEdit采纳q-table反对多行子表数据，而后能够嵌套CTableNew（一对一奴才表）、CTableEdit（一对一奴才表）、CTableList（一对多奴才表），CTableListEdit（一对多奴才表）。

通过下面4种类型的组件嵌套，能够反对有限奴才表级联保留，比方省市区三级子表，目录文件有限级子表。

列表查问和分页

数据查问次要是指依照输出条件检索出符合要求的数据列表，如果数据量大的状况下，须要思考分页。

API为/api/business/{name}，其中name为对象名称复数模式（兼容对象名称），查问参数如下：

字段1，字段2，…之间的关系为并且AND关系，更多内容能够参考之前的一篇文章 数据条件查问和分页

小结

本文次要介绍了介绍业务数据的增删改查性能，到目前为止，前端实现了crudapi残缺的性能。通过配置的形式能够零代码实现业务数据的根本crud性能，如果须要简单性能，能够进行二次开发。下一篇文章会介绍前端打包和docker部署相干内容。

demo演示

官网地址：https://crudapi.cn
测试地址：https://demo.crudapi.cn/crudapi/login

附源码地址

GitHub地址

https://github.com/crudapi/crudapi-admin-web

Gitee地址

https://gitee.com/crudapi/crudapi-admin-web

因为网络起因，GitHub可能速度慢，改成拜访Gitee即可，代码同步更新。