0
1vue中使用Mock.js生成模拟数据
0
1需求
扫码关注
![5d1cf6287c13c27d085aa1e3ba4791a1.gif](https://i-blog.csdnimg.cn/blog_migrate/88bf298b7c2c7a6af711c0b02df6ce56.gif)
![1283eb79b3f83bd1750b8b9da6ade5f0.png](https://i-blog.csdnimg.cn/blog_migrate/546634dbf17a7b46f614e0e6d669be7a.png)
系统开发过程中,前后端开发人员定义好开发文档,前端使用mockjs快速生成模拟数据,方便构建前端页面以及测试数据。
0 2安装![1283eb79b3f83bd1750b8b9da6ade5f0.png](https://i-blog.csdnimg.cn/blog_migrate/546634dbf17a7b46f614e0e6d669be7a.png)
项目根目录执行一下代码:
npm install mockjs
![1283eb79b3f83bd1750b8b9da6ade5f0.png](https://i-blog.csdnimg.cn/blog_migrate/546634dbf17a7b46f614e0e6d669be7a.png)
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.前台打印数据如下:
![1283eb79b3f83bd1750b8b9da6ade5f0.png](https://i-blog.csdnimg.cn/blog_migrate/546634dbf17a7b46f614e0e6d669be7a.png)
"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", //随机生成一个(中国)县
0
5备注
![1283eb79b3f83bd1750b8b9da6ade5f0.png](https://i-blog.csdnimg.cn/blog_migrate/546634dbf17a7b46f614e0e6d669be7a.png)
1.参考文章:https://blog.csdn.net/lduzhenlin/article/details/94430283
2.mock官网:
http://mockjs.com/
![8b67759e1b9d12af535048b0b26c5b5e.png](https://i-blog.csdnimg.cn/blog_migrate/ff98672b2b0dcac40135d540a97978d2.png)
![8b67759e1b9d12af535048b0b26c5b5e.png](https://i-blog.csdnimg.cn/blog_migrate/ff98672b2b0dcac40135d540a97978d2.png)
![5615c730047a5062ef0b48ea566c1dca.png](https://i-blog.csdnimg.cn/blog_migrate/cc32517fcfd0144dcf4e40c9a452399f.png)
![bf163ea267bfef352c19cd31f8f71b49.png](https://i-blog.csdnimg.cn/blog_migrate/2b7d3508d925799588da525ce054b3e5.jpeg)
![b42f27c30f0b0700eab8ac16bcd0d507.gif](https://i-blog.csdnimg.cn/blog_migrate/2ff1c7292fee63ccabb379192f9d8336.gif)
![b42f27c30f0b0700eab8ac16bcd0d507.gif](https://i-blog.csdnimg.cn/blog_migrate/2ff1c7292fee63ccabb379192f9d8336.gif)