前端工程师必会的数据接口fast Mock的使用

1.背景

项目开发过程中经常遇到过这样的场景：项目的页面已经全部完成开发，但是后端的接口还没完成。这个时候一
直等的话就比较浪费时间。是否可以自己模拟一些数据先来开发功能呢？这个时候就可以用到 fast Mock 来模拟接
口返回数据。但必须是与后端商量统一接口命名、请求参数字段与返回字段等 , 类似的在线软件easy mock,yapi
等.

2.使用方法

这个就是网址链接,非常容易就注册登录进去了,它支持mockjs语法,功能非常强大

登录进去直接可以创建项目,也可以加入到团队项目中

这是在线预览后的效果,让我们在项目中测试一下

this.$http
      .fetchGet("https://www.fastmock.site/mock/d6daca9d37dce704f2f0885740755666/_shop-01/api/test"
      )

请求结果:

这里我自己用Mockjs语法写了一个接口,大家可以参考Mockjs语法,很容易就上手,

这里给大家列出常用的几个数据占位符语句

{
          
   
  "string|1-10": "@string",		//1-10位的随机字符串
  "integer": "@integer(10, 30)",	//10~30之间的整数
  "float": "@float(60, 100, 2, 2)",	//60~100之间2位小数的数据
  "boolean": "@boolean",			//true or false
  "date": "@date(yyyy-MM-dd)",		//返回以yyyy-MM-dd格式的日期
  "datetime": "@datetime",			//"1996-05-11 06:03:54"
  "now": "@now",					//"2021-07-29 15:39:05"
  "url": "@url",					//随机url路径
  "email": "@email",				//随机电子邮箱
  "region": "@region",				//随机地区 比如"东北"
  "city": "@city",					//随机城市
  "province": "@province",			//随机省份
  "county": "@county",				//随机区域,注意不是国家的单词,"南开区"
  "upper": "@upper(@title)",		//对随机的title进行大写格式化
  "guid": "@guid",					//"E4caab6d-eEFB-72ef-EED4-AE5C49d4b8A7"
  "id": "@id",						//"620000200611082159"
  "image": "@image(200x200)",		//随机图片
  "title": "@title",				//随机title
  "cparagraph": "@cparagraph",		//随机长度的段落文字
  "csentence": "@csentence",		//随机长度的句子
  "range": "@range(2, 10)"			//开始为2,末尾为10 步长为1的数组
}