Vue 的 mock.js初体验
1.什么是Mock.js?
生成随机数据，拦截 Ajax 请求。
通过随机数据，模拟各种场景；不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据；支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等；支持支持扩展更多数据类型，支持自定义函数和正则。
优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型.
2.安装
npm install mockjs --save-dev
3.安装好之后新建一个mock文件用于引入文件
import Mock from 'mockjs'
4.然后在main.js 导入mock文件
// 引入mock
import './mock/index.js'
5.mock语法
01 .生成指定次数的文本 长度字符串
const data = Mock.mock ({
"string":"hello world"
})
02 生成指定范围的长度字符串
const data = Mock.mock ({
"string|1-6":"hello world" //生成1-6随机次数的 hello world
})
02 生成文本
生成随机的字符串
const data = Mock.mock ({
"string":"@cword()" // 括号中可以设置文字的数量以及文字数量的区间
})
03 生成指定范围的标题和句子
const data = Mock.mock({
title: "@ctitle(5,8)",
sentence: '@csentence(50,100)'
})
04 随机生成段落
const data = Mock.mock({
content: '@cparagraph()'
})
05 生成范围数字
const data = Mock.mock({
"number|1-999": 1
})
06 生成增量id
const data = Mock.mock({
id: '@increment()'
})
07 随机生成姓名-地址-身份证号
const data = Mock.mock({
name: '@cname()',
idCard: '@id()',
address: '@city(true)' // 如果@city(),只会生成市，如果@city(true)会生成省和市
})
08 随机生成图片 生成图片参数1：图片可选大小 参数2：图片背景色 参数3：图片前景色
参数4：图片格式 参数5：图片文字
const data = Mock.mock({
image: "@image('300x300', '#50B347', '#FFF', 'Mock.js')"
})
10 生成时间 @Date --- 生成指定格式时间：@date(yyyy-MM-dd hh:mm:ss
const time = Mock.mock({
time1: '@date()', // 只有年月日
time2: '@date(yyyy-MM-dd hh:mm:ss)'
})
11.定数组返回的条数 -- 指定长度：'data|5' 指定范围：'data|5-10'
const data = Mock.mock({
'list|50-99':[
{
name: '@cname()',
address: '@city(true)',
id: '@increment(1)' // 每次都增加1
}
]
})
mock拦截请求
在项目中安装axios --- npm install axios
在 main.js 文件引入 ------ import axios from 'axios'
在mock文件夹的index.js文件中写mock语法
定义不携带参数的get请求
Mock.mock('/api/get/user','get',()=>{
return {
status: 200,
message: '获取新闻列表数据成功'
}
})
在目标组件中
export default {
created() {
axios.get('/api/get/user')
.then(function (response) {
console.log(response);
})
}
}
