1.安装mockjs 和axiosjavascript
npm install --save-dev mockjs npm install --save axios
2.在src目录下建立mock文件夹,并建立index.js文件,内容以下:vue
import Mock from 'mockjs' const data={ "id":"@guid", "name":"@cname", }; Mock.mock('/api/test', 'post', data) export default Mock;
3.在main.js中引入mock文件下的index.js文件java
import Mock from '@/mock'
4.App.vue中使用ios
<template> <div id="app"> <img src="./assets/logo.png"> <span>{ {$t("global.test")}}</span> <button @click="testReq">测试请求</button> <router-view/> </div> </template> <script> import Cookie from './util/cookie' import Axios from 'axios' export default { name: 'App', methods:{ testReq:function(){ Axios.post('/api/test').then((res) => { console.log(res) }).catch((err) => { console.log(err) }) } } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
5.经常使用数据占位符git
//数据占位符使用 { "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", //随机生成一个(中国)县 }
可使用 Easy Mock 模拟数据 https://easy-mock.com/project/5d15d0f5f406795ca1b8085bgithub
Mock文档:https://github.com/nuysoft/Mock/wikiweb