开发流程
![https://m.qpic.cn/psc?/V1226D1P42CmYS/6kn4m5LtEGRVFjQprFKcEfS258Yi4.H3Xnp*FqbMdmoEmE9YOQ5gMFVozWorEcInszLQMkI8nQJv88kd0BmVOw!!/b&bo=6AMNAQAAAAADB8U! https://m.qpic.cn/psc?/V1226D1P42CmYS/6kn4m5LtEGRVFjQprFKcEfS258Yi4.H3Xnp*FqbMdmoEmE9YOQ5gMFVozWorEcInszLQMkI8nQJv88kd0BmVOw!!/b&bo=6AMNAQAAAAADB8U!](/svg/loading.min.svg)
HTTP API 协议
RESTful
Representational State Transfer, RESTful 一组架构约束条件和原则, 在 2000 年由 Roy Fielding 提出
![https://m.qpic.cn/psc?/V1226D1P42CmYS/6kn4m5LtEGRVFjQprFKcERadeUlRY7OF6QgMuLLOW7BOnq6b7BUO4Fewi1UWlLRhAUu4PFG3Ww5zhBLlARY*yA!!/b&bo=IQU4BAAAAAADBzo! https://m.qpic.cn/psc?/V1226D1P42CmYS/6kn4m5LtEGRVFjQprFKcERadeUlRY7OF6QgMuLLOW7BOnq6b7BUO4Fewi1UWlLRhAUu4PFG3Ww5zhBLlARY*yA!!/b&bo=IQU4BAAAAAADBzo!](/svg/loading.min.svg)
GraphQL
GraphQL 是一个用于 API 的查询语言, 在 2015 年由 Facebook 开源
![https://m.qpic.cn/psc?/V1226D1P42CmYS/6kn4m5LtEGRVFjQprFKcERVRX745fL4*NZxycSuo0qTRcUUmAlv9F.vJMNQxe11mTTxenKUtEOxf1p8YORFK1Q!!/b&bo=ggVqAwAAAAADB8w! https://m.qpic.cn/psc?/V1226D1P42CmYS/6kn4m5LtEGRVFjQprFKcERVRX745fL4*NZxycSuo0qTRcUUmAlv9F.vJMNQxe11mTTxenKUtEOxf1p8YORFK1Q!!/b&bo=ggVqAwAAAAADB8w!](/svg/loading.min.svg)
规范原则
- 接口返回数据即显示:前端仅做渲染逻辑处理;
- 渲染逻辑禁止跨多个接口调用;
- 前端关注交互、渲染逻辑,尽量避免业务逻辑处理的出现;
- 请求响应传输数据格式:JSON,JSON数据尽量简单轻量,避免多级JSON的出现;
![https://m.qpic.cn/psc?/V1226D1P42CmYS/6kn4m5LtEGRVFjQprFKcEYZaiQ1yVg2LBWi0bkiMMeXevF2kBVSLoTjfbfqa4syM2r6mQfntTS9AZKKpbU3rdQ!!/b&bo=lAJ5AQAAAAADB8w! https://m.qpic.cn/psc?/V1226D1P42CmYS/6kn4m5LtEGRVFjQprFKcEYZaiQ1yVg2LBWi0bkiMMeXevF2kBVSLoTjfbfqa4syM2r6mQfntTS9AZKKpbU3rdQ!!/b&bo=lAJ5AQAAAAADB8w!](/svg/loading.min.svg)
请求基本格式
GET请求
1
| xxx/login?body={"username":"admin","password":"123456","captcha":"scfd","rememberMe":1}
|
POST请求
![https://m.qpic.cn/psc?/V1226D1P42CmYS/6kn4m5LtEGRVFjQprFKcEe07uQeFpdrlnfT1lqFqorMJWF9DSMISKpCLiP34qA0lLQg*rZQ.VDkPYIAHp8WhKQ!!/b&bo=6ANgAAAAAAADB6k! https://m.qpic.cn/psc?/V1226D1P42CmYS/6kn4m5LtEGRVFjQprFKcEe07uQeFpdrlnfT1lqFqorMJWF9DSMISKpCLiP34qA0lLQg*rZQ.VDkPYIAHp8WhKQ!!/b&bo=6ANgAAAAAAADB6k!](/svg/loading.min.svg)
响应格式
响应基本格式
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
}]
}
}
|
接口错误状态码
![https://m.qpic.cn/psc?/V1226D1P42CmYS/6kn4m5LtEGRVFjQprFKcEfBgRYObOVVVLMvcLWXQEInhSOosJpLVDKbrxo*8cBNAyEnRThvjrUlnbZzsO68*Sw!!/b&bo=YwO.AgAAAAADB*4! https://m.qpic.cn/psc?/V1226D1P42CmYS/6kn4m5LtEGRVFjQprFKcEfBgRYObOVVVLMvcLWXQEInhSOosJpLVDKbrxo*8cBNAyEnRThvjrUlnbZzsO68*Sw!!/b&bo=YwO.AgAAAAADB*4!](/svg/loading.min.svg)
前端接收错误状态码
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 研发模式的演变
简单明快的早期时代
![https://m.qpic.cn/psc?/V1226D1P42CmYS/6kn4m5LtEGRVFjQprFKcEfMX8l9EM*vqjwXyKznnpux0lPBJiujW.AzNj.hliwAk93HJev.q0Ipfm9iozTqVMA!!/b&bo=HgJ7AQAAAAARB1Y! https://m.qpic.cn/psc?/V1226D1P42CmYS/6kn4m5LtEGRVFjQprFKcEfMX8l9EM*vqjwXyKznnpux0lPBJiujW.AzNj.hliwAk93HJev.q0Ipfm9iozTqVMA!!/b&bo=HgJ7AQAAAAARB1Y!](/svg/loading.min.svg)
后端为主的 MVC 时代
![https://m.qpic.cn/psc?/V1226D1P42CmYS/6kn4m5LtEGRVFjQprFKcEfahVAd2fmyyrnneJItN*e4Z7J5s4uwLCxZ2wKbDQXTUfyvF2AUZxwMJHICQDYTBew!!/b&bo=HAJgAQAAAAARB08! https://m.qpic.cn/psc?/V1226D1P42CmYS/6kn4m5LtEGRVFjQprFKcEfahVAd2fmyyrnneJItN*e4Z7J5s4uwLCxZ2wKbDQXTUfyvF2AUZxwMJHICQDYTBew!!/b&bo=HAJgAQAAAAARB08!](/svg/loading.min.svg)
Ajax 带来的 SPA 时代
![https://m.qpic.cn/psc?/V1226D1P42CmYS/6kn4m5LtEGRVFjQprFKcEUhCgRi7zhYmXb4iKxMSjrs4qFeU695cW0JZDkRYa23z0cQ2krl7JdBM09puDDJCQg!!/b&bo=GgJ7AQAAAAARB1I! https://m.qpic.cn/psc?/V1226D1P42CmYS/6kn4m5LtEGRVFjQprFKcEUhCgRi7zhYmXb4iKxMSjrs4qFeU695cW0JZDkRYa23z0cQ2krl7JdBM09puDDJCQg!!/b&bo=GgJ7AQAAAAARB1I!](/svg/loading.min.svg)
前端为主的 MVVM(Model-View-ViewModel) 时代
![https://m.qpic.cn/psc?/V1226D1P42CmYS/6kn4m5LtEGRVFjQprFKcEfxnYKgYf7o*ZwWUPdcJ2LZJFZguM.UYsNQYdIEAz*9PokjIuKutNAeUd9Ck1IOIHQ!!/b&bo=HQJ.AQAAAAARB1A! https://m.qpic.cn/psc?/V1226D1P42CmYS/6kn4m5LtEGRVFjQprFKcEfxnYKgYf7o*ZwWUPdcJ2LZJFZguM.UYsNQYdIEAz*9PokjIuKutNAeUd9Ck1IOIHQ!!/b&bo=HQJ.AQAAAAARB1A!](/svg/loading.min.svg)
Node 带来的全栈时代
![https://m.qpic.cn/psc?/V1226D1P42CmYS/6kn4m5LtEGRVFjQprFKcEaxVD77DhEe693Z3FOcJN6hYO7b8haaKY0cJMEyXUtbaBGsNDZMVkU6x5IC2zpditw!!/b&bo=TgJjAgAAAAARBx0! https://m.qpic.cn/psc?/V1226D1P42CmYS/6kn4m5LtEGRVFjQprFKcEaxVD77DhEe693Z3FOcJN6hYO7b8haaKY0cJMEyXUtbaBGsNDZMVkU6x5IC2zpditw!!/b&bo=TgJjAgAAAAARBx0!](/svg/loading.min.svg)
Chrome
1
2
| chrome://about
chrome://serviceworker-internals
|
微信开发者调试