4. Vue入门实战教程之vue-element-admin后端API适配

1.1 前言

上一篇博文Vue入门实战教程之vue-element-admin初体验我们已经了解到vue-element-admin 是一个非常优秀的前端框架，整合了element-ui 和vue精华组件，无论是学习vue前端知识还是后端人员使用此框架进行二次开发，实用性和开发效率都是很不错的。

vue-element-admin框架默认使用mock api 模拟后端数据返回，然而在实际使用中，我们肯定不能使用MockAPI.

因此我们需要针对这个前端框架的设计思路，设计出我们的后端API.

1.2 分析框架

首先我们启动我们的前端框架项目，打开登陆页面:

接下来点击登陆按钮，打开浏览器F12 我们开始调试，抓包，可以看到点击登陆一共触发了三个接口调用。

1.1.1 第一个接口:根据账号密码登陆获取token

请求地址：http://localhost:9527/dev-api/vue-element-admin/user/login

请求方法：POST

请求参数:

{
  username: "admin",
  password: "111111"
}
1
2
3
4

响应结果：

{
  "code": 20000,
  "data": {
    "token": "admin-token"
  }
}
1
2
3
4
5
6

我们很容易可以通过F12 看到MockAPI 请求参数：

也可以很轻松找到Mock API 返回的JSON数据：

1.1.2 第二个接口:根据token获取登陆用户所拥有的角色列表等用户信息

请求地址：http://localhost:9527/dev-api/vue-element-admin/user/info?token=admin-token

请求方法：GET

请求Header头：X-Token: admin-token

响应结果：

{
  "code": 20000,
  "data": {
    "roles": [
      "admin"
    ],
    "introduction": "I am a super administrator",
    "avatar": "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif",
    "name": "Super Admin"
  }
}
1
2
3
4
5
6
7
8
9
10
11

值得注意的是，当登陆成功返回token之后，我们第二个接口获取用户信息请求的时候除了header头中需要传X-Token=xxx 之外，请求body中也需要传token=xxxx。
这是因为X-Token用于鉴权，body中请求的token 是用来根据token查询用户信息,比如获取用户都拥有哪些角色
我们可以看到该接口返回了roles 一个数组结果，即一个用户可以拥有多个角色。
由于这个框架的菜单权限是由前端控制的，所以需要这一步，否则一般直接后端就处理了，不需要这一步。

1.1.3 第三个接口:根据token获取欢迎页统计数据

请求地址:http://localhost:9527/dev-api/vue-element-admin/transaction/list

请求方法: GET

响应结果:

{
  "code": 20000,
  "data": {
    "total": 20,
    "items": [
      {
        "order_no": "ba0Dc771-7d8d-9C2D-BFF1-dDCcc8313C00",
        "timestamp": 500671251367,
        "username": "Robert White",
        "price": 11004,
        "status": "pending"
      },
      {
        "order_no": "47EE276d-cCFc-f9e2-23cC-DC29DEfcb15A",
        "timestamp": 500671251367,
        "username": "William Thompson",
        "price": 14124,
        "status": "pending"
      },
      {
        "order_no": "D9F99Abc-2210-baaC-fAbb-814C6557AbB9",
        "timestamp": 500671251367,
        "username": "Deborah Thompson",
        "price": 11257,
        "status": "success"
      },
      {
        "order_no": "1465AdDA-494E-36ad-F476-BCEF30C61a42",
        "timestamp": 500671251367,
        "username": "Paul Perez",
        "price": 10734.2,
        "status": "pending"
      },
      {
        "order_no": "4235994b-1FDf-fbBe-B7b0-1f5E33f6cbCE",
        "timestamp": 500671251367,
        "username": "Ronald Miller",
        "price": 6085.5,
        "status": "success"
      },
      {
        "order_no": "1F95386A-3AB3-dC3f-b18b-5A23ceaAdeA6",
        "timestamp": 500671251367,
        "username": "Richard Gonzalez",
        "price": 12815,
        "status": "pending"
      },
      {
        "order_no": "99bD6E82-A143-5Cc5-6ac8-93Fffd6b1d15",
        "timestamp": 500671251367,
        "username": "Elizabeth Miller",
        "price": 4329.2,
        "status": "success"
      },
      {
        "order_no": "dA2e2589-8D5E-212c-A6cF-27caA1Abc90c",
        "timestamp": 500671251367,
        "username": "Karen Lewis",
        "price": 2891.26,
        "status": "pending"
      },
      {
        "order_no": "E6AFB4e5-FEBf-b5ce-25AC-D877ee16eD66",
        "timestamp": 500671251367,
        "username": "Jason Hernandez",
        "price": 10592,
        "status": "pending"
      },
      {
        "order_no": "9758ff7c-8fCB-cDCf-53de-b03EF97B4F94",
        "timestamp": 500671251367,
        "username": "Jessica Hernandez",
        "price": 6315,
        "status": "success"
      },
      {
        "order_no": "7C5DeacC-b7bB-bDEe-AC49-F3403adFbcff",
        "timestamp": 500671251367,
        "username": "Helen Williams",
        "price": 9529,
        "status": "pending"
      },
      {
        "order_no": "1E495158-73Ac-aa7c-ca48-5ADb2B72D6Ac",
        "timestamp": 500671251367,
        "username": "Shirley Johnson",
        "price": 4777.7,
        "status": "success"
      },
      {
        "order_no": "9FF323b3-573b-fCf7-2FCB-9E411CD872Bb",
        "timestamp": 500671251367,
        "username": "Jose White",
        "price": 2205.12,
        "status": "pending"
      },
      {
        "order_no": "127C174f-dBeE-4aFf-cAFa-e521bBbBEB6E",
        "timestamp": 500671251367,
        "username": "George Walker",
        "price": 14236,
        "status": "success"
      },
      {
        "order_no": "65cEb7E6-44AF-f8A3-9f68-f72eCf2EE638",
        "timestamp": 500671251367,
        "username": "Jessica Johnson",
        "price": 5934,
        "status": "pending"
      },
      {
        "order_no": "f941d2Cd-D0fD-d23F-c7ed-9b2d5515E1B5",
        "timestamp": 500671251367,
        "username": "Donna Hall",
        "price": 3450,
        "status": "pending"
      },
      {
        "order_no": "41CcCDbb-d5C1-B5ED-C40D-5D9DB4B8FF5C",
        "timestamp": 500671251367,
        "username": "David Rodriguez",
        "price": 5108.6,
        "status": "success"
      },
      {
        "order_no": "41D19cc5-F19D-C9B2-D1cD-ae16B7948c6E",
        "timestamp": 500671251367,
        "username": "Sharon Johnson",
        "price": 10341,
        "status": "pending"
      },
      {
        "order_no": "fC3f5adf-F7F2-69FF-AfdF-f7A1dF38BDD8",
        "timestamp": 500671251367,
        "username": "Shirley Garcia",
        "price": 3583,
        "status": "success"
      },
      {
        "order_no": "210Cb200-AD1d-fDFc-eE5f-b72038d4EE34",
        "timestamp": 500671251367,
        "username": "Elizabeth Smith",
        "price": 12315.9,
        "status": "pending"
      }
    ]
  }
}
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148

到调用第三个接口的时候，我们基本上菜单的列表权限已经拿到了，因此只需要header中带token即可，实现数据的权限校验。

值得注意的是：
前端控制的仅仅只是菜单页面是否显示权限， 至于是否能获取到数据，为了安全，后端还是需要自己做一定判断的。

好了废话不多说，我开始设计我们的接口。

1.3 接口设计

时间问题,晚上继续更新讲解，先大致概览下吧，着急的可以先看源码。

1.3.1 设计用户管理模块

1.3.2 设计角色管理模块

1.4 源码下载

• 点击下载本文源码