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 获取值 添加判断