基于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为对象名称复数模式（兼容对象名称），查问参数如下：

参数类型形容
selectstring抉择查问须要的字段和关联子表，默认查问全副字段和关联子表
expandstring抉择须要开展的关联主表，默认关联主表字段只查问id和name
searchstring全文检索关键字，通过内置的零碎字段全文索引fullTextBody实现
filterstring智能查问条件，格局为Condition对象JSON序列化后的字符串
orderbystring排序形式，ASC和DESC
offsetint32分页开始地位
limitint32每页数量
字段1Object最终转换成mysql中=操作符
字段2Object最终转换成mysql中=操作符
......Object最终转换成mysql中=操作符

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