膳逸前端开发--后台开发日记【二】

提示：本篇文章为学校项目实训的记录，所以可能会写的没头没尾的，不具有实际指导意义，因为是小组共同开发，所以不是自己负责的部分会在别的小组成员博客里。

---

前言

上文说到设计好了前端界面，但是苦于无法请求到后端接口，所以使用API工具模拟后端返回响应。项目采用“国产之光”Apifox来定义接口。在学习了Apifox的使用后，终于！学成归来。
前端可以使用MOCK功能来模拟接收返回调用后端接口的数据。而Apifox集成了这一功能，真是太棒了！（PS：感觉比后端沟通还是麻烦些）

---

一、跨域接收MOCK返回响应

由于前后端框架已经搭好了，所以部分接口仍然是后端项目提供，但是存在一部分接口由本地MOCK提供，这里就涉及到跨域问题和其他一些小问题。
这里给出解决方案：

1.跨域问题

由于后台管理系统是web端应用，而我使用Chrome开发。在Chrome上应用插件CORS Unblock，这样可以解决跨域的信用问题（PS：不是长久之计，我这里只做开发暂用）。其实可以用proxy代理之类的方法解决，但是这个还是又快又有效。

2.路径拼接问题

在之前的项目框架中，由于请求接口统一由后端提供，因此接口的前一部分总是相同的，因此会有拼接。但是这里请求接口有所变化，所以这里需要在拼接前判断一下，如果请求URL已经包含“http”字样，那么就不做拼接，直接进行请求。
如下图：（这一改动在main.js当中）

二、前端接收返回数据并显示

1.修改用户状态

在Apifox中定义接口MOCK如下：

点击快捷请求，可以模拟返回数据，例如：

所以在前端将URL粘贴到请求函数的参数当中，web界面显示如下：

哈哈，成功了吧。

2.活动管理

再举个例子吧。比如活动管理的searchByPage接口。
这个的模拟同上面一样，定义好接口MOCK以后就会有返回。
因为是页面初始化查询，所以没有请求体。返回事实上包含一个List。

然后在前端就可以渲染了！

---

总结

首先这里要夸一夸Apifox，真的很好用，建议推广。比什么Postman，ApiPost强多了，上手也很快。
其次真的感觉可以前后端一起定义好接口以后，前端先去度个假，回来直接调后端接口，真的省不少事。然后这时候后端去度假哈哈哈。（异想天开了）
这篇博客就写到这吧，下次开发后再来继续写。