告别等待后端接口，前端使用在线mock数据

前言

在如今前后端分离的背景下，时常会出现前端界面开发完成，等待后端接口联调的情况。那么有没有什么方式可以有一个后端的模拟数据昵？最 low 也是最直接的方法就是自己在本地写 json 格式的模拟数据。这种方式有个弊端是，数据没有封装好的话，在切换环境的时候要改业务代码，而且写起来会很臃肿。所以有没有更好的方式昵?

mock 简介

在 npm 包里面有 mockjs 模块，用这个模块可以实现模拟接口数据，它的好处是可以根据随机数自动生成 json 数据，比如一个 list 里面要模拟20条数据，自己在本地写 json 格式数据的话，要真正写20条。而通过 mockjs 模拟数据的话，只需要写一条即可。

以下就是随机生成20条数据。

{'code': 0,'result': {'list|20': [{'id|+1': 1,'productImg': "/200x200",'productDesc|1': ['九成新哦，先到先得', '貂皮大衣', '八成新', '这个东西好好看的'],'productPrice|18-280': 20}],'total': 5,}}

mock 语法

支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等

支持扩展更多数据类型，支持自定义函数和正则。

{"string|1-10": "★","string2|3": "★★","number|+1": 202,//递增"number2|1-100.1-10": 1,"boolean|1": true,//随机生成布尔值'paragraph1': '@cparagraph(2)', //生成一段2句话的中文文本,'paragraph2': '@paragraph(3)', //生成一个3句话的英文文本'title': '@title', //随机生成一个英文标题'ctitle': '@ctitle', //随机生成一个中文标题"regexp": /[a-z][A-Z][0-9]/,//生成小写字母、大写字母、数字组成的随机字符"absolutePath": "@/string @/user/name",'protocol': '@protocol', //随机生成一个url协议'domain': '@domain', //随机生成一个域名,'email': '@email', //随机生成一个邮箱地址,'ip': '@ip' //随机生成一个ip地址"user": {"name": "demo"},"object|2": {"310000": "上海市","320000": "江苏省"},"array|1": [ "AMD" ]}

在线 mock 操作步骤

在线 mock 指的是可以在线拟定接口，具体操作如下：

打开官方网址，https://easy-，登陆账号（没有账号登陆后会提示以登陆的账号和密码自动注册）。如图所示，点击项目，进入创建接口页面。

在创建接口页面，点击创建接口。

按如图1，2，3，4，5步创建接口。【格式化】按钮是对左边的接口返回数据进行格式化。

创建完成后，返回主页面，右边的操作按钮可对接口进行预览、编辑、复制接口地址、克隆、下载、删除。

点击【设置】按钮，可对项目名称、项目url、项目描述进行修改，修改完成之后点击下方的保存按钮。

创建完成之后可以在主页面看到接口地址。加上配置的接口名称，就可以直接调用 mock 接口了。

在可视化页面配置完成之后，就可以在自己的项目里面配置 mock 环境了。