实现前端分离的网络应用编程接口示例

随着网络技术的发展，出现了无数的框架，前端和后端。全栈工程师的压力越来越大。

现在前端框架可以做各种Web和APP，前端框架更新越来越快。

传统模式

前端和后端的调试和修改非常麻烦。前端配合后端往往很痛苦，后端对前端来说太麻烦。

(如果没有解决办法，尽量不要说话。办公室应该保留一些药物，如绷带、止血条和速效救心丸。为防止事态升级，办公室应加强工具控制规定。)

前端和后端分离

前端可以根据预先约定的文档自行模拟数据，然后进行UI的开发、测试和调试，在线发布时将API接口改为在线API接口。

前端未来会增加新的功能，修改UI，自己修改，自己编译更新自己的UI站点，只需要调用发布线上的API接口。没必要麻烦后端。两者分开工作。

后端需要与前端讨论接口，编写接口文档，在接口功能上相互沟通(其实相当于按需沟通)。接口文档一旦设置好，只需要按照事先约定的实现API接口即可。编译项目并将其发布到在线服务器。你能完成它。

后端实现webApi接口，还可以面对各种调用，比如PC Web、移动APP，或者其他设备。可以在一个接口上进行多次调用，实现代码复制。

工作模式分析

将前端和后端分开。每个人都履行自己的职责，专注于自己领域的研究。可以更有效地深化技术深度。

在前端分离模式下，你需要N个前端工程师和N个后端工程师。

首先，我们要规定一些基本的返回格式，比如XML或者JSON。因此，大多数前端都喜欢JSON，因为JS自然支持JSON。

我发布了一些示例代码：

{ '结果代码' : 1300，'消息' : '权限不足'，'数据' :null，} { '结果代码' : 1600，'消息' : '逻辑异常'，'数据' : null，详细错误' : { '错误代码' :1601001，'错误消息' : '金额必须大于0'}}返回参数描述

参数名称类型必须有描述。ResultCode int是返回代码。消息字符串是结果描述。DetailError没有具体的错误。数据无数据结果代码

结果代码描述1000成功1100服务器异常1200身份验证异常1300权限不足1400通过参数验证失败1500版本异常1600业务逻辑异常1700升级中的系统1800特定异常已为此接口放弃

这是一个有争议的地方，有许多业务逻辑异常，这是由于用户友好的提示。直接给用户一些粗糙难懂的错误提示，用户看起来很迷惑。但是后端无法修改成友好的提示，不方便调试和查找问题原因。

一般来说，前端可以自动修改对用户友好的提示。

如果后端返回一个字符串，前端会写入代码，以防有一天后端认为这个描述更符合场景，修改字符串。敌人有30秒到达战场。

建议：尽量使用异常代码。您可以看到上面发布的例子，并使用异常代码。每个异常都有一个唯一的编号，并且描述可以更改。但数量保持不变。

用户异常(1601000)表示1601001账号/密码错误1601002账号被冻结1601003原密码不受版本控制。

每个API都有一个版本，其实是针对APP的。如果是在WEB端，直接升级是因为B/S结构本身具有升级方便的优势，所以只需要服务器端更新即可。

版本控制通常有两种方式

第一个：网址不变，版本写在HTTP头。

第二，版本写在URL上。

我推荐第二个，更直接，更方便理解。示例：

http://www.xxx.com/版本号当前版本号：v1http://www.baidu.com/v1/UserSecurity/LoginAPI风格

有许多流行的api风格，其中最著名的是restful风格。

根据我的经验，完全遵循restful风格是非常困难的，也可能是水平问题。团队中也要考虑其他成员的水平问题。我们现在的API风格还是保持以前的风格。

例如，V*代表版本号

http://xx.com/V*/UserSecurity/SignOutHTTP谓词

使用Post方法在服务器上创建/修改/删除资源

使用Get方法从服务器检索资源或资源集合

基本命名规则

使用骆驼命名法-大驼峰法

跨域处理

当前端站点和后端API部署到不同的站点时，就会出现跨域的问题。

什么是同源策略？

同源是相同的域名、协议和端口。也就是说，如果它们不同，就不是同源的。

同源策略是浏览器的基本安全功能，浏览器会拒绝非同源访问。

HMTL的SRC地址，你可以指定任何网址，并且你可以把表格提交到任何网址。

但是如果使用AJAX技术，会受到同源策略的影响，拒绝提交。

几乎所有现代浏览器都支持跨域资源请求方式。这项技术被称为CORS(跨域资源共享)

CORS跨域有两种

第一，简单的跨域。

第二，复杂的跨域。

解决方案：如何向HTTP输出头添加节点

注意有一个前端框架版本，安全性要求很高。不能使用通配符*并且应该指定跨域域名。

访问控制-允许-来源：*以下节点可以填写，也可以不填写。根据实际情况由你决定。

access-control-allow-methods:get、post、options access-control-allow-credentials:true access-control-allow-headers:根据请求头的内容填写注意事项：复杂的跨域比简单的跨域更麻烦、更昂贵。由于复杂的跨域会在请求前发送一个选项预请求，根据响应判断服务器是否支持跨域。也就是说，它实际上被请求了两次。

Cookies范围

不同网站常用的Cookies怎么用？

一般只需要将cookie的范围设置为顶级域名，浏览器在访问子域时会自动带来cookie。

例如，访问二级域名时，默认情况下会传输cookies。

顶级域名：baidul.comcookies范围：Baidu.com二级域名：www.baidu.comapi.baidu.com示例

在下面贴一些样本文档，其他的就不多说了

基本上记录了WebApi前端和后端分离的细节和注意点，细节比较多，需要读者在开发过程中找到自己的答案。论文写完了！

上面这个把WebAPI的前端和后端分开的例子，就是边肖和大家分享的所有内容。希望能给大家一个参考，多支持我们。