经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之自定义组件(四)
来源:cnblogs  作者:crudapi  时间:2021/3/29 9:09:29  对本文有异议

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

回顾

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

简介

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

UI界面

序列号列表
序列号列表

创建序列号
创建序列号

编辑序列号
编辑序列号

API

序列号API包括基本的CRUD操作,通过axios封装api,名称为metadataSequence

  1. import { axiosInstance } from "boot/axios";
  2. const metadataSequence = {
  3. create: function(data) {
  4. return axiosInstance.post("/api/metadata/sequences",
  5. data
  6. );
  7. },
  8. update: function(id, data) {
  9. return axiosInstance.patch("/api/metadata/sequences/" + id,
  10. data
  11. );
  12. },
  13. list: function(page, rowsPerPage, search, query) {
  14. if (!page) {
  15. page = 1
  16. }
  17. if (!rowsPerPage) {
  18. rowsPerPage = 10
  19. }
  20. return axiosInstance.get("/api/metadata/sequences",
  21. {
  22. params: {
  23. offset: (page - 1) * rowsPerPage,
  24. limit: rowsPerPage,
  25. search: search,
  26. ...query
  27. }
  28. }
  29. );
  30. },
  31. count: function(search, query) {
  32. return axiosInstance.get("/api/metadata/sequences/count",
  33. {
  34. params: {
  35. search: search,
  36. ...query
  37. }
  38. }
  39. );
  40. },
  41. get: function(id) {
  42. return axiosInstance.get("/api/metadata/sequences/" + id,
  43. {
  44. params: {
  45. }
  46. }
  47. );
  48. },
  49. delete: function(id) {
  50. return axiosInstance.delete("/api/metadata/sequences/" + id);
  51. },
  52. batchDelete: function(ids) {
  53. return axiosInstance.delete("/api/metadata/sequences",
  54. {data: ids}
  55. );
  56. }
  57. };
  58. export { metadataSequence };

增删改查

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

自定义component

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

核心代码

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

CPage/CPage.vue

用到了q-pagination控件

  1. <q-pagination
  2. unelevated
  3. v-model="pagination.page"
  4. :max="Math.ceil(pagination.count / pagination.rowsPerPage)"
  5. :max-pages="10"
  6. :direction-links="true"
  7. :ellipses="false"
  8. :boundary-numbers="true"
  9. :boundary-links="true"
  10. @input="onRequestAction"
  11. >
  12. </q-pagination>

CPage/index.js

实现install方法

  1. import CPage from "./CPage.vue";
  2. const cPage = {
  3. install: function(Vue) {
  4. Vue.component("CPage", CPage);
  5. }
  6. };
  7. export default cPage;

CPage使用

全局配置

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

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

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

  1. boot: [
  2. 'i18n',
  3. 'axios',
  4. 'cpage'
  5. ]

应用

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

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

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

小结

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

原文链接:http://www.cnblogs.com/crudapi/p/14555007.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号