vue中使用Mock.js生成模拟数据

倒骑驴的猪 2020-08-23

565

vue中使用Mock.js生成模拟数据

需求

系统开发过程中，前后端开发人员定义好开发文档，前端使用mockjs快速生成模拟数据，方便构建前端页面以及测试数据。

安装

项目根目录执行一下代码：

npm install mockjs

项目中使用

1.在src目录下创建mock文件夹，并创建inex.js文件，用来设计自己想要生成的数据格式：

import Mock from 'mockjs'


const data={
    code: '00',
    message:'查询功能',
    'data|10':[
      {
        'id|+1':1,
        'name':'@cname',
        'age': '@integer(30, 50)',
        'createDate':'@date(yyyy-MM-dd)',
        'photo': '@image(200*200)'
      }
    ]
};


Mock.mock('/api/test', 'post', data)


export default Mock

2.在main.js中导入mockjs:

import Mock from '@/mock'

3.在页面中使用：

this.$post('/test').then((res) => {
  console.log(res)
}).catch((err) => {
  console.log(err)
})

4.前台打印数据如下：

部分数据占位符

"integer": "@integer(10, 30)",  //随机生成一个10～30之间的正整数
  "float": "@float(60, 100, 2, 2)",  //随机生成浮点数，参数分别为整数部分最小值和最大值、小数部分保留最小位数和最大位数
  "boolean": "@boolean",       //随机生成boolean
  "string|1-2": "@string",     //随机生成字符串
  "name":"@cname",             //随机生成名字
 
  "date": "@date(yyyy-MM-dd)", //按照格式随机生成时间
  "datetime": "@datetime",     //随机生成时间
  "now": "@now",               //当前时间
 
  "id": "@id",                 //随机生成一个 18 位身份证
  "guid": "@guid",             //随机生成一个 GUID
  "url": "@url",               //随机生成url字符串
  "email": "@email",           //随机生成邮箱
  "image": "@image(200x200)",  //随机生成一个大小为200x200的图片链接
  "title": "@title",           //随机生成一句标题，其中每个单词的首字母大写
  "upper": "@upper(@title)",   //把生随机成的标题全部转为大写
  "cparagraph": "@cparagraph", //随机生成一段中文文本
  "csentence": "@csentence",   //随机生成一段中文文本
  "range": "@range(2, 10)" ,   //返回一个内容从2开始到9的整型数组
 
  "region": "@region",         //随机生成地区 华中
  "province": "@province",     //随机生成省会 省
  "city": "@city",             //随机生成城市 市
  "county": "@county",         //随机生成一个（中国）县

备注

1.参考文章：https://blog.csdn.net/lduzhenlin/article/details/94430283

2.mock官网：

http://mockjs.com/

扫码关注

数据库

文章转载自倒骑驴的猪，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

vue中使用Mock.js生成​模拟数据

评论

vue中使用Mock.js生成模拟数据