mockjs基本使用

1.安裝

npm install mockjs -D

2.引入

const Mock = require('mockjs')

3.使用

數據模板定義規范

屬性名+生成規則+屬性值

'name|rule':value;

'password|6-12':'*';
'name|10':'我'
'age|18-55':20
生成password，value值為隨機6-12位*
生成name，value值為十個‘我’拼接字符串
生成age，value值為18-55直接的隨機數

數據占位符定義規范

占位符只會起到占位的作用，不會出現value值中 

生成一個隨機對象

const obj = Mock.mock({
	id:'@id()',
	name:'@cname(2,3)',
	avater:"@image('150*150','#f66','mock.js')",
	date:'@date(yyyy-mm-dd)',
	address:'@city(true)',
	email:'#email()',
	phone:/^1[0-9]{10}$/
})

4.vue使用mockjs

1.定義服務端的接口路由，接口中返回mockjs的模擬數據

2.在vue devServer中進行配置，允許跨域

3.使用axios發起請求

mock/index.js

const Mock = require('mockjs');

const API = (app)=>{
	app.get('/api/userInfo',(req,res)=>{
		const data = Mock.mock({
                id:'@id()',
                name:'@cname(2,3)',
                avater:"@image('150*150','#f66','mock.js')",
                date:'@date(yyyy-mm-dd)',
                address:'@city(true)',
                email:'#email()',
                phone:/^1[0-9]{10}$/
            })
		res.json(data);
	})
}

vue.config.js

module.exports = {
	devServer:{
		// 攔截器
		bafore:require('./mock')
	}
}

test.vue 

import axios from "axios";

create(){
	axios.get('/api/userInfo').then(res =>{
		console.log(res)
	})
}

4.mock開關

.env.development

MOCK = false;

// 定義全局環境變量

通過process.env.MOCK 獲取值 添加判斷