场景
当前端工程师遇到前后端分离的项目，需要进行开发，但是后端接口还没有写完，那么前端如何获取数据呢？需要注意的是虽然后端没有完成接口的编写，但是要提供接口文档，否则字段对不上
解决方案：
- 前端搭建web server自己模拟假数据
- 选第三方库
mockjs来生成随机数据，拦截ajax请求
vue项目中的使用
安装依赖
命令
# 使用axios发送ajax
cnpm install axios --sava
# 使用mockjs产生数据
cnpm install mockjs --save-dev
#使用json5解决json文件，无法添加注释问题
cnpm install json5 --save-dev
使用
新建 mock 文件夹来编写mock相关文件
- 导入mock
const mock=require('mock.js')
- mock数据
//一个字段
let id=Mock.mock('@id')
//如果要mock一个对象
let obj=Mock.mock({
id:'@id'
})
引入json5库来解析json5格式
原因：如果我们想把上面的mock得到的数据放在一个单独的 .json 文件中，那么可能就会出现无法注释的问题，这个时候就需要用到 json5 库
解决方式：
将文件名改为 xxx.json5 ，此时可能没有语法高亮，我们可以使用 vscode 的插件 JSON5 syntax 来实现语法高亮
读取xxx.json5文件中的数据
test.js
//1. 引入 fs 、path 模块
const fs=require('fs')
const path=require('path')
//2.读取
var json=fsreadFileSync(path.join(__dirname,'./xxx.json5'),'utf-8')
//但是读取的是个字符串类型的
//解决方案：引入json5
const json5=require('json5')
var obj=json4.parse(json)
vue项目中使用mock
可以使用 webpack 的 devserver 服务进行拦截，在 before 中间件中进行拦截， 但是在vue中有集成webpack 的vue-cli，那么就可以直接使用vue-cli进行mock
//webpack中发送请求的方式
devServer.app.get('/some/path', function (req, res) {
res.json({ custom: 'response' });
});
vue.config.js
module.exports={
devServer:{
before:require('./mock/index.js') //引入mock/index.js处理文件
}
}
mock/index.js
//1. 引入 fs 、path 模块
const fs=require('fs')
const path=require('path')
const mock=require('mockjs') //mockjs 导入依赖模块
const json5=require('json5')
//读取json文件
function getJsonFile(filePath){
//读取指定json文件
var json=fsreadFileSync(path.join(__dirname,'filePath'),'utf-8')
//解析并返回
return json5.parse(json)
}
//返回一个函数
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))
})
}
userInfo.json5
{
id:'@id'
}
接下来进入使用环节
在组建中引入axios，在mounted生命周期中发送ajax请求
mounted(){
axios.get('/user/userinfo')
.then(res=>{
console.log(res)
})
.catch(err=>{
console.error(err)
})
}
vue项目中移除mock
解决方案：
方案一：可以使用环境变量来进行判断
.env.development
MOCK=true
mock/index.js
//返回一个函数
module.exports=function(app){
//当mock为true时开启数据返回，当为false时关闭mock功能，这个时候就返回404
if(process.env.MOCK==='true'){
//监听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))
})
}
}
在jQuery项目中使用mock.js
- 创建项目文件
jquery-mock - 新建文件
jquery-mock/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
</head>
<body>
</body>
</html>
mock/index.js
Mock.mock('/user/userInfo', 'get', {
id:"@id()"//得到随机的id，对象
})
- 在
index.html中引入
<script src="./mock/index.js"></script>
发送ajax请求
<script>
$.ajax({
url:'/user/userInfo',
dataType:'json',
success:(res)=>{
console.log(res);
}
})
</script>
在jQuery项目中移除mock.js
解决方案：
方案一：可以注释掉引入mock.js 的代码
<!-- <script src="./mock/index.js"></script> -->
方案二：通过变量进行控制
- 在
html中引入一个全局变量MOCK
<script>MOCK='true'</script>
mock/index.js
if (MOCK==='true') {
Mock.mock('/user/userInfo', 'get', {
id: "@id()"//得到随机的id，对象
})
}
