0
点赞
收藏
分享

微信扫一扫

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

yundejia 2022-02-21 阅读 73

1前言

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

2定义

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

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

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

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

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

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

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

3.1原始版后台管理(Vue+Element电商管理系统)

3.1.1项目演示

3.1.2目录结构

3.1.3接口文档

## 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页面复杂度

3.1.5小结

4.1进阶版后台管理系统(SBS+后台管理系统)

4.1.1项目演示

4.1.2目录结构

4.1.3接口文档

4.1.4页面复杂度

4.1.5小结

5.1继续进阶的系统(某大型公司的系统)

5.1.1项目演示

5.1.2目录结构

5.1.3接口文档

5.1.4页面复杂度

5.1.5小结

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

7总结

附录:代码规范

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

推荐阅读

“数万行代码“教你用html和css编写一个精美的网页

举报

相关推荐

0 条评论