「免费开源」基于 Vue 和 Quasar 的前端 SPA 项目 crudapi 后台管理系统实战之业务数据增删改查（七）

crudapi

关注

发布于: 2021 年 04 月 12 日

「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之业务数据增删改查（七）

基于 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

CTableNew 新建数据时候采用该组件，CTableNew 把主表字段平铺展示，然后可以嵌套 CTableNew（一对一主子表）和 CTableList（一对多主子表）。
CTableEdit 编辑数据时候采用该组件，CTableEdit 把主表字段平铺展示，然后可以嵌套 CTableNew（一对一主子表）、CTableEdit（一对一主子表）、CTableList（一对多主子表），CTableListEdit（一对多主子表）。
CTableList 新建数据时候作为子表采用该组件，CTableList 采用 q-table 支持多行子表数据，然后可以嵌套 CTableNew（一对一主子表）和 CTableList（一对多主子表）。
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 即可，代码同步更新。

发布于: 2021 年 04 月 12 日阅读数: 19

原文链接:【http://xie.infoq.cn/article/b032aa2aae4403d5cba5e816a】。

crudapi

关注

crudapi是crud+api组合，表示增删改查接口 2019.06.19 加入

使用crudapi可以告别枯燥无味的增删改查代码，让您更加专注业务，节约大量成本，从而提高工作效率。crudapi的目标是让处理数据变得更简单!官网：https://crudapi.cn 演示：https://demo.crudapi.cn/crudapi/login

发布

暂无评论

创作场景

「免费开源」基于 Vue 和 Quasar 的前端 SPA 项目 crudapi 后台管理系统实战之业务数据增删改查（七）

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

回顾

简介

UI 界面

API

核心代码

代码结构

下拉选择 q-select

CFile 组件

表单组件

列表查询和分页

小结

demo 演示

附源码地址

GitHub 地址

Gitee 地址

crudapi

评论