# 流程

新增企业

该项目是一个多企业管理后台系统，所以系统中会默认一个企业作为总后台，在总后台中可以对企业进行管理。
新增企业的操作流程：

在企业管理中的企业列表新增一个企业。
在企业管理中的企业菜单为该企业新增权限菜单
在企业管理中的企业管理员新增一个超管帐号使用超管帐号就可以登录到该企业的管理后台中。

# 第一步创建文件

先在模块下创建对应的视图文件@/views/modules。
如现在要新增一个轮播图模块。则先在@/views/modules文件夹下创建文件夹banner，再在@/views/modules/banner文件夹下创建index.vue文件。
一般一个模块会有增改的功能，这边就拿弹窗举例。因为模块的组件都是单独维护，所以先在@/views/modules/banner文件夹下创建components，再在@/views/modules/banner/components文件夹下创建add-edit.vue文件，然后在模块页面引入该组件使用。

# 第二步添加菜单权限

# 新增菜单

使用总后台帐号登录系统，在开发配置中的菜单权限新增一个菜单权限。
如上步骤中说到的轮播图模块。点击新增按钮并选中，在表单的各个字段中填上基本信息如下：

# 中文名称
  轮播图
# 英文名称
  Banner
# 类型
  菜单
# 组件Path
  banner/index
# 路由Path
  /banner
# 路由Name
  banner
# 授权标识
  banner:page
# 图标
  banner
# 排序
  1
# 是否在侧边菜单栏显示
  是
# 是否在tab页签显示
  是
# 是否支持tab页签多开
  否
# 是否支持缓存
  否

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

# 新增操作权限

几乎每一个模块下都会有增伤改查这四个权限，所以还需要在该菜单下新增按钮级别的操作权限。如上步骤中说到的轮播图模块，用新增举例。点击改菜单上新增按钮并选中，在表单的各个字段中填上基本信息如下：

# 中文名称
  新增
# 英文名称
  Add
# 类型
  按钮
# 授权标识
# 建议每个菜单下都有一个查看的权限 banner:info
# 若是编辑则需要是多个权限同时存在，则添加多个使用分号隔开如：banner:info;banner:update
  banner:create
# 排序
  1

1
2
3
4
5
6
7
8
9
10
11
12

授权标识

授权标识须与后端接口上shiro权限注解的标识一致且不能重复。建议模块名:操作

# 第三步添加企业菜单

使用总后台帐号登录系统，在企业管理中的企业菜单给需要的企业新增一个菜单权限。

# 第四步页面开发

# 页面

以上步骤完成后可以使用企业帐号登录到后台，可以在侧边菜单栏看到新增的模块。可以进行相关的页面开发。
项目中统一封装了上下布局组件、左右布局组件用来动态修改项目内置的布局。如不需要可以不使用该组件。

# 接口

该项目的接口是统一管理的，新增接口的时候需在@/api下创建文件夹和js文件。

注意

该项目的接口没有做全局统一注册，所以需要在页面中单独引入。

如上步骤中说到的轮播图模块。先在@/api文件夹下创建文件夹banner，再在@/api/banner文件夹下创建index.js文件。内容大概如下：

import service from '@/utils/request'
/**
 * @description: 分页列表
 * @param {*}
 * @return {*}
 * @author: gumingchen
 */
export function pageApi(params) {
  return service({
    url: '/backstage/banner/page',
    method: 'get',
    params: params
  })
}

/**
 * @description: 信息
 * @param {*}
 * @return {*}
 * @author: gumingchen
 */
export function infoApi(params) {
  return service({
    url: `/backstage/banner/info/${ params }`,
    method: 'get'
  })
}

/**
 * @description: 新增
 * @param {*}
 * @return {*}
 * @author: gumingchen
 */
export function addApi(params) {
  return service({
    url: `/backstage/banner/create`,
    method: 'post',
    data: params
  })
}

/**
 * @description: 编辑
 * @param {*}
 * @return {*}
 * @author: gumingchen
 */
export function editApi(params) {
  return service({
    url: `/backstage/banner/update`,
    method: 'post',
    data: params
  })
}

/**
 * @description: 删除
 * @param {*}
 * @return {*}
 * @author: gumingchen
 */
export function deleteApi(params) {
  return service({
    url: `/backstage/banner/delete`,
    method: 'post',
    data: params
  })
}

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

# 代码生成器

本项目中内内置了代码生成器，可以对单表进行前端代码（模块列表组件、模块新增编辑弹窗组件、接口文件）、后端代码快速生成（entity、mapper、dao、model、service、controller，实现了分页查询、详情查询、新增、编辑、删除的操作）减少了开发者70%的工作量，只有30%需要开发者自己调整。解放开发者，再也不用 Ctrl + C 、Ctrl + V了 ✊

← 🧩 图标 🦥 整理中 →