前端通过类型系统实现mock数据,解决接口约定问题

广告位招租
扫码页面底部二维码联系

前段时间写过一个库 tyshemo,主要用于在运行时对数据进行检查,特别针未经授权,禁止复制转载。【未经授权禁止转载】对后台接口返回的数据进行检查,做到对后台【版权所有,侵权必究】转载请注明出处:www.tangshuang.net返回数据类型和格式的实时监控。后来,在工【版权所有,侵权必究】【关注微信公众号:wwwtangshuangnet】作中,遇到前端界面写完了,后台接口没出,【作者:唐霜】未经授权,禁止复制转载。不得不等着后台写完接口后在联调的尴尬场景【关注微信公众号:wwwtangshuangnet】【关注微信公众号:wwwtangshuangnet】,于是就想,能否前端同学先写好一个文档,【版权所有】唐霜 www.tangshuang.net【转载请注明来源】后端同学按照该文档输出?(使用 grag本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】hql 的同学请撤离)

【本文首发于唐霜的博客】原创内容,盗版必究。【本文受版权保护】未经授权,禁止复制转载。

想到这个点之后,我就思考,既然我写了一个本文作者:唐霜,转载请注明出处。【未经授权禁止转载】类型描述系统,为何不直接将这个描述系统的原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net实例,转化为描述文本呢?例如:

【本文受版权保护】【版权所有,侵权必究】【版权所有】唐霜 www.tangshu本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】ang.net本文版权归作者所有,未经授权不得转载。
import { Dict } from 'tyshemo'

export const BookType = new Dict({
  name: String,
  price: Number,
})

// 使用方法:BookType.assert(book)
【本文受版权保护】转载请注明出处:www.tangshua转载请注明出处:www.tangshuang.net未经授权,禁止复制转载。ng.net

为什么我不能直接输出一个文本:

原创内容,盗版必究。【原创不易,请尊重版权】未经授权,禁止复制转载。
{
  name: string,
  price: number,
}
【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshu未经授权,禁止复制转载。原创内容,盗版必究。ang.net【版权所有,侵权必究】

这样非常清晰,前后端,甚至任何人都能知道【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。我的一个数据结果和它每个节点(字段)的类著作权归作者所有,禁止商业用途转载。【本文受版权保护】型都一目了然。

【关注微信公众号:wwwtangshua本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.netngnet】转载请注明出处:www.tangshua【原创内容,转载请注明出处】【原创不易,请尊重版权】ng.net

于是我开发了一个 Parser,用于将类【转载请注明来源】本文作者:唐霜,转载请注明出处。型实例,转化为描述对象,通过 JSON.【原创内容,转载请注明出处】【版权所有】唐霜 www.tangshuang.netstringify 就可以转化为描述文本【原创内容,转载请注明出处】【版权所有】唐霜 www.tangshuang.net。同时 Parser 还可以将描述对象返【本文受版权保护】【本文首发于唐霜的博客】回去转化为可以用来做类型检查的实例。这样转载请注明出处:www.tangshuang.net【转载请注明来源】,前后端实现了可传输类型检查的描述对象,著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】如果后端是通过 nodejs 实现的,那转载请注明出处:www.tangshuang.net转载请注明出处:www.tangshuang.net么传输这个描述对象,就可以在前后端都运行【访问 www.tangshuang.net 获取更多精彩内容】【原创内容,转载请注明出处】它。

【原创不易,请尊重版权】转载请注明出处:www.tangshua【原创不易,请尊重版权】【未经授权禁止转载】ng.net未经授权,禁止复制转载。

通过 Parser,我想到,可以把前端写【本文首发于唐霜的博客】【作者:唐霜】好的类型实例,转化为文档输出,在后端同学【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】没有动工之前,前端写好实例,输出描述文本【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】,和后端同学一起过目讨论,确认无误后,前著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。端按照这个结构开发即可,后端同学对照这个原创内容,盗版必究。本文作者:唐霜,转载请注明出处。结构和类型约束输出接口数据。

【版权所有】唐霜 www.tangshu【关注微信公众号:wwwtangshuangnet】【未经授权禁止转载】ang.net本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshua【作者:唐霜】【作者:唐霜】ngnet】【版权所有】唐霜 www.tangshu【本文首发于唐霜的博客】本文版权归作者所有,未经授权不得转载。ang.net

但是,单纯有了约定,并不能满足前端同学对未经授权,禁止复制转载。转载请注明出处:www.tangshuang.net数据的需求,因为没有数据就不能渲染界面,【关注微信公众号:wwwtangshuangnet】【本文首发于唐霜的博客】无法进行下一步的操作,总不能在脑海中想象【原创内容,转载请注明出处】【版权所有,侵权必究】结果吧。于是,我想,既然数据的类型是确定【本文首发于唐霜的博客】【关注微信公众号:wwwtangshuangnet】的,那么,就可以通过一些随机算法,按照数本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。据类型输出对应的值。于是,我撰写了 Mo著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。cker 用来生成这样的数据。

【原创内容,转载请注明出处】【关注微信公众号:wwwtangshua转载请注明出处:www.tangshuang.net原创内容,盗版必究。ngnet】【本文受版权保护】
import { Parser, Mocker } from 'tyshemo'
import some from './some.type.js'
const parser = new Parser()
const desc = parser.describe(some)

const mocker = new Mocker()
const mock = mocker.mock(some)
转载请注明出处:www.tangshua【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。ng.net【作者:唐霜】未经授权,禁止复制转载。

但是,这样的工作方法太过原始了,有没有一转载请注明出处:www.tangshuang.net【原创不易,请尊重版权】个办法,可以更好的表达一个工作的流程呢?

著作权归作者所有,禁止商业用途转载。【本文首发于唐霜的博客】【原创不易,请尊重版权】【未经授权禁止转载】

我决定写一个基于 express 的服务【关注微信公众号:wwwtangshuangnet】【未经授权禁止转载】,配置所有 api 接口的详细信息,启动【关注微信公众号:wwwtangshuangnet】【版权所有,侵权必究】这个服务之后,就可以在浏览器中看到对应的本文作者:唐霜,转载请注明出处。【未经授权禁止转载】接口文档,或者启动服务后,可以将前端的接【版权所有,侵权必究】【关注微信公众号:wwwtangshuangnet】口指向 mock 服务的地址,让后台返回【本文首发于唐霜的博客】转载请注明出处:www.tangshuang.net mock 数据。用了一个周末,我写完了【作者:唐霜】【未经授权禁止转载】 tyshemo-service,虽然界【作者:唐霜】转载请注明出处:www.tangshuang.net面不怎么好看,但是功能实现了。

【关注微信公众号:wwwtangshua【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。ngnet】【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。
import TyshemoService from 'tyshemo-service'
import { BookRequestType, BookResponseType } from './book.type.js'

const server = new TyshemoService({
  basePath: '/api/v2',
  errorMapping: {
    10001: '数据库连接错误',
    10002: 'xx错误',
  },
  data: [
    {
      name: '第一组接口',
      items: [
        {
          name: '第一个接口',
          description: '这个接口是用来干嘛的?',
          method: 'get',
          path: '/book/:id',
          request: BookRequestType,
          response: BookResponseType,
        },
      ],
    },
  ],
})

server.doc({ port: 3001 }) // 启动文档服务器
【作者:唐霜】【本文受版权保护】【版权所有】唐霜 www.tangshu【转载请注明来源】未经授权,禁止复制转载。ang.net未经授权,禁止复制转载。

其中 BookRequestType 描【版权所有,侵权必究】【版权所有】唐霜 www.tangshuang.net述了请求参数的类型。由于这里的 meth原创内容,盗版必究。原创内容,盗版必究。od 是 get,所以,请求参数实际上表【原创内容,转载请注明出处】【未经授权禁止转载】达的是 searchQueryParam【本文首发于唐霜的博客】著作权归作者所有,禁止商业用途转载。s 的字段及其类型。如果是 post 则【未经授权禁止转载】【关注微信公众号:wwwtangshuangnet】会是 postBody 的字段类型及其结本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.net构。BookResponseType 描【访问 www.tangshuang.net 获取更多精彩内容】【原创内容,转载请注明出处】述了返回结果的数据结构,以及每个字段的数本文作者:唐霜,转载请注明出处。【转载请注明来源】据类型。需要注意的是,实际上,在前端代码本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。中 BookRequestType 都是【原创不易,请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】可以直接使用的,例如,在请求 book 未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net的 ajax 返回结果处,调用 Ty.e【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】xpect(data).to.be(Bo【未经授权禁止转载】【版权所有,侵权必究】okResponseType) 来检查 本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。ajax 返回结果是否符合预期。

转载请注明出处:www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。ng.net原创内容,盗版必究。

上面的代码,让 nodejs 在本地 3【未经授权禁止转载】未经授权,禁止复制转载。001 端口起了一个文档服务,浏览器打开原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。,就可以看到文档。让后端同学访问你本地起【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。的这个页面,就可以让他对照文档进行接口输本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】出啦。

【访问 www.tangshuang.n本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。et 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。

开启 mock 服务,你需要使用下面的代【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。码:

【转载请注明来源】【转载请注明来源】未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。
server.mock({ port: 3002 })
转载请注明出处:www.tangshua本文版权归作者所有,未经授权不得转载。【关注微信公众号:wwwtangshuangnet】ng.net【转载请注明来源】本文版权归作者所有,未经授权不得转载。

将本地开发的代理,指向 3002 端口,【关注微信公众号:wwwtangshuangnet】【未经授权禁止转载】就可以 ajax 请求到 mock 服务本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshuangnet】器就可以了。具体配置,你可以去 tyshemo-service 的仓库阅读更多配置细节。

【本文首发于唐霜的博客】【关注微信公众号:wwwtangshua【本文受版权保护】未经授权,禁止复制转载。ngnet】

之后,我又想,我还可以起一个服务,让前端【版权所有,侵权必究】【本文受版权保护】同学去监控后端同学写好的接口,是否符合类【转载请注明来源】【本文受版权保护】型和结构要求。因为我们传入了 reque【关注微信公众号:wwwtangshuangnet】未经授权,禁止复制转载。st 对应的类型,所以用它来 mock 【未经授权禁止转载】本文作者:唐霜,转载请注明出处。一个请求数据也很简单。

【转载请注明来源】【版权所有】唐霜 www.tangshu转载请注明出处:www.tangshuang.net转载请注明出处:www.tangshuang.netang.net【转载请注明来源】转载请注明出处:www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】本文作者:唐霜,转载请注明出处。ng.net
server.data[0].items[0].test = [
  {
    frequency: 6000, // 6 秒一次
    name: '测试用例1',
    params: { id: 123 }, // 替换 path 中的参数
    request: { price: 12 }, // 指定请求参数中的部分字段
  },
]
server.test({ port: 3003, target: 'http://some.com:8008' })
【本文受版权保护】【关注微信公众号:wwwtangshua转载请注明出处:www.tangshuang.net转载请注明出处:www.tangshuang.netngnet】

打开本地 3003 的网页,可以看到一个转载请注明出处:www.tangshuang.net【版权所有,侵权必究】测试页面,这个测试页面虽然丑陋,但是它可【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】以帮助前端开发去监测后台接口是否是按照文【本文首发于唐霜的博客】【原创不易,请尊重版权】档输出内容的。

著作权归作者所有,禁止商业用途转载。【版权所有,侵权必究】

通过上述一通操作,就可以让前端在没有什么未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。成本的情况下快速完成自己的开发了。

【版权所有】唐霜 www.tangshu本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。ang.net【版权所有】唐霜 www.tangshu【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】ang.net

最后留个悬念,既然我们能把接口的配置都集本文版权归作者所有,未经授权不得转载。【关注微信公众号:wwwtangshuangnet】中在这里了,我们是否还可以提供更集成的方【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号:wwwtangshuangnet】案,把前端的 ajax 也集成进来,也就【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】是说,对于单一一个接口,前端需要写好该接未经授权,禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】口的各种请求配置、类型、测试等信息。需要【版权所有】唐霜 www.tangshuang.net【转载请注明来源】发 ajax 的时候,调用某个方法得到数转载请注明出处:www.tangshuang.net转载请注明出处:www.tangshuang.net据,同时干完数据类型的检查。需要文档和 本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】mock 的时候,启用服务。这样的方案,【原创不易,请尊重版权】【未经授权禁止转载】也不是不可行。

未经授权,禁止复制转载。未经授权,禁止复制转载。【原创内容,转载请注明出处】【未经授权禁止转载】