讲一讲前后端独立开发

[nonew]

1.接口API的制定
2.小程序如何调试接口API
3.前后端联调
readme里讲的比较粗略，希望能结合这个项目详细地讲一下。
谢谢！

[imageslr]

1. 接口API的制定

我遵循RESTful风格制定API。关于RESTful，网上有很多资料，可以搜索一下。

前后端开发是以API为核心的。前端假设后端返回的数据符合API文档的定义，然后进行开发。后端开发的时候保证输出符合API文档即可。所以API文档先行。

定义API文档有很多种方式。一个简单的Word就可以，要规范点的话可以像我那样，使用Swagger。此外还有很多在线RESTful API工具，学习曲线比Swagger要低很多，可以搜一下（比如淘宝的rap）。

定义好API后，需要一个mock服务器来根据接口路径生成对应的模拟数据。这是给前端用的，因为前后端分离开发时，前端没有真实数据来源，需要使用模拟数据开发。数据真实与否不重要，只要URL和格式符合API文档的约定即可。我一般使用Easymock，定制化较好。

2. 小程序如何调试接口API

设置好mock服务器之后，小程序就可以直接使用mock服务器提供的接口进行开发了。

你可以看一下这个项目的apis/request.js文件，我将API的根路径定义为一个变量BASE_URL，如下：

/**
 * 服务器根路径
 */
// 远程服务器
export const BASE_URL = 'https://www.easy-mock.com/mock/5aacc9a1d3f6bd35dfb4be65/api/v1'
export const DOMAIN_NAME = '这里需要填写真实服务器地址，用来上传图片'
// 本地服务器
// export const BASE_URL = 'http://localhost:8080/library/public/index.php/api'
// export const DOMAIN_NAME = 'http://localhost:8080'

前端开发阶段，使用你在easymock里设置的项目的根路径。后期和后端联调的时候，把这个变量改成后端服务器真实根路径即可。

apis/中的文件按照模块划分，所有接口都使用相对路径。apis/request.js中封装了网络请求函数，会将服务器根路径拼接到相对路径前，可以看一下这个文件的源码。

另外如果你想针对某个接口进行特殊情况的调试，就得自己处理了。比如想模拟返回错误信息的情况，可以修改easymock里该接口的返回数据，然后刷新小程序。如果想模拟网速慢的情况，可以打开控制台，设置“Network Condition”，如下图：

3. 前后端联调

前后端联调上面也说了，对于前端而言，就是替换服务器根路径。主要是调试后端，保证后端每个接口返回的数据符合预定的格式。

可以下载Postman。Postman能够像后端接口发送各种模拟请求，你用它测试后端的每一个接口就可以了：填写API路径 → 填好参数 → 发送请求 → 检查返回数据的格式。

这是我的Postman的截图，左面是当时测试后端API的记录：

这样调试完之后，修改替换前端的服务器根路径，然后每个页面流程走一遍测试一下，微调。

[nonew]

首先非常感谢您的详细讲解！
现在遇到一个问题，因为swagger接口要更新，如果我在easy mock里选择同步，就会覆盖之前的配置，不知道有没有什么好的解决方法。
另外如果有10个接口，服务器端是分批开发好的，那么联调的时候，如果改了base url，所有的接口都会用服务器端的，导致业务逻辑可能不能完整地跑完，您遇到过这种情况吗，是怎么解决的。

谢谢！

[imageslr]

我一般不会通过swagger接口更新easy mock。我只会在第一次用swagger接口初始化一下easy mock，之后就不再同步了（就像你说的，会覆盖之前的配置）。因为API接口变动不会太频繁，所以每次修改完swagger之后，手动修改一下easy mock的对应项目就可以。Swagger作为文档，随时查阅；Easy
mock专注于提供模拟数据。

我没遇到过联调但是跑不完业务逻辑的情况，因为我做的项目都是给自己用的，一次性开发完成。我觉得如果服务器端是分批开发好的话，就不用急着联调。当然，具体还是和你们的后端商量一下吧。自己开发的话，可以测试每一批接口的数据格式，等全开发完之后，再测试完整的业务逻辑。