前后端分离开发实践

在项目开发中，我们一般都会分为前端开发和后端开发，前端工程师负责浏览器端用户交互界面和逻辑等，后端负责数据的处理和存储等。然而，前端数据是由后端提供的，那么，在后端数据接口还没有完成之前，前端是如何编码的呢？如何才能使前后端相对独立地并行开发？为了减少等待后端接口开发的时间，提高团队的开发效率，我在《系统分析与设计》课程作业——“电影购票系统”的项目开发中引入了前后端开发分离的相关技术。

RESTful API

首先是前后端交互的API的设计。在“电影购票系统”的开发中，我们使用了RESTful API 设计风格。RESTful API是目前比较成熟的一套互联网应用程序的API设计理论，在RESTful（Representation State Transfer）架构中：

1. 每一个URI代表一种资源；2. 客户端和服务器之间，RESTful API是传递资源的Representation；3. 客户端通过四个HTTP动词（GET、POST、PUT、DELETE），对服务器端资源进行操作，实现State Transfer。

例如，在电影购票系统中，与电影资源有关的api带上了“/movie”前缀，与影院资源有关的api带上了“/cinema”前缀，下面是一些api例子：

GET  /movie/comingSoon：列出所有即将上映的电影GET  /movie/ID：获取某个指定电影的详细信息

Mock Server

那么，在完成API设计后，我是如何构建前端Mock，为前端模拟数据响应的呢？我的做法是，启动一个本地Server作为Mock Server，在本地的Mock Server中模拟一个和线上一样的接口，打破前后端的耦合性，再使用第三方Proxy将Mock Server的接口代理到静态服务器上。如此，在项目前后端联调或者正式上线时，只需将代码中的Mock本地服务器地址替换为真实的服务器地址即可，避免了修改众多接口的麻烦。

在具体的实践上，我使用了Json-Server作为Mock的工具，并使用了mock.js生成测试的假数据，而关于其他测试数据生成技术，我去年也写过一篇相关博客：测试数据的生成——faker、chance和json-schema-faker。

下面我将介绍在“电影购票系统”开发中是如何运用这些技术的。

Json-Server

在将生成的测试假数据放到了data.json文件后，编写package.json的script，以方便以后每次调试启动json-server。

输入npm run mock指令即可启动json-server，并且列出了可访问的资源Resources。

当进行前端调试时，比如发出获取影院列表的请求时，json-server能够模拟真实的后端服务，给予相应的数据响应并在控制台log请求日志。

this.$http.get(this.serverUrl+"/cinema").then(response => {    ...}, response => {    ...});

前后端连接调试

当前后端基本开发完成后，便可将前后端连接调试了。前端需要修改请求配置，向真实的Server而不是Mock Server发送请求。

在本次课程作业的开发中，我切实体会到了前后端开发分离的益处。在根据功能需求制定完成前后端API后，使用本地Mock Server协助前端开发，打破前后端的耦合性，使得前后端开发相对独立，前端开发不再依赖远程服务器的数据接口，并且也没有跨域问题。前后端开发分离的方式可以帮助我们构建一个高效、规范、流程化的开发流程。

---

参考资料：
1. Web前后端分离开发思路
2. 构建前端Mock Server的利器/Json-Server
3. 理解RESTful框架