需求：完全不用服务器，可以实现跟连上服务器一样的效果，不改动接口，只书写数据
场景：我需要实现一个功能，之前项目是和后台接口直接对接的，我现在不是在家办公嘛，然后我就想脱离后台，在本地弄一个那个模拟数据，可以拦截get，post请求
百度搜了很多的资料，比较了之后，选择了mockjs，我认为它可以解决我的大部分问题
这文章简直说到了我的痛点，且看
什么是mockjs
生成随机数据，拦截 Ajax 请求。
通过随机数据，模拟各种场景；不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据；支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等；支持支持扩展更多数据类型，支持自定义函数和正则。
优点
非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型
mockjs在本地即可以实现基本的图片，文字展示，拦截get，post请求并把本地数据渲染到页面
不足 我至今没查到这个如何把本地的图片，或者视频导进来
解决mock和后端接口的切换问题和生产环境、开发环境配置的问题
1下载mockjs: n
pm i mockjs --save
2main.js
// 开发环境 因为只在开发环境使用.if里面不能用import方式导入 当项目启动后,mock会拦截他规则内的http请求
if (process.env.NODE_ENV === 'development') {
require('./mock/mock.js')
}
3src下新建 mock/mock.js文件,编辑mock.js文件,大概逻辑文件如下
vue项目中mock.js的使用及基本用法 mockjs模拟新闻数据
在刚才的基础上
mock.js
// import mock from 'mockjs'
// mock.js
// 引入mockjs
const Mock = require('mockjs')
// 获取 mock.Random 对象
const Random = Mock.Random
// mock新闻数据，包括新闻标题title、内容content、创建时间createdTime
const produceNewsData = function () {
let newsList = []
for (let i = 0; i < 20; i++) {
let newNewsObject = {
title: Random.ctitle(), // Random.ctitle( min, max ) 随机产生一个中文标题，长度默认在3-7之间
content: Random.cparagraph(), // Random.cparagraph(min, max) 随机生成一个中文段落，段落里的句子个数默认3-7个
createdTime: Random.date() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；
}
newsList.push(newNewsObject)
}
return newsList
}
// 请求该url，就可以返回newsList
Mock.mock('/mock/news', produceNewsData) // 后面讲这个api的使用细节
app.vue
// 挂载的时候获取新闻列表
mounted() {
this.axios.get('/mock/news').then(res => {
// url即在mock.js中定义的
console.log(res.data) // 打印一下响应数据
})
},
运行效果:
商品有关
const Mock = require("mockjs");
let data = Mock.mock({
"data|100": [ //生成100条数据 数组
{
"shopId|+1": 1,//生成商品id，自增1
"shopMsg": "@ctitle(10)", //生成商品信息，长度为10个汉字
"shopName": "@cname",//生成商品名 ， 都是中国人的名字
"shopTel": /^1(5|3|7|8)[0-9]{9}$/,//生成随机电话号
"shopAddress": "@county(true)", //随机生成地址
"shopStar|1-5": "", //随机生成1-5个星星
"salesVolume|30-1000": 30, //随机生成商品价格 在30-1000之间
"shopLogo": "@Image(‘100x40‘,‘#c33‘, ‘#ffffff‘,‘小北鼻‘)", //生成随机图片，大小/背景色/字体颜色/文字信息
"food|7": [ //每个商品中再随机生成七个food
{
"foodName": "@cname", //food的名字
"foodPic": "@Image(‘100x40‘,‘#c33‘, ‘#ffffff‘,‘小可爱‘)",//生成随机图片，大小/背景色/字体颜色/文字信息
"foodPrice|1-100": 20,//生成1-100的随机数
"aname|14": [
{
"aname": "@cname",
"aprice|30-60": 20
}
]
}
]
}
]
})
Mock.mock(/goods\/goodAll/, ‘post‘, () => {
//三个参数。第一个路径，第二个请求方式post/get，第三个回调，返回值
return data
})
2.25
这里最重要的是仿照这个写一个和如下图接口类似的数据
// 商品
let shopdata = Mock.mock({
'status': 200,
'msg': '',
'data|20': [ // 生成20条数据 数组
{
'id|+1': 1, // 生成商品id，自增1
'name': '@cname', // 生成商品名 ， 都是中国人的名字
'price|30-1000': 30, // 随机生成商品价格 在30-1000之间
'description': '@ctitle(10)', // 生成商品信息，长度为10个汉字
'type|1': [ '文创', '航鲜', '旅游' ],
'thumbUrls': [ '@Image(‘40x40‘,‘#c33‘)', '@Image(‘40x40‘,‘#c33‘)', '@Image(‘40x40‘,‘#c33‘)', '@Image(‘40x40‘,‘#c33‘)' ],
'isfree|1': [0, 1] // 0收费 1免费
}
]
})
// 三个参数。第一个路径，第二个请求方式post/get，第三个回调，返回值
Mock.mock('/api/news/list', 'get', () => {
return shopdata })
任意.vue文件
// 挂载的时候获取新闻列表
mounted() {
this.axios.get('/api/item/list').then(res => {
// url即在mock.js中定义的
console.log(res.data) // 打印一下响应数据
})
},
输出结果
mockjs语法学习
数组随机三选一
Mock.mock({
"array|1": [
"AMD",
"CMD",
"UMD"
]
})
打印
{
"array": "CMD"
}
希望把这个数据更新到页面显示出来
出现的问题：上面的mounted可以打印出来数据，底下的这个不可以
早上写了一下游戏的模拟数据，本想把游戏和视频的模拟数据写好了显示到页面
然后就一直报错
我认为这个错可能和props传值有关，因为获取不到数据所以报错了。所以我放弃这个转战去显示shop的数据，因为这个页面还没怎么写完所以比较好改动
然后我就尝试了一下把接口写进了created里面
结果：
看来我猜的没错，是因为mockjs不识别传过去的参数，就没拦截
遇到的问题
使用 Mock.mock(’/api/item/list’, ‘get’, () => { return shopdata }) 的时候，它只会拦截url等于/api/item/list 的请求，而对于带参数的请求，如/api/item/list?type=文创，因为不等于/api/item/list 就拦截不到。
2.28
那就解决一下Mockjs如何拦截带参数的GET请求的问题
Mock.mock
Mock.mock( rurl, rtype, function( options ) )
记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
rurl
可选。
表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 /\/domain\/list\.json/、'/domian/list.json'。
rtype
可选。
表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
template
可选。
表示数据模板，可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。
function(options)
可选。
表示用于生成响应数据的函数。
options
指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性
由此可知
在mockjs中Mock.mock()的方法会接受三个参数第一个参数是所拦截的接口，第二个参数是所拦截的的请求方式，第三个参数是一个回调函数回调函数的传参是本次请求的选项集
需要拦截的 URL，可以是 URL 字符串或 URL 正则
Mock.mock(RegExp(url + ".*"), "get", mockData);
然后我试了一下，发现这个实现不了
Mock.mock(RegExp('/api/item/list' + '.*'), 'get', () => {
return shopdata })
换种方法
Mock.mock(/\/api\/item\/list[\s\S]*?/, 'get', () => {
return shopdata })
有内容出来了，说明起作用了
现在的问题就是，图片怎么出不来
我怀疑是因为这个字母写错了，不应该大写的
最后发现是少了图片的那个字段没写
看，出来了
2.29
尚未解决WebSocket连接发生错误的问题
3.5
原来： this.loginForm.tel.length !== 11
改
this.loginForm && this.loginForm.tel && this.loginForm.tel.length !== 11
原来userInfo !== undefined && userInfo.length > 10
改
userInfo && userInfo.length > 10
到这里mockjs模拟的数据就暂时告一段落了，遗留的问题：
还需要找到一些视频，电子书，音乐，游戏的资源等http直接可访问链接
参考文档:
vue项目使用.env文件配置全局环境变量
vue-cli3 配置开发与测试环境详解
如何在Vue项目中使用Mockjs，模拟接口返回的数据，实现前后端分离独立开发
vue中控制mock在开发环境使用，在生产环境禁用