首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript Vue.js

一文带你理解vue创建一个后台管理系统流程（Vue+Element）

Posted in Vue.js onMay 18, 2021

1前言

本文根据自己工作经历编写，若有不合理之处，欢迎吐槽

2定义

后台管理系统什么 对一个页面进行增删改查 是不是有点像，不重复定义

3第一次接触后台管理系统

第一次接触后台管理系统是某b站的一个后台管理系统（Vue+Element 实现电商管理系统）

那时候还是很努力的去跟着视频编写

当时也是认真编写完成这个后台管理系统

现在已经找不到那个代码了 当时换了电脑 代码就丢失了

反正是b站的视频学习所得

3.1原始版后台管理（Vue+Element电商管理系统）

为什么要说这是最原始版的管理系统呢

因为相对于后面的代码比较简单

3.1.1项目演示

项目演示就是一个标准的一个后台管理 包括用户管理 权限管理 商品管理页面什么的 相对来说还是非常的简单易懂

一文带你理解vue创建一个后台管理系统流程（Vue+Element）

3.1.2目录结构

看完这个布局 当初还是觉得有点东西的 现在想想就是简单的单页面开发 所有的接口调用初始化生命周期里面 会引入一个echart和富文本相对来说还是复杂一点 基本全都是单页面开发样式和调用接口

一文带你理解vue创建一个后台管理系统流程（Vue+Element）

3.1.3接口文档

每一个系统都有自己的一个接口文档 接口文档大多是按照restful规范进行设计的 如果不按照这个来实现也是可行的 具体看你个人 这里就拿出一部分接口文档增删改查用来做展示而已

## 1.3. 用户管理

### 1.3.1. 用户数据列表

- 请求路径：users
- 请求方法：get
- 请求参数

| 参数名   | 参数说明     | 备注     |
| -------- | ------------ | -------- |
| query    | 查询参数     | 可以为空 |
| pagenum  | 当前页码     | 不能为空 |
| pagesize | 每页显示条数 | 不能为空 |

- 响应参数

| 参数名    | 参数说明     | 备注 |
| --------- | ------------ | ---- |
| totalpage | 总记录数     |      |
| pagenum   | 当前页码     |      |
| users     | 用户数据集合 |      |

- 响应数据

```json
{
    "data": {
        "totalpage": 5,
        "pagenum": 4,
        "users": [
            {
                "id": 25,
                "username": "tige117",
                "mobile": "18616358651",
                "type": 1,
                "email": "tige112@163.com",
                "create_time": "2017-11-09T20:36:26.000Z",
                "mg_state": true, // 当前用户的状态
                "role_name": "炒鸡管理员"
            }
        ]
    },
    "meta": {
        "msg": "获取成功",
        "status": 200
    }
}
```

### 1.3.2. 添加用户

- 请求路径：users
- 请求方法：post
- 请求参数

| 参数名   | 参数说明 | 备注     |
| -------- | -------- | -------- |
| username | 用户名称 | 不能为空 |
| password | 用户密码 | 不能为空 |
| email    | 邮箱     | 可以为空 |
| mobile   | 手机号   | 可以为空 |

- 响应参数

| 参数名   | 参数说明    | 备注 |
| -------- | ----------- | ---- |
| id       | 用户 ID     |      |
| rid      | 用户角色 ID |      |
| username | 用户名      |      |
| mobile   | 手机号      |      |
| email    | 邮箱        |      |

- 响应数据

```json
{
    "data": {
        "id": 28,
        "username": "tige1200",
        "mobile": "test",
        "type": 1,
        "openid": "",
        "email": "test@test.com",
        "create_time": "2017-11-10T03:47:13.533Z",
        "modify_time": null,
        "is_delete": false,
        "is_active": false
    },
    "meta": {
        "msg": "用户创建成功",
        "status": 201
    }
}
```

### 1.3.3. 修改用户状态

- 请求路径：users/:uId/state/:type
- 请求方法：put
- 请求参数

| 参数名 | 参数说明 | 备注                                        |
| ------ | -------- | ------------------------------------------- |
| uId    | 用户 ID  | 不能为空`携带在url中`                       |
| type   | 用户状态 | 不能为空`携带在url中`，值为 true 或者 false |

- 响应数据

```json
{
  "data": {
    "id": 566,
    "rid": 30,
    "username": "admin",
    "mobile": "123456",
    "email": "bb@itcast.com",
    "mg_state": 0
  },
  "meta": {
    "msg": "设置状态成功",
    "status": 200
  }
}
```

### 1.3.4. 根据 ID 查询用户信息

- 请求路径：users/:id
- 请求方法：get
- 请求参数

| 参数名 | 参数说明 | 备注                  |
| ------ | -------- | --------------------- |
| id     | 用户 ID  | 不能为空`携带在url中` |

- 响应参数

| 参数名  | 参数说明 | 备注 |
| ------- | -------- | ---- |
| id      | 用户 ID  |      |
| role_id | 角色 ID  |      |
| mobile  | 手机号   |      |
| email   | 邮箱     |      |

- 响应数据

```json
{
    "data": {
        "id": 503,
        "username": "admin3",
        "role_id": 0,
        "mobile": "00000",
        "email": "new@new.com"
    },
    "meta": {
        "msg": "查询成功",
        "status": 200
    }
}
```

### 1.3.5. 编辑用户提交

- 请求路径：users/:id
- 请求方法：put
- 请求参数

| 参数名 | 参数说明 | 备注                        |
| ------ | -------- | --------------------------- |
| id     | 用户 id  | 不能为空 `参数是url参数:id` |
| email  | 邮箱     | 可以为空                    |
| mobile | 手机号   | 可以为空                    |

- 响应参数

| 参数名  | 参数说明 | 备注 |
| ------- | -------- | ---- |
| id      | 用户 ID  |      |
| role_id | 角色 ID  |      |
| mobile  | 手机号   |      |
| email   | 邮箱     |      |

- 响应数据

```json
/* 200表示成功，500表示失败 */
{
    "data": {
        "id": 503,
        "username": "admin3",
        "role_id": 0,
        "mobile": "111",
        "email": "123@123.com"
    },
    "meta": {
        "msg": "更新成功",
        "status": 200
    }
}
```

### 1.3.6. 删除单个用户

- 请求路径：users/:id
- 请求方法：delete
- 请求参数

| 参数名 | 参数说明 | 备注                       |
| ------ | -------- | -------------------------- |
| id     | 用户 id  | 不能为空`参数是url参数:id` |

- 响应参数
- 响应数据

```json
{
    "data": null,
    "meta": {
        "msg": "删除成功",
        "status": 200
    }
}
```

### 1.3.7. 分配用户角色

- 请求路径：users/:id/role
- 请求方法：put
- 请求参数

| 参数名 | 参数说明 | 备注                       |
| ------ | -------- | -------------------------- |
| id     | 用户 ID  | 不能为空`参数是url参数:id` |
| rid    | 角色 id  | 不能为空`参数body参数`     |

- 响应参数

| 参数名  | 参数说明 | 备注 |
| ------- | -------- | ---- |
| id      | 用户 ID  |      |
| role_id | 角色 ID  |      |
| mobile  | 手机号   |      |
| email   | 邮箱     |      |

- 响应数据

```json
{
    "data": {
        "id": 508,
        "rid": "30",
        "username": "asdf1",
        "mobile": "123123",
        "email": "adfsa@qq.com"
    },
    "meta": {
        "msg": "设置角色成功",
        "status": 200
    }
}
```

3.1.4页面复杂度

1页面接口调用当前页面调用

2页面样式当前页面微调

3页面不封装组件

4页面不用vuex

3.1.5小结

很显然 第一次接触的后台管理系统他没有任何的一个难度 算是入门水平 这就是为什么很多人选择网上买课程的原因吧 这里没有vuex 没有组件封装 没有组件传值 没有过多的复杂操作

 4.1进阶版后台管理系统（SBS+后台管理系统）

为什么说是进阶的系统呢 因为对其中的一些元素加入更多 有了组件封装 组件传值 vuex

4.1.1项目演示

毕竟开始商用了 所以呀 从代码的构造上就开始变得复杂了

一文带你理解vue创建一个后台管理系统流程（Vue+Element）

4.1.2目录结构

代码开始趋向复杂化了 常规用到的vue的组件都开始引入了 vuex这边用的较少 但是引用到了 组件封装 多个组件可以重复拿过来用 就直接用了

一文带你理解vue创建一个后台管理系统流程（Vue+Element）

4.1.3接口文档

这边就不展示接口文档了 多的可能就是有个工具生成了接口文档 需要postman进行一个本地测试了

 4.1.4页面复杂度

1页面接口调用当前页面调用（页面接口调用可以父子调用）

2页面样式当前页面微调（开始有全局调用了）

3页面不封装组件（组件开始封装 耦合性更低）

4页面不用vuex（页面开始用vuex 但是用的极少 除了很需要的一些用户 部门才会存储起来 留存使用）

4.1.5小结

随着我们工作的不断学习 进入一家公司的历练 代码的写作需要更高的水平 而不是需要一个自学的水平

 5.1继续进阶的系统（某大型公司的系统）

5.1.1项目演示

此处不便项目演示

5.1.2目录结构

一文带你理解vue创建一个后台管理系统流程（Vue+Element）

5.1.3接口文档

Swagger工具获取 可以在线调试 直接mock数据 接口未开发就可以进行前端页面的全部开发

5.1.4页面复杂度

1页面接口调用当前页面调用（页面接口调用可以父子调用）

2页面样式当前页面微调（开始有全局调用了）

3页面不封装组件（组件开始封装 耦合性更低）

4页面不用vuex（vuex用的很多 所有的接口调用直接用过vuex去识别和规范）

5自定义指令 公用方法进行封装

 5.1.5小结

一开始接触好的架构对你的成长还是有飞快的促进作用 所以选择平台的重要性就凸显出来了

 6.1....更进阶的代码架构和规范

7总结

综上所述 搭建一个好的vue+element的项目

1抽离出公共方法（引用的时候直接import和export即可 提高代码复用性）

2发送请求的方法（常见的有ajax axios等都是可以选择的 本文第二个项目用的就是简单的一个接口封装 还是页面的一个调用 第三个直接在vuex里面实现了接口的全部）

3接口文档（接口文档 可以通过一个后台直接模拟数据 在接口还没有开发好的时候就可以进行一个前端开发）

4组件封装（对于经常用到的组件可以进行一个手动封装 便于后期维护）

5定义全局样式（设定整个页面的整体架构 保持页面的美观）

6定义自定义指令（自定义指令可以帮助我们进行代码的一个高度实现）

附录:代码规范

最近学到的一些规范 当然不全 持续总结

代码规范
1变量 方法命名驼峰 变量命名需要有意义
2两种情况判断多用三元
3element 设置宽度直接内联
4按照云安全中心架构代码构造 
5公用组件注释少写 注释少写
6页面不用的逻辑找到摈弃 
7console.log及时清除
8全部用三等 不可以二等 需要全等
9尽量避免污染公共组件 代码注重优化
10提示只留一个提示 提示不要加感叹号

一文带你理解vue创建一个后台管理系统流程（Vue+Element）

- Author -

小歌谣（公众号同名）

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Vue.js 相关文章推荐
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
vue调用微信JSDK 扫一扫，相册等需要注意的事项
Jan 03 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
vue+django实现下载文件的示例
Mar 24 Vue.js
Vue项目中如何封装axios（统一管理http请求）
May 02 Vue.js
vue+spring boot实现校验码功能
May 27 Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
vue特效之翻牌动画
Apr 20 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
详解vue中v-for的key唯一性
解读Vue组件注册方式
May 15 #Vue.js
如何理解Vue简单状态管理之store模式
May 15 #Vue.js
Vue如何实现组件间通信
May 15 #Vue.js
详解Vue的sync修饰符
May 15 #Vue.js
深入理解Vue的数据响应式
May 15 #Vue.js
详解Vue的options
May 15 #Vue.js
承诺书(369) 广告词(105) 建议书(203) 聘任书(31) 竞聘书(31) 请假条(31) 主持词(345) 责任书(145) 活动总结(790) 决心书(42)
You might like
xss防御之php利用httponly防xss攻击
2014/03/21 PHP
深入分析PHP引用（&）
2014/09/04 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
php定义一个参数带有默认值的函数实例分析
2015/03/16 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
JS原生数据双向绑定实现代码
2017/08/14 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
Python中的默认参数详解
2015/06/24 Python
Python解惑之True和False详解
2017/04/24 Python
Python数据分析中Groupby用法之通过字典或Series进行分组的实例
2017/12/08 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
Python实现的特征提取操作示例
2018/12/03 Python
Python matplotlib的使用并自定义colormap的方法
2018/12/13 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
美国环保婴儿用品公司：The Honest Company
2017/11/23 全球购物
面向对象概念面试题(.NET)
2016/11/04 面试题
活动策划求职信模板
2014/04/21 职场文书
大学生演讲稿
2014/04/25 职场文书
获奖感言怎么写
2015/07/31 职场文书
导游词之镇江焦山
2019/11/21 职场文书
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python
分享Python获取本机IP地址的几种方法
2022/03/17 Python