爱编程，爱生活，爱自己，还有 imooc
课程名称：利用Go优越的性能，设计与实现高性能企业级微服务网关
讲师名称：牛儿吃草（这是大佬，在滴滴工作过）

前端与后端如何开发不阻塞？

‍如何才能做到前端和后端开发不阻塞，这个就是我们做工程研发所经常遇到的问题，
就是前端和后端‍‍依赖谁的一个问题。
前端的话说你必须给到我后端的接口，然后我才能开发；
那后端的话，‍‍由于某一个功能很复杂，然后他没有考虑好对应的功能‍‍要怎么实现，然后等他实现完毕了之后，整个工程的工期已经过了2/3了，‍‍这样的话前端就说我这边工作完成不了了，总结起来说是一个扯皮的问题，‍‍

怎么才能避免开发的时候相互并行的不会发生阻塞，一般的话‍‍前端和后端他们需要把这个方案去定制出来，定制完方案了之后，一般是后端的话，他会出一个后端的接口文档，‍‍或者是技术方案，然后这样的话跟前端沟通好了之后，后端就出一个对应的接口的文档，‍‍并且接口文档的话是可以直接执行的。‍‍

我们总结一下怎么才能不阻塞。

第一条的话，‍‍前端直接代理后端的一个 mock 接口，然后做开发测试。也就是说后端的话‍‍ta虽然没有完成开发，但可以把接口给 mock 出来，返回一个确定的接口的数据，‍‍它只要格式确定就可以，然后前端的话就可以直接用这接口做开发了，没有什么阻塞了，‍‍等两边都开发完毕了之后，然后再进行一下联调，或者如果是一个团队的话，前端和后端直接招呼一声，然后他就可以测试这个接口是不是ok了。‍‍

然后‍‍如果是后端是比较工作繁忙的，接口非常多，前端也可以完成一部分独立 mock 的数据，‍‍

前提的话是说前端后端需要把他的返回格式相互确认一下，我们的数据库里边一共有几个字段，‍‍然后我们返回的数据的话，可能差异的话就是说我要返回一个用户名，到底是叫name还是叫user_name，‍‍这类的问题的话是非常简单的，如果能明确到这个级别，就是说我的信息项然后都清楚，‍‍前端的话也可以独立的mock数据，

然后就是说后端‍‍接口开发完了之后就可以用实际的接口替换这个 mock 的数据即可。‍‍

然后我们看一下如果就是‍‍后端要mock这个接口的话应该怎么个提供接口数据？
一般的话我们是需要提供一个接口文档，‍‍类似这个接口文档：

我们这边是把我们的网关里边部分管理员的一个接口提出来了，做了一个接口文档，‍‍它这里边的话就有登录退出和信息，然后我们就可以直接用请求方式，‍‍比如密码的话123456，然后用户名的话是admin，

然后点击执行，

这样的话‍‍ta就可以直接模拟发送了一个真实的请求，ajax发送了一个请求，然后它的返回值就可以拿到了‍‍这些信息:

拿到这个的话，它还可以联动的查询，因为注册了cookie了之后，这里边可以直接‍‍点击查看，就可以查看到管理员的请求:

我请求的URL是哪一个请求?如下：

前端如果拿到这个文档，她可以看到它的Base URL，

然后Base URL 后边有一个path，‍‍

这样的话前端的话就可以做这一步操作，就是它可以直接在它代码里边 Vue 里边有一个proxy，‍‍它可以代理某个前缀的请求到某个后端的一个机器里边，【重要，解决跨域的时候需要配置代理！！！】

这样的话比如说我们在请求 /dev-api 里边的某个接口的时候，它就可以直接打到我们后端的某个接口，‍‍比如说admin_info，

ta就可以直接拿到了请求，拿到这个请求了之后，ta就可以直接做工程研发了，然后‍‍并且是不阻塞的，所以比较建议是后端提供这种接口，然后来提供给前端访问。‍‍
如果比如‍‍你的管理员接口是以这个功能组或者是模块整体完成的话，如图：

你就可以把这块逻辑‍‍整体替换成真实的一个接口数据，‍‍通知一下前端，然后前端同学ta就可以直接把相应的逻辑进行一下验证，‍‍也可以通知测试人员先进行介入这个模块的一个功能测试。‍