开发流程
HTTP API 协议
RESTful
Representational State Transfer, RESTful 一组架构约束条件和原则, 在 2000 年由 Roy Fielding 提出
GraphQL
GraphQL 是一个用于 API 的查询语言, 在 2015 年由 Facebook 开源
规范原则
- 接口返回数据即显示：前端仅做渲染逻辑处理；
- 渲染逻辑禁止跨多个接口调用；
- 前端关注交互、渲染逻辑，尽量避免业务逻辑处理的出现；
- 请求响应传输数据格式：JSON，JSON数据尽量简单轻量，避免多级JSON的出现；
请求基本格式
GET请求
1
| xxx/login?body={"username":"admin","password":"123456","captcha":"scfd","rememberMe":1}
|
POST请求
响应格式
响应基本格式
1
2
3
4
5
6
| {
code: 200,
data: {
message: "success"
}
}
|
响应实体格式
1
2
3
4
5
6
7
8
9
10
11
| {
code: 200,
data: {
message: "success",
entity: {
id: 1,
name: "XXX",
code: "XXX"
}
}
}
|
data.entity: 响应返回的实体数据
响应列表格式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| {
code: 200,
data: {
message: "success",
list: [
{
id: 1,
name: "XXX",
code: "XXX"
},
{
id: 2,
name: "XXX",
code: "XXX"
}
]
}
}
|
data.list: 响应返回的列表数据
响应分页格式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| {
code: 200,
data: {
recordCount: 2,
message: "success",
totalCount: 2,
pageNo: 1,
pageSize: 10,
list: [
{
id: 1,
name: "XXX",
code: "H001"
},
{
id: 2,
name: "XXX",
code: "H001"
} ],
totalPage: 1
}
}
|
- data.recordCount: 当前页记录数
- data.totalCount: 总记录数
- data.pageNo: 当前页码
- data.pageSize: 每页大小
- data.totalPage: 总页数
下拉框、复选框、单选框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| {
code: 200,
data: {
message: "success",
list: [{
id: 1,
name: "XXX",
code: "XXX",
isSelect: 1
}, {
id: 1,
name: "XXX",
code: "XXX",
isSelect: 0
}]
}
}
|
接口错误状态码
前端接收错误状态码
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
| if (err && err.response) {
switch (err.response.status) {
case 400:
err.message = '错误请求'
break
case 401:
err.message = '未授权，请重新登录'
break
case 403:
err.message = '拒绝访问'
break
case 404:
err.message = '请求错误,未找到该资源'
break
case 405:
err.message = '请求方法未允许'
break
case 408:
err.message = '请求超时'
break
case 500:
err.message = '服务器端出错'
break
case 501:
err.message = '网络未实现'
break
case 502:
err.message = '网络错误'
break
case 503:
err.message = '服务不可用'
break
case 504:
err.message = '网络超时'
break
case 505:
err.message = 'http版本不支持该请求'
break
default:
err.message = `连接错误${err.response.status}`
}
} else {
err.message = '连接服务器失败'
}
|
Web 研发模式的演变
简单明快的早期时代
后端为主的 MVC 时代
Ajax 带来的 SPA 时代
前端为主的 MVVM（Model-View-ViewModel） 时代
Node 带来的全栈时代
Chrome
1
2
| chrome://about
chrome://serviceworker-internals
|
微信开发者调试