3.5、开始写Vue3 JS功能

11/20/2022

1、再阅读之前,请您一定要 看完 搭建项目熟悉Vue JS项目
2、一定要了解三个单词:businesssystemcommon,前端用的比较多 ;去看下: 三个单词

# 一、项目需求

# 1.1、了解需求

功能概述: 中后台管理系统中,要有管理公司信息的功能,主要包含公司信息、银行账户、发票资料等,这些信息供有需要的业务使用。

  • 需求1:管理公司基本信息,包含:企业名称、Logo、地区、营业执照、联系人 等等,可以 增删拆改
  • 需求2:管理公司的银行账户,包含:银行信息、账户名称、账号、类型等,可以 增删拆改
  • 需求3:管理公司的发票信息,包含:开票抬头、纳税号、银行账户、开户行、备注等,可以 增删拆改
  • 需求4:对于公司信息、银行信息、发票信息 任何的修改,都有记录 数据变动记录;

# 1.2、需求原型

公司列表 公司添加修改 变动记录2 变动记录2
银行列表 银行添加修改 发票列表 发票添加修改

# 二、定义api接口

根据需求,我们了解到 企业、银行、发票属于业务功能,变更记录属于支撑功能。
src/api/business/ 目录下,创建企业、银行、发票的接口。 在src/api/support/ 目录下,创建数据变更的接口。 如下:

api/business/                          业务目录
| -- | oa                                  OA目录
| -- | -- bank-api.js                          银行api
| -- | -- enterprise-api.js                    企业api
| -- | -- invoice-api.js                       发票api
api/support/                           支撑目录
| -- | data-tracer                         数据变更
| -- | -- data-tracer-api.js                   数据变更api
1
2
3
4
5
6
7
8

按照 《Vue3规范 V2.0》 , 遵循如下要求:

  • api文件要以api为结尾,比如 employee-api.js、login-api.js,方便查找
  • api文件必须导出对象必须以Api为结尾,如:employeeApi、noticeApi
  • api中以一个对象将方法包裹
  • api中的注释,必须和后端 swagger 文档保持一致,同时保留后端作者

比如 bank-api.js

import { postRequest, getRequest } from '/@/lib/axios';

export const bankApi = {
  // 新建银行信息 @author 善逸
  create: (param) => {
    return postRequest('/oa/bank/create', param);
  },

  // 删除银行信息 @author 善逸
  delete: (bankId) => {
    return getRequest(`/oa/bank/delete/${bankId}`);
  },

  // 查询银行信息详情 @author 善逸
  detail: (bankId) => {
    return getRequest(`/oa/bank/get/${bankId}`);
  },

  // 分页查询银行信息 @author 善逸
  pageQuery: (param) => {
    return postRequest('/oa/bank/page/query', param);
  },

  // 编辑银行信息 @author 善逸
  update: (param) => {
    return postRequest('/oa/bank/update', param);
  },

  // 根据企业ID查询不分页的银行列表 @author 善逸
  queryList: (enterpriseId) => {
    return getRequest(`/oa/bank/query/list/${enterpriseId}`);
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

其他接口文件,请具体在项目中找:enterprise-api.jsinvoice-api.jsdata-tracer-api.js

# 三、定义常量

根据需求,我们了解到 企业 类型属于是一个常量枚举,又是属于业务business,所以
src/constants/business/ 目录下,创建企业相关的常量:

constants/business/                  常量目录
| -- | oa                                OA目录
| -- | -- enterprise-const.js                企业常量和枚举
1
2
3

代码 enterprise-const.js


export const ENTERPRISE_TYPE_ENUM = {
  NORMAL: {
    value: 1,
    desc: '有限企业',
  },
  FOREIGN: {
    value: 2,
    desc: '外资企业',
  },
};

export default {
  ENTERPRISE_TYPE_ENUM,
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

最为关键的一步(经常有人忘记):

src/constants/index.js 文件中,将刚刚的常量导入,代码如下:

import menu from './system/menu-const';
import { LOGIN_DEVICE_ENUM } from './system/login-device-const';
import { FLAG_NUMBER_ENUM, GENDER_ENUM, USER_TYPE_ENUM } from './common-const';
import { LAYOUT_ENUM } from './layout-const';
import enterprise from './business/oa/enterprise-const';

export default {
  FLAG_NUMBER_ENUM,
  LOGIN_DEVICE_ENUM,
  GENDER_ENUM,
  USER_TYPE_ENUM,
  LAYOUT_ENUM,
  ...enterprise,
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 四、编写页面

src/views/business/ 目录下,创建企业、银行、发票的页面。
src/components/support/ 目录下,创建数据变更的组件。(因为数据变更只是 企业详情页面的一个组件,而且将来也会给其他页面使用,所以将这个组件 上提 到顶级components组件中)

公司、银行、发票 顶级组件:数据变更记录

接着编写具体的增删查改了,需要注意的有如下:

更详细的代码请研读javascript-ant-design-vue3项目中的src/views/oa/enterprise的代码。
在线阅读代码 (opens new window)

# 五、配置页面路由

  • 第一步:打开系统,以 admin 超级管理员登录
  • 第二步:打开菜单 系统设置 -> 菜单管理
  • 第三步:点击添加菜单 -> 选择菜单 tab, 输入正确的 路由地址组件地址
  • 第四步:点击右上角 姓名,会出现下拉按钮 , 点击“刷新权限”
  • 第五步:点击菜单 或者 输入 刚才录入的 组件路由地址,即可访问

相关图片

添加菜单 刷新权限

# 六、总结

  • 第一步:注意api和const常量的文件后缀名,为 -api-const,这样能很好的搜索文件
  • 第二步:一定要按照代码规范编写页面
  • 第三步:在菜单管理 中添加对应页面,才能访问到

以上,你get到了吗 ?

# ※→ 联系我们

1024创新实验室-主任:卓大 (opens new window),混迹于各个技术圈,研究过计算机,熟悉点 java,略懂点前端。
1024创新实验室(老家河南) (opens new window) 致力于成为中原领先、国内一流的技术团队,以技术创新为驱动,合作各类项目(软件外包、技术顾问、培训等等)。

加 主任 “卓大” 微信
拉你入群,一起学习
关注 “小镇程序员”
分享代码与生活、技术与赚钱
请 “1024创新实验室” 喝咖啡
支持我们的开源与分享
告白气球 (钢琴版)
JESSE T