http.html
32.6 KB
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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>数据交互格式标准 | 买买买文档平台</title>
<meta name="generator" content="VuePress 1.7.1">
<meta name="description" content="买买买文档平台">
<link rel="preload" href="/assets/css/0.styles.d07e157f.css" as="style"><link rel="preload" href="/assets/js/app.9afff5a6.js" as="script"><link rel="preload" href="/assets/js/2.ef86ff21.js" as="script"><link rel="preload" href="/assets/js/21.86007ef2.js" as="script"><link rel="prefetch" href="/assets/js/10.5819cc99.js"><link rel="prefetch" href="/assets/js/11.fd597b20.js"><link rel="prefetch" href="/assets/js/12.b2402a37.js"><link rel="prefetch" href="/assets/js/13.e003b70f.js"><link rel="prefetch" href="/assets/js/14.00c355b3.js"><link rel="prefetch" href="/assets/js/15.5f87eecb.js"><link rel="prefetch" href="/assets/js/16.1b53dc86.js"><link rel="prefetch" href="/assets/js/17.ab400218.js"><link rel="prefetch" href="/assets/js/18.20932e4d.js"><link rel="prefetch" href="/assets/js/19.10dc069f.js"><link rel="prefetch" href="/assets/js/20.ecc32992.js"><link rel="prefetch" href="/assets/js/22.8eb68f06.js"><link rel="prefetch" href="/assets/js/23.f9d43b92.js"><link rel="prefetch" href="/assets/js/24.45b4a9ea.js"><link rel="prefetch" href="/assets/js/25.0458cf97.js"><link rel="prefetch" href="/assets/js/26.28900d1b.js"><link rel="prefetch" href="/assets/js/27.81d86e4f.js"><link rel="prefetch" href="/assets/js/28.1807ea10.js"><link rel="prefetch" href="/assets/js/29.c674570a.js"><link rel="prefetch" href="/assets/js/3.3e1e6257.js"><link rel="prefetch" href="/assets/js/30.d9de9467.js"><link rel="prefetch" href="/assets/js/31.c5b3b33e.js"><link rel="prefetch" href="/assets/js/32.267ac0e0.js"><link rel="prefetch" href="/assets/js/4.cbe5fc7a.js"><link rel="prefetch" href="/assets/js/5.6a270bea.js"><link rel="prefetch" href="/assets/js/6.f72612cc.js"><link rel="prefetch" href="/assets/js/7.94e920fe.js"><link rel="prefetch" href="/assets/js/8.b7861e0c.js"><link rel="prefetch" href="/assets/js/9.e023b86e.js">
<link rel="stylesheet" href="/assets/css/0.styles.d07e157f.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/logo.png" alt="买买买文档平台" class="logo"> <span class="site-name can-hide">买买买文档平台</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">
查询导览
</a></div><div class="nav-item"><a href="/product/" class="nav-link">
项目清单
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="团队文档" class="dropdown-title"><span class="title">团队文档</span> <span class="arrow down"></span></button> <button type="button" aria-label="团队文档" class="mobile-dropdown-title"><span class="title">团队文档</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/team/design/" class="nav-link">
产品设计
</a></li><li class="dropdown-item"><!----> <a href="/team/ios/" class="nav-link">
IOS
</a></li><li class="dropdown-item"><!----> <a href="/team/android/" class="nav-link">
安卓
</a></li><li class="dropdown-item"><!----> <a href="/team/backend/" class="nav-link">
服务端
</a></li><li class="dropdown-item"><!----> <a href="/team/quality/" class="nav-link">
测试
</a></li><li class="dropdown-item"><h4>
前端
</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/team/frontend/overview/" class="nav-link router-link-active">
概况
</a></li><li class="dropdown-subitem"><a href="/team/frontend/plugins/" class="nav-link">
插件库
</a></li><li class="dropdown-subitem"><a href="/team/frontend/utils/" class="nav-link">
工具集
</a></li></ul></li></ul></div></div><div class="nav-item"><a href="/standard/" class="nav-link">
标准与规范
</a></div><div class="nav-item"><a href="/project/" class="nav-link">
项目管控
</a></div><div class="nav-item"><a href="/adm/" class="nav-link">
行政管理
</a></div><div class="nav-item"><a href="/util/" class="nav-link">
协作工具
</a></div><div class="nav-item"><a href="/guide/" class="nav-link">
文档写作平台入门
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">
查询导览
</a></div><div class="nav-item"><a href="/product/" class="nav-link">
项目清单
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="团队文档" class="dropdown-title"><span class="title">团队文档</span> <span class="arrow down"></span></button> <button type="button" aria-label="团队文档" class="mobile-dropdown-title"><span class="title">团队文档</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/team/design/" class="nav-link">
产品设计
</a></li><li class="dropdown-item"><!----> <a href="/team/ios/" class="nav-link">
IOS
</a></li><li class="dropdown-item"><!----> <a href="/team/android/" class="nav-link">
安卓
</a></li><li class="dropdown-item"><!----> <a href="/team/backend/" class="nav-link">
服务端
</a></li><li class="dropdown-item"><!----> <a href="/team/quality/" class="nav-link">
测试
</a></li><li class="dropdown-item"><h4>
前端
</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/team/frontend/overview/" class="nav-link router-link-active">
概况
</a></li><li class="dropdown-subitem"><a href="/team/frontend/plugins/" class="nav-link">
插件库
</a></li><li class="dropdown-subitem"><a href="/team/frontend/utils/" class="nav-link">
工具集
</a></li></ul></li></ul></div></div><div class="nav-item"><a href="/standard/" class="nav-link">
标准与规范
</a></div><div class="nav-item"><a href="/project/" class="nav-link">
项目管控
</a></div><div class="nav-item"><a href="/adm/" class="nav-link">
行政管理
</a></div><div class="nav-item"><a href="/util/" class="nav-link">
协作工具
</a></div><div class="nav-item"><a href="/guide/" class="nav-link">
文档写作平台入门
</a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/team/frontend/overview/" aria-current="page" class="sidebar-link">前端 Frontend</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/team/frontend/overview/#能力输出" class="sidebar-link">能力输出</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/#项目构建及发布" class="sidebar-link">项目构建及发布</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/#浏览器支持情况" class="sidebar-link">浏览器支持情况</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/#项目技术组成" class="sidebar-link">项目技术组成</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/#代码版本控制位置" class="sidebar-link">代码版本控制位置</a></li></ul></li><li><a href="/team/frontend/overview/showcase.html" class="sidebar-link">陈列柜</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/team/frontend/overview/showcase.html#网站" class="sidebar-link">网站</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/showcase.html#微信小程序" class="sidebar-link">微信小程序</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/showcase.html#桌面客户端" class="sidebar-link">桌面客户端</a></li></ul></li><li><a href="/team/frontend/overview/standard.html" class="sidebar-link">开发规范</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/team/frontend/overview/standard.html#vscode-插件" class="sidebar-link">VSCode 插件</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/standard.html#文件与目录命名规范" class="sidebar-link">文件与目录命名规范</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/standard.html#css-样式预处理" class="sidebar-link">CSS 样式预处理</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/standard.html#路由命名规则" class="sidebar-link">路由命名规则</a></li></ul></li><li><a href="/team/frontend/overview/http.html" aria-current="page" class="active sidebar-link">数据交互格式标准</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/team/frontend/overview/http.html#数据格式样例" class="sidebar-link">数据格式样例</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/http.html#api-交互规则" class="sidebar-link">API 交互规则</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/http.html#跨域与重复请求" class="sidebar-link">跨域与重复请求</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/http.html#数据表格" class="sidebar-link">数据表格</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/http.html#登录授权" class="sidebar-link">登录授权</a></li></ul></li><li><a href="/team/frontend/overview/system-model.html" class="sidebar-link">系统交互模型</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/team/frontend/overview/system-model.html#基础原则" class="sidebar-link">基础原则</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/system-model.html#流程示意" class="sidebar-link">流程示意</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/system-model.html#数据模型" class="sidebar-link">数据模型</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/system-model.html#api-接口" class="sidebar-link">API 接口</a></li></ul></li><li><a href="/team/frontend/overview/framework.html" class="sidebar-link">系统框架</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/team/frontend/overview/framework.html#目录结构描述" class="sidebar-link">目录结构描述</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/framework.html#api" class="sidebar-link">API</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/framework.html#自定义指令集-directive" class="sidebar-link">自定义指令集 directive</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/framework.html#表单校验规则" class="sidebar-link">表单校验规则</a></li></ul></li><li><a href="/team/frontend/overview/web-open-platform.html" class="sidebar-link">网页能力开放平台</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/team/frontend/overview/web-open-platform.html#平台介绍及使用规范" class="sidebar-link">平台介绍及使用规范</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/web-open-platform.html#现有项目-模块" class="sidebar-link">现有项目/模块</a></li></ul></li><li><a href="/team/frontend/overview/quality.html" class="sidebar-link">质量保证体系</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/team/frontend/overview/quality.html#团队应用现状" class="sidebar-link">团队应用现状</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/quality.html#语法检查" class="sidebar-link">语法检查</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/quality.html#单元测试" class="sidebar-link">单元测试</a></li><li class="sidebar-sub-header"><a href="/team/frontend/overview/quality.html#端对端测试-end-to-end" class="sidebar-link">端对端测试（End-to-end）</a></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="数据交互格式标准"><a href="#数据交互格式标准" class="header-anchor">#</a> 数据交互格式标准</h1> <p>前后端数据交互标准格式详细说明</p> <h2 id="数据格式样例"><a href="#数据格式样例" class="header-anchor">#</a> 数据格式样例</h2> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br></div><pre class="language-js"><code><span class="token punctuation">{</span>
<span class="token comment">/**
* 请求结果
* -1: 业务检查不通过
* 0: 请求成功，数据正常返回
* 2: token 失效，主要用于用户登录超时、特定情况下主动清除用户登录状态
* 例如用户权限发生变化等场景
*/</span>
<span class="token string">"code"</span><span class="token operator">:</span> number<span class="token punctuation">,</span>
<span class="token comment">/**
* 请求异常的提示信息
* 当数据请求结果为 0 时，本节点仅需固定输出 "ok" 即可
* 当数据请求结果为 -1 时，必须输出错误相关的描述内容
*
* 业务检查不通过示例：
* {
* "code": -1,
* "msg": "姓名不能超过 20 个字符"
* }
*
* 请求成功的示例：
* {
* "code": 0,
* "msg": "ok",
* "data": {
* 业务数据
* }
* }
*/</span>
<span class="token string">"msg"</span><span class="token operator">:</span> string<span class="token punctuation">,</span>
<span class="token comment">/**
* 请求后返回的数据内容都应在 data 节点下输出
*/</span>
<span class="token string">"data"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token comment">/**
* 常规单一数据节点
*/</span>
<span class="token string">"attr"</span><span class="token operator">:</span> value<span class="token punctuation">,</span>
<span class="token comment">/**
* 对象数据节点
*/</span>
<span class="token string">"user"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token string">"name"</span><span class="token operator">:</span> <span class="token string">"zhangsan"</span><span class="token punctuation">,</span>
<span class="token string">"age"</span><span class="token operator">:</span> <span class="token number">18</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">/**
* 列表型数据节点
*/</span>
<span class="token string">"users"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> object <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token comment">/**
* 数据表格结果输出的数据节点
*/</span>
<span class="token string">"grid"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token comment">// 当前页码</span>
<span class="token string">"pageNumber"</span><span class="token operator">:</span> number<span class="token punctuation">,</span>
<span class="token comment">// 总记录数</span>
<span class="token string">"totalRow"</span><span class="token operator">:</span> number<span class="token punctuation">,</span>
<span class="token comment">// 数据列表内容</span>
<span class="token string">"list"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
object <span class="token comment">// 数据模型</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">/**
* 用户登录、更新/刷新 token 等登录授权操作后输出的数据节点
*/</span>
<span class="token string">"access"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token string">"accessToken"</span><span class="token operator">:</span> string<span class="token punctuation">,</span>
<span class="token string">"expiresIn"</span><span class="token operator">:</span> number
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br></div></div><h2 id="api-交互规则"><a href="#api-交互规则" class="header-anchor">#</a> API 交互规则</h2> <p>RESTful API 是 API 设计风格而非标准，在团队应用中仅按需使用相应内容即可，目前团队执行以下规范</p> <ol><li>开发与测试环境使用 <code>http</code> 协议，生产环境下使用 <code>https</code> 协议</li> <li>描述性 api 地址（Endpoint），例如：<code>https://aa.com/v1/system/user/profile/{id}</code></li> <li><strong>HTTP 动词统一使用 <code>POST</code></strong></li></ol> <p>更多 RESTful API 内容：</p> <ul><li><a href="http://www.ruanyifeng.com/blog/2014/05/restful_api.html" target="_blank" rel="noopener noreferrer">RESTful API 设计指南<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.ruanyifeng.com/blog/2018/10/restful-api-best-practices.html" target="_blank" rel="noopener noreferrer">RESTful API 最佳实践<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="跨域与重复请求"><a href="#跨域与重复请求" class="header-anchor">#</a> 跨域与重复请求</h2> <p>除少数历史遗留项目外，公司现有项目均使用前后端分离模式，即前端、服务端各自独立开发、运行和部署。</p> <h3 id="跨域-cors"><a href="#跨域-cors" class="header-anchor">#</a> 跨域（CORS）</h3> <p>示例网址： <code>https://abc.com:8080/</code></p> <p>构成网址的三个基本元素</p> <ul><li>协议（<code>https://</code>）</li> <li>网址（<code>abc.com</code>）</li> <li>端口（<code>8080</code>）</li></ul> <p>两个网址之间，只要有上述三个元素中其中一项不一致，即为跨域访问。前后端项目在各自独立运行部署后，则天然处于跨域模式下</p> <p>更多跨域资料：<a href="http://www.ruanyifeng.com/blog/2016/04/cors.html" target="_blank" rel="noopener noreferrer">跨域资源共享 CORS 详解<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="跨域请求模式"><a href="#跨域请求模式" class="header-anchor">#</a> 跨域请求模式</h3> <p>浏览器将 CORS 请求分成两类：</p> <ul><li>简单请求（simple request）</li> <li>非简单请求（not-so-simple request）</li></ul> <h4 id="简单请求"><a href="#简单请求" class="header-anchor">#</a> 简单请求</h4> <p>只要同时满足以下两大条件，就属于简单请求</p> <ol><li>请求方法是以下三种方法之一：<code>HEAD</code>、<code>GET</code>、<code>POST</code></li> <li>HTTP的头信息不超出以下几种字段
<ul><li>Accept</li> <li>Accept-Language</li> <li>Content-Language</li> <li>Last-Event-ID</li> <li>Content-Type：只限于三个值 <code>application/x-www-form-urlencoded</code>、<code>multipart/form-data</code>、<code>text/plain</code></li></ul></li></ol> <h4 id="非简单请求"><a href="#非简单请求" class="header-anchor">#</a> 非简单请求</h4> <p>非简单请求是那种对服务器有特殊要求的请求，比如请求方法是 <code>PUT</code> 或 <code>DELETE</code>，或者 <code>Content-Type</code> 字段的类型是 <code>application/json</code></p> <h3 id="跨域应用"><a href="#跨域应用" class="header-anchor">#</a> 跨域应用</h3> <p>根据以上描述的内容，结合公司使用的规则</p> <ul><li>跨域</li> <li>HTTP 动词为 <code>POST</code></li> <li>Content-Type 为 <code>application/json</code></li></ul> <p>那么在发起 HTTP 数据请求时，HTTP Client 插件将会增加一次 HTTP 查询请求，称为 “预检” 请求（preflight），特点就是该请求的 <code>General</code> 段中的 <code>Request Method</code> 值为 <code>OPTIONS</code>，没有请求参数，该请求的功能仅在向服务器询问当前的 <strong>非简单请求</strong> 是否允许访问</p> <div class="custom-block danger"><p class="custom-block-title">应用服务器 / 静态网页服务器处理</p> <p>项目开发之初，服务端应优先开发调试跨域支持，以免影响后续工作</p> <p>另外，无论是具体的应用服务，如 <code>nodejs</code>、<code>PHP</code> 、<code>GO</code> 或 <code>Java</code> 等，还是静态网页服务器 <code>nginx</code>，在检测到请求方法是 <code>OPTIONS</code> 时，请直接返回 <code>204</code> 状态，该状态意为请求成功，但无返回内容（NO CONTENT），该处理可避免预检请求执行业务内容，浪费资源</p></div> <h2 id="数据表格"><a href="#数据表格" class="header-anchor">#</a> 数据表格</h2> <p>数据表格的标准数据交换格式</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 入参</span>
<span class="token punctuation">{</span>
<span class="token comment">// 表格自动根据当前分页情况发送</span>
<span class="token string">"pageNumber"</span><span class="token operator">:</span> number<span class="token punctuation">,</span>
<span class="token string">"pageSize"</span><span class="token operator">:</span> number<span class="token punctuation">,</span>
<span class="token comment">// 自定义业务/查询参数</span>
<span class="token operator">...</span>
<span class="token punctuation">}</span>
<span class="token comment">// 返回数据</span>
<span class="token punctuation">{</span>
<span class="token string">"data"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token string">"grid"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token comment">// 当前页</span>
<span class="token string">"pageNumber"</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
<span class="token comment">// 总记录数</span>
<span class="token string">"totalRow"</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
<span class="token comment">// 数据列表内容</span>
<span class="token string">"list"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
object <span class="token comment">// 数据模型</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><h2 id="登录授权"><a href="#登录授权" class="header-anchor">#</a> 登录授权</h2> <p>访问类似用户登录、切换用户/公司/企业、交换/刷新 <code>token</code> 等接口时，在请求成功后，应输出 <code>access</code> 标准节点，用于输出登录授权相关的访问令牌及有效期限等内容</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">{</span>
<span class="token string">"data"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token string">"access"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token string">"accessToken"</span><span class="token operator">:</span> string<span class="token punctuation">,</span>
<span class="token string">"expiresIn"</span><span class="token operator">:</span> number
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="处理逻辑"><a href="#处理逻辑" class="header-anchor">#</a> 处理逻辑</h3> <p>用于数据请求的 <strong>http client</strong> 会在每一次数据请求成功后（<code>"code": 0</code>），检查数据内容中是否包含 <code>access</code> 节点，若有，则当前用户访问令牌等内容会被新数据所更新，并在下一次数据请求时，于 <code>Request Headers</code> 数据段中增加</p> <p><code>"Authorization": "Bearer ${token}"</code></p> <p>属性，上述 <code>${token}</code> 内容为登录授权接口返回的 <code>access.accessToken</code> 数据，用于服务端进行用户身份验证</p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">最后更新时间:</span> <span class="time">10/15/2020, 7:03:30 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/team/frontend/overview/standard.html" class="prev">
开发规范
</a></span> <span class="next"><a href="/team/frontend/overview/system-model.html">
系统交互模型
</a>
→
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
<script src="/assets/js/app.9afff5a6.js" defer></script><script src="/assets/js/2.ef86ff21.js" defer></script><script src="/assets/js/21.86007ef2.js" defer></script>
</body>
</html>