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

我是歌谣 放弃很容易 但是坚持一定很酷

1前言

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

2定义

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

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

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

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

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

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

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

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

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

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

3.1.1项目演示

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

3.1.2目录结构

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

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",