基于 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 即可，代码同步更新。