mockjs基本使用

2021-11-18 13:35:00 阅读：392 来源： 互联网

标签：基本 axios const name value 使用 mockjs mock

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

标签：基本,axios,const,name,value,使用,mockjs,mock
来源： https://www.cnblogs.com/Azune/p/15571887.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

mockjs基本使用

1.安装

2.引入

3.使用

4.vue使用mockjs