第一步：安裝mockjs
npm install mockjs -s
第二步： 在main.js 中引入mock
// 引入mock
// import Mock from "./mock"
// 生產(chǎn)環(huán)境攔截（不是生產(chǎn)環(huán)境的時(shí)候引入mock）
if(process.env.NODE_ENV !== 'production')require("./mock");
第三步： 在src文件夾中創(chuàng)建 mock文件夾，然后在里面創(chuàng)建 index.js文件和respose文件夾再在里面創(chuàng)建： user.js
mock.png
- user.js中的代碼
import Mock from "..";
export const getInfo = (options) => {
// console.log(options)
// console.log("kk")
// return {
// name: "lr"
// }
// 這個(gè)就是模板
const template = {
'str|2-4':"lison"
}
return Mock.mock(template)
}
- index.js中的代碼
import Mock from "mockjs";
import { getInfo } from "./response/user"
// Mock.mock("你要攔截的url","什么方式來(lái)調(diào)用接口",執(zhí)行的方法 )
// 使用正則表達(dá)式獲得地址
// Mock.mock("/\/getPortalList/","get",getInfo )
// Mock.mock("/\/getPortalList/","get",{name:'loi',age: "12"} )
Mock.mock("url","get",getInfo )
export default Mock;
- 這樣就能在請(qǐng)求的時(shí)候，攔截要請(qǐng)求的地址了迫靖，從而使用本地的數(shù)據(jù)渲染數(shù)據(jù)了。
import Mock from "mockjs"
export const getData = () => {
// var arry = ["是","否"];
// const template = {
// // lis: ['str|2-4': "li123", '金牛座', '雙子座', '巨蟹座', '獅子座', '處女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '雙魚(yú)座'],
// 'str|2-4': "li123",
// 'regexp1': /^\d{8,10}$/,
// 'name|1': arry
// }
// return Mock.mock(template);
// mock隨機(jī)數(shù)據(jù)
const Random = Mock.Random;
let chartDatasskc = [];
var arry = ["是", "否"];
for (let i = 0; i < 10; i++) {
let newArticleObject = {
"name": Random.cname(),//隨機(jī)生成中文名字
'qq': /^\d{8,10}$/,
"mtime": Random.datetime(),//隨機(jī)生成日期時(shí)間
"stars": Random.natural(0, 5),//隨機(jī)生成1-5的數(shù)字
"add": Random.region(),
'name|1': arry
}
chartDatasskc.push(newArticleObject)
}
return Mock.mock(chartDatasskc);
