「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之业务数据（七）

基于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选择数据。

CFile组件

用到了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即可，代码同步更新。

API JavaScript MySQL Spring Boot Vue

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。