vue中使用mockjs

1.安装mockjs 和axios

1 npm install --save-dev mockjs

2.在src目录下创建mock文件夹,并创建index.js文件,内容如下:

 1 import Mock from ‘mockjs‘
 2 
 3 Mock.mock(‘/cityMeunList‘, /post|get/i, {
 4   // /post|get/i 匹配post和get模式 也可以用‘post‘或‘get‘
 5   // 属性 list 的值是一个数组,其中含有 1 到 10 个元素
 6   ‘list|20-34‘: [{
 7     // 属性 id 是一个自增数,起始值为 1,每次增 1
 8     ‘id|+1‘: 1,
 9     // 随机数字1-100
10     ‘number|1-100‘: 100,
11     "province": "@province",
12   }]
13 })
14 
15 
16 const data={ 
17   "id":"@guid",
18   "name":"@cname",
19 };
20 
21 Mock.mock(‘/api/test‘, ‘post‘, data)
22 
23 export default Mock;

3.在main.js中引入mock文件下的index.js文件

1 import Mock from ‘@/mock‘

4.App.vue中使用

1   created() {
2     axios.get("/cityMeunList").then((res) => {
3       const { list } = res.data;
4     })
5   }

 5.常用数据占位符

 1 //数据占位符使用
 2 {
 3   "integer": "@integer(10, 30)",  //随机生成一个10~30之间的正整数
 4   "float": "@float(60, 100, 2, 2)",  //随机生成浮点数,参数分别为整数部分最小值和最大值、小数部分保留最小位数和最大位数
 5   "boolean": "@boolean",       //随机生成boolean
 6   "string|1-2": "@string",     //随机生成字符串
 7   "name":"@cname",             //随机生成名字
 8  
 9   "date": "@date(yyyy-MM-dd)", //按照格式随机生成时间
10   "datetime": "@datetime",     //随机生成时间
11   "now": "@now",               //当前时间
12  
13   "id": "@id",                 //随机生成一个 18 位身份证
14   "guid": "@guid",             //随机生成一个 GUID
15   "url": "@url",               //随机生成url字符串
16   "email": "@email",           //随机生成邮箱
17   "image": "@image(200x200)",  //随机生成一个大小为200x200的图片链接
18   "title": "@title",           //随机生成一句标题,其中每个单词的首字母大写
19   "upper": "@upper(@title)",   //把生随机成的标题全部转为大写
20   "cparagraph": "@cparagraph", //随机生成一段中文文本
21   "csentence": "@csentence",   //随机生成一段中文文本
22   "range": "@range(2, 10)" ,   //返回一个内容从2开始到9的整型数组
23  
24   "region": "@region",         //随机生成地区 华中
25   "province": "@province",     //随机生成省会 省
26   "city": "@city",             //随机生成城市 市
27   "county": "@county",         //随机生成一个(中国)县
28 }
29   
30 

 

vue中使用mockjs

上一篇:源码编译安装mxnet


下一篇:Hibernate中怎样实现类之间的关系?(如:一对多、多对多的关系)?