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