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编写一个精美的网页