关注小程序 找一找教程网-随时随地学编程

HTML5教程

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

爱编程,爱生活,爱自己,还有 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就可以直接把相应的逻辑进行一下验证,‍‍也可以通知测试人员先进行介入这个模块的一个功能测试。‍