「开源免费」基于 Vue 和 Quasar 的前端 SPA 项目 crudapi 后台管理系统实战之序列号自定义组件（四）

crudapi

关注

发布于: 2021 年 04 月 09 日

「开源免费」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之序列号自定义组件（四）

基于 Vue 和 Quasar 的前端 SPA 项目实战之序列号（四）

回顾

通过上一篇文章基于Vue和Quasar的前端SPA项目实战之布局菜单（三）的介绍，我们已经完成了布局菜单，本文主要介绍序列号功能的实现。

简介

MySQL 数据库没有单独的 Sequence，只支持自增长(increment)主键，但是不能设置步长、开始索引、格式等，最重要的是一张表只能由一个字段使用自增，但有的时候我们需要多个字段实现序列号功能或者需要支持复杂格式，MySQL 本身是实现不了的，所以 crudapi 封装了复杂序列号，支持字符串和数字，自定义格式，也可以设置为时间戳。可以用于产品编码、订单流水号等场景！

UI 界面

序列号列表

创建序列号

编辑序列号

API

序列号 API 包括基本的 CRUD 操作，具体的通过 swagger 文档可以查看。通过 axios 封装 api，名称为 metadataSequence

import { axiosInstance } from "boot/axios";
const metadataSequence = {  create: function(data) {    return axiosInstance.post("/api/metadata/sequences",       data    );  },  update: function(id, data) {    return axiosInstance.patch("/api/metadata/sequences/" + id,       data    );  },  list: function(page, rowsPerPage, search, query) {    if (!page) {      page = 1    }
    if (!rowsPerPage) {      rowsPerPage = 10    }
    return axiosInstance.get("/api/metadata/sequences",      {        params: {          offset: (page - 1) * rowsPerPage,          limit: rowsPerPage,          search: search,          ...query        }      }    );  },  count: function(search, query) {    return axiosInstance.get("/api/metadata/sequences/count",      {        params: {          search: search,          ...query        }      }    );  },  get: function(id) {    return axiosInstance.get("/api/metadata/sequences/" + id,      {        params: {        }      }    );  },  delete: function(id) {    return axiosInstance.delete("/api/metadata/sequences/" + id);  },  batchDelete: function(ids) {    return axiosInstance.delete("/api/metadata/sequences",      {data: ids}    );  }};
export { metadataSequence };

复制代码

增删改查

通过列表页面，新建页面和编辑页面实现了序列号基本的 crud 操作，其中新建和编辑页面类似，普通的表单提交，这里就不详细介介绍了，直接查看代码即可。对于列表查询页面，用到了自定义组件，这里重点介绍了一下自定义组件相关知识。

自定义 component

序列号列表页面中用到了分页控件，因为其它列表页面也会用到，所以适合封装成 component, 名称为 CPage。主要功能包括：设置每页的条目个数，切换分页，统一样式等。

核心代码

首先在 components 目录下创建文件夹 CPage，然后创建 CPage.vue 和 index.js 文件。

CPage/CPage.vue

用到了 q-pagination 控件

 <q-pagination  unelevated  v-model="pagination.page"  :max="Math.ceil(pagination.count / pagination.rowsPerPage)"  :max-pages="10"  :direction-links="true"  :ellipses="false"  :boundary-numbers="true"  :boundary-links="true"  @input="onRequestAction"></q-pagination>

复制代码

CPage/index.js

实现 install 方法

import CPage from "./CPage.vue";
const cPage = {  install: function(Vue) {    Vue.component("CPage", CPage);  }};
export default cPage;

复制代码

CPage 使用

全局配置

首先，创建 boot/cpage.js 文件

import cPage from "../components/CPage";
export default async ({ Vue }) => {  Vue.use(cPage);};

复制代码

然后，在 quasar.conf.js 里面 boot 节点添加 cpage，这样 Quasar 就会自动加载 cpage。

 boot: [
    'i18n',    'axios',    'cpage'  ]

复制代码

应用

在序列号列表中通过标签 CPage 使用

<CPage v-model="pagination" @input="onRequestAction"></CPage>

复制代码

当切换分页的时候，通过 @input 回调，传递当前页数和每页个数给父页面，然后通过 API 获取对应的序列号列表。

小结

本文主要介绍了元数据中序列号功能，用到了 q-pagination 分页控件，并且封装成自定义组件 cpage, 然后实现了序列号的 crud 增删改查功能，下一章会介绍元数据中表定义功能。

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 月 09 日阅读数: 18

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

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

增删改查

自定义 component

核心代码

CPage/CPage.vue

CPage/index.js

CPage 使用

全局配置

应用

小结

demo 演示

附源码地址

GitHub 地址

Gitee 地址

crudapi

评论