《开源免费》基于Vue和Quasar前端SPA项目crudapi后台管理系统序号自定义组件（四）

序号基于Vue和Quasar前端SPA项目实战（四）回顾通过上一篇基于Vue和Quasar前端SPA项目实战之布局菜单（三）的介绍，我们完成了布局菜单。本文主要介绍流水号功能的实现。介绍MySQL数据库没有单独的Sequence，只支持自增（increment）主键，但不能设置步长、起始索引、格式等，最重要的是一张表只能使用自增一个字段，但是有时候我们需要多个字段来实现流水号的功能或者需要支持复杂的格式，而MySQL本身是无法实现的，所以crudapi封装了复杂的流水号，支持字符串和数字，自定义格式，还可以设置为时间戳。可用于产品编码、订单流水号等场景！UI界面上的序列号列表创建序列号编辑序列号API序列号API包括基本的CRUD操作，可以通过swagger文档查看。通过axios封装api，名称为metadataSequenceimport{axiosInstance}from"boot/axios";constmetadataSequence={create:function(data){returnaxiosInstance.post("/api/metadata/sequences",data);},update:function(id,data){returnaxiosInstance.patch("/api/metadata/sequences/"+id,data);},list:function(page,rowsPerPage,search,query){if(!page){page=1}if(!rowsPerPage){rowsPerPage=10}returnaxiosInstance.get("/api/metadata/sequences",{params:{offset:(page-1)*rowsPerPage,limit:rowsPerPage,search:search,...query}});},count:function(search,query){returnaxiosInstance.get("/api/metadata/sequences/count",{params:{search:search,...query}});},get:function(id){returnaxiosInstance.get("/api/metadata/sequences/"+id,{参数：{}}）；},delete:function(id){returnaxiosInstance.delete("/api/metadata/sequences/"+id);},batchDelete:function(ids){returnaxiosInstance.delete("/api/metadata/sequences",{data:ids});}};export{metadataSequence};增删改查序列号的基本CRUD操作是通过列表页、新建页和编辑页实现的，新建页和编辑页类似。普通的表单提交，这里就不详细介绍了。可以直接查看代码查询列表页面。使用自定义组件。这里重点介绍自定义组件的知识。分页控件用在自定义组件序号列表页中，因为其他列表页也会用到，所以适合封装成一个组件，名称为CPage。主要功能包括：设置每页条目数、切换分页、统一样式等。核心代码首先在components目录下创建文件夹CPage，然后创建CPage.vue和index.js文件。CPage/CPage.vue使用q-pagination控件CPage/index.js实现安装方法importCPagefrom"./CPage.vue";constcPage={install:function(Vue){Vue.component("CPage",CPage);}};导出默认网页；CPage使用全局配置首先创建boot/cpage.js文件importcPagefrom"../components/CPage";exportdefaultasync({Vue})=>{Vue.use(cPage);};然后在quasar.conf.js中的boot节点添加cpage，这样Quasar会自动加载cpage。boot:['i18n','axios','cpage']通过标签CPage应用在序号列表中，在切换页面时使用，通过@input回调将当前页码和每页页码传递给父页面，然后通过API获取对应的序号列表。小结本文主要介绍metadata中的流水号功能，使用q-pagination分页控件，封装成自定义组件cpage，进而实现流水号的crud增删改查功能。下一章将介绍元数据中的表定义功能。Demo演示官网地址：https://crudapi.cn测试地址：https://demo.crudapi.cn/crudapi/login附源码地址GitHub地址https://github.com/crudapi/crudapi-admin-webGitee地址https://gitee.com/crudapi/crudapi-admin-web由于网络原因，GitHub可能会比较慢，改访问Gitee即可，代码会同步更新。