mock官网:http://mockjs.com/
一、搭建一个练习项目
1.利用vue的项目脚手架进行搭建
命令:
vue create mock-demo
截图:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200910163838359.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70#pic_center)
2.安装相关的依赖
命令:
#使用 axios 发送 ajax
npm install axios --save
#使用 mock.js 产生随机数据
npm install mockjs --save-dev
#使用 json5 解决json 文件,无法添加注释问题
npm install json5 --save-dev
二、学习mockjs
新建mock文件夹,新建testMock.js
mock语法定义 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200910163850976.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70#pic_center)
const Mock = require('mockjs') //导入mockjs以来模块
let id = Mock.mock("@id")//得到随机的id,字符串
// console.log(id);//测试
let obj = Mock.mock({
id:'@id()', //得到随机的id
username:'@cname()',//随机生成中文名字
date:'@date()',//随机生成日期
avata:"@image('200x200','red','#fff','avatar')",//生成图片,参数:size,background,foreground,text
descrtption:"@paragraph()",//描述
ip:"@ip()",//ip地址
email:"@email()"//email
})
console.log(obj);
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200910163918703.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70#pic_center)
以上代码的随机生成位置,还需要自己去官方文档查看,谢谢!
三、在mockjs中使用json5的操作
通过上面 json5 模块的安装后,还需要相应的 vscode 插件
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200910163934517.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70#pic_center)
1.设置一个json5文件
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200910164005724.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70#pic_center)
2.设置一个js文件,通过 fs \ path 查询 之前设置的 json5 文件夹
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Kb0J1jjx-1599721543422)(C:\Users\wangyu123\AppData\Roaming\Typora\typora-user-images\image-20200910121003639.png)]
3.在mock文件夹下通过终端获取得到 “字符串形式的结构”
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200910164017886.png#pic_center)
4.在testJSON5.js文件中引入 模块 json5,然后利用json的parse() 方法进行字符串转对象的形式输出
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200910164027835.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70#pic_center)
修改前后的对比:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200910164036825.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70#pic_center)
_在vue项目中使用mock.js_通过devServer配置监听mock请求
1.在新建的vue.config.js文件中进行devServer的配置
module.exports = {
devServer: {
...,
before: require('./mock/index.js')//引入mock/index.js
},
}
2.在mock文件夹下,创建 index.js 并引入代码
const fs = require('fs') //文件名称
const path = require('path')//文件路径
const Mock = require('mockjs')//导入mock 依赖
const JSON5 = require('json5');//导入json5
// 读取json文件
function getJsonFile(filePath){
// 读取指定json文件
const json = fs.readFileSync(path.join(__dirname,'./userinfo.json5'),'utf-8')
// console.log(json);
// 解析并返回
return JSON5.parse(json)
// console.log(obj);
}
// 返回一个函数
module.exports = function(app){
// 监听http请求
app.get('/user/userinfo', function(rep,res){
// 每次响应请求时读取 mock data 的json 文件
// getJsonFile 方法定义了如何读取json 文件并解析成数据对象
var json = getJsonFile('./userinfo.json5');
// 将 json 传入 Mock.mock方法中,生成的数据返回给浏览器
res.json(Mock.mock(json));
});
}
3.在vue项目中使用mock.js_axios发送请求获取mock提供的数据
3.1 在项目文件夹的HelloWorld.vue文件夹中发送请求
代码设置为:
export default {
name: 'HelloWorld',
props: {
msg: String
},
mounted:{
axios.get('/user/userinfo')
.then(res => {
console.log(res)
})
.catch(err => {
console.log(err)
})
}
}
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200910164054371.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70#pic_center)
获取到数据为:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200910164109853.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70#pic_center)
4.在vue项目中使用mock.js_mock移除(当后台接口已写好的时候移除)
4.1 通过设置 vue cli 的环境变量进行设置
先进行环境变量的判断:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200910164120776.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70#pic_center)
在根目录设置 .env.development 文件 设置环境变量的去向值
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200910164132167.png#pic_center)
5.在vue项目中使用mock.js_mock-json5-devServer-axios职责
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200910164141485.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70#pic_center)
6.在jQuery项目中使用mock.js_mock拦截请求的原理
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200910164154276.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70#pic_center)
Document
7.在jQuery项目中使用mock.js_使用mock
Mock.mock('/user/userinfo','get',{
id:"@id()", //得到随机的id
username:"@cname()",//随机生成中文名字
date:"@date()",//随机生成日期
avata:"@image('200x200','red','#fff','avatar')",//生成图片,参数:size,background,foreground,text
descrtption:"@paragraph()",//描述
ip:"@ip()",//ip地址
email:"@email()"//email
})
6.2 发送 jQuery 的ajax 请求
$.ajax({
url:'/user/userinfo',
dataType:'json',
success:(data) => {
console.log(data);
}
})
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200910164204874.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70#pic_center)
8.在jQuery项目中使用mock.js_移除mock
8.1 : 直接注释或删除引入的mock.js文件
8.2:在编译的mockjs文件中设置判断
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200910164214978.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200910164227456.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70#pic_center) ```
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200910164349204.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70#pic_center)
8.在jQuery项目中使用mock.js_移除mock
8.1 : 直接注释或删除引入的mock.js文件
8.2:在编译的mockjs文件中设置判断
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200910164406782.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70#pic_center)
|