IT教程 ·

腾讯抢金达人项目中的前后端合作

Go 1.14 中 Cleanup 方法简介

在前后端的合作过程当中,平常都是并行开发的状况,那末在后端接口还没有开发终了时,前端的营业逻辑事情就很难睁开。因而也就有许多模仿接口数据的体式格局,这些体式格局各有个的优瑕玷:

  • 直接在代码中模仿接口数据:侵入营业逻辑,在后期须要删除这些模仿数据;
  • fiddler 替代文件:页面接口比较多时,须要替代的文件比较多;
  • fs 模块读取 json 文件:假如长列表的话,须要造的数据许多;
  • mockjs:防止上述体式格局的瑕玷,但没法校验参数是不是缺失;
  • service worker:基于 service worker 能够阻拦前端的要求,并构建假数据返回,但没法阻拦 node 端提议的要求;
体式格局 校验参数合法性 切换环境轻易 前后端要求都可 不修正营业代码 模仿数据轻易
直接在营业代码
中写接口数据
fiddler 替代文件 yes
fs 读取 json 文件 yes yes
mockjs yes yes yes
sw yes

我们抱负的状况是:

  1. 提早校验要求接口中参数的合法性,是不是缺失某些参数等;
  2. 切换环境轻易,既能够运用模仿数据,也能够运用测试环境中的数据,同时也能够用正式环境中的数据举行磨练;
  3. 能够阻拦前后端均提议的要求,并只管少的修正营业代码;
  4. 生成的模仿数据轻易,假如接口中要返回前 1000 名用户的数据,总不能在 json 文件中写 1000 条数据;

上面的这几种体式格局,在我们抢金达人项目中,均不实用,或许对原有逻辑修改太大,或许运用起来不轻易。这里我依据我们项目的须要,基于 mockjs 并与 express 的连系,完成了一套模仿数据的要领。

1. 模仿数据并校验参数的合法性

把接口的数据悉数写在 json 文件,然后经由过程 fs 模块举行读取的这类体式格局,在组织大批数据时非常不轻易。因而我们基于 mockjs 来完成模仿的数据,几行代码就可以完成排行榜等大批的模仿数据,同时,也能够模仿一些轻微极度的状况,比方用户的昵称长度太长等,这些数据在测试环境平常很少能碰到,或许在后端接口模仿的本钱也会比较高。

// rank-person.js
Mock.mock({
  "rank|1000": [
    {
      "no|+1": 1,
      uin: () => Mock.Random.string(32),
      nick: () => Mock.Random.string(1, 20),
      face: () => faces[Mock.Random.integer(0, 3)],
      region: "INVALID",
      title: "初露锋芒",
      level: () => Mock.Random.integer(1, 20),
      score: () => Mock.Random.integer(1, 2000),
      winPercent: 86
    }
  ]
});

然则,纯基于 mockjs 数据的体式格局,我们没法提现获知接口参数的非常。当我们在匹配到接口要求后就返回数据,会下降对参数的敏感度。这里,我对配置文件举行革新,当前接口中须要的参数提早设定好,类似于 jQuery.validate 中的设定。

这里我们的排行榜接口里有个last参数,0 示意是本周的数据,1 示意是上周的数据:

module.exports = {
  params: {
    last: {
      required: true, // 是不是必需
      type: "number", // 参数的范例
      defaults: 0, // 默许值
      min: 0, // 最小值
      max: 1 // 最大值等
    }
  }
};

当 mock server 接收到要求后,会先校验参数的合法性,若参数不合法直接返回。实在我们排行榜的 last 参数不是必传项,不传时即默许是 0,但我们在这里测试时改成必传,只要不传 last 参数即为参数不合法:

腾讯抢金达人项目中的前后端合作 IT教程 第1张

当参数校验经由过程后,才会返回背面模仿的数据:

腾讯抢金达人项目中的前后端合作 IT教程 第2张

2. 数据环境的切换

我们在上面的图中能够看到,当 mock 字段为"mock"时,读取模仿的数据,是不是是一定要加一个 mock="mock"的参数才能去读模仿的数据呢?

这个要看我们项目到什么状况了,当项目还在条件开发阶段时,大部份接口都还没有完成,这里我们能够将接口默许指向到模仿数据,mock="testing"时就指向到测试环境的接口;当项目已稳固上线了,在迭代更新的阶段时,大部份接口已存在和完美了,只要部份的接口须要举行模仿调试,这时刻我们用mock="mock"参数来指向到模仿数据。

这里我运用 mock 参数掌握,另有一个原因是,前端项目会依据当前是哪一个环境,自动要求对应环境的接口,一切的接口均是一致掌握的:

腾讯抢金达人项目中的前后端合作 IT教程 第3张

如上图所示,假如我们要经由过程环境变量掌握 api 字段,终究强行修正某个接口变相要求其他环境的数据,会形成其他接口数据的杂沓,终究大概的结果是页面整体味挂掉。我们在运用mock字段作为参数时,侵入的营业逻辑会保持到最小的水平,同时,也能把前后端的合作,缩小到单个接口的粒度。而且,mock 参数也只会在 local 环境见效,纵然忘了去掉这个参数,也不会对线上环境形成影响。

再有,当我们前端逻辑发生变化后,除了运用模仿数据来磨练,假如线上有接口,我们也想用线上的数据磨练一下。能够,当传入mock="production"的参数时,mockServer 会读取线上接口的数据并返回。

3. mock 与 json

有的同学会建立一个 json 文件,把接口须要的数据都放到这个 json 文件里,然后运用fs.readFile来读取。如许却是也能够,然则当接口数据多的时刻怎么办,比方有一个排行榜是要输出前 100 名、前 1000 名用户的数据,总不能复制出 1000 份用户的数据吧。

在当前最好的体式格局,就是运用 mockjs 的东西来生成数据了,能够恣意的随机,也能够生成恣意个数的数组数据。我们这里把对参数的校验和 mock 生成的模仿数据放到一同:

module.exports = {
  params: {
    last: {
      required: true, // 是不是必需
      type: "number", // 参数的范例
      defaults: 0, // 默许值
      min: 0, // 最小值
      max: 1 // 最大值等
    }
  },
  result: {
    code: 0,
    msg: "success",
    "x-from": "mock",
    data: Mock.mock({
      "rank|100": [
        {
          "no|+1": 1,
          uin: () => Mock.Random.string(32),
          nick: () => Mock.Random.string(1, 20),
          face: () => faces[Mock.Random.integer(0, 3)],
          region: "INVALID",
          title: "初露锋芒",
          level: () => Mock.Random.integer(1, 20),
          score: () => Mock.Random.integer(1, 2000),
          winPercent: 86
        }
      ]
    })
  }
};

params 字段示意必需的参数,result 示意要返回的数据,data 中即为我们捏造的数据。

4. 及时修正模仿数据

我们能够在页面中直接及时修正数据,然后举行保留,自动革新页面后,就会获得适才想要的结果。

腾讯抢金达人项目中的前后端合作 IT教程 第4张

我们在页面中 mock 的接口都会在调试面板中展出来,默许调试面板时封闭的,开发者在点击页面右下角的灰色按钮后,能够呼起调试面板。修正内里的数据保留后,就及时看到适才的结果。

5. 总结

在开发和后期保护的过程当中,前端会常常碰到模仿接口数据的状况,要么是接口还没有开发完成,要么是接口不太好返回我们想要的状况。我也是在对比多种计划后,挑选了合适当前项目的一种前后端合作计划。

迎接关注我的民众号,多多交换:

.net 微服务实践

参与评论