背景:

前后端分离开发,好处是关注点分离,以及并行开发提高效率。

实际工作中碰到的问题:

  • 并行不起来,前端依赖接口,在接口没好时,不会进行开发。
  • 在接口没好时,写死一些数据开发页面,接口好了后,对接起来要改大量代码,效率低下

    解决方案:

    引入两种开发模式,而且通过良好的配置,使得在这两种开发模式可以自由切换,不用更改任何代码。

  • 第一步:mock 模式下开发( npm run mock ):在接口没好时,使用 mock 模式开发。注意,mock 与直接页面写死数据不同,mock 是模拟接口返回的数据,至于请求接口这些代码仍然要写,而且当接口好了之后,切换到请求真实接口,不需要改动任何代码
  • 第二步:代理模式下开发( npm run proxy ):在接口完成后,使用 代理 模式开发。注意,代理模式是从本地直接请求真实接口,这与运行时的请求真实接口不同,因为运行时的域名不会是 localhost。

项目发布后,是运行模式,这与以上两种模式都是有区别的。

示例:

以 umi 项目为例,在 package.json 里加上两个 scripts : json { ... scripts: { mock: umi dev, proxy: UMI_ENV=dev MOCK=none umi dev } ... }

可以看出, umi 项目自动开启 mock 开发模式,具体可以参考 umi 项目的 mock 配置。对于其他非 umi 项目,也可以自行配置。
而对于 proxy 模式,则需要本地通过 localhost 服务器代码去访问真实接口给前端用,这样才不会有跨域等问题。这个一般 webpack 项目都可以很简单地配置出来,如下: json proxy: { /api: { target: https://your.domain.com/api, changeOrigin: true, pathRewrite: {^/api: } } }

前端请求接口的代码如下: typescript fetch(/api/xxx, ...)

注意,通过以上配置后,无论是 mock 开发模式,还是 proxy 模式,还是运行时模式,前端请求接口的代码都不用变。
如果涉及到接口需要用户登录的场景,那么以上 proxy 配置改成这样即可:

json proxy: { /api: { target: https://your.domain.com/api, changeOrigin: true, pathRewrite: {^/api: }, withCredentials: true, headers: { Cookie: YourToken=9fk_i8oJE5xoqSvi4DS9RhDZARMskBLc-pD0oHDPK0r }, } }