vue 使用mock,vue mock.js教程
本文主要介绍了vue中mockjs的配置和使用方法，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
mockjs配置和使用要求步骤mock的使用和无创解决方案mock是什么？为什么使用mock？如何使用mock？模拟无创配置
mockjs配置和使用方式
需求
在前端分离的开发中，前端和后端都需要同时开发。但是，在后端完成之前，暂时不会有数据返回前端使用。如果先写静态再改，会有反复工作的内耗。
所以我们需要一个简单快速的模块来模拟数据。本文选择了mockjs。
步骤
1.安装mockjs
npm安装模拟
2.在项目的src文件夹下构建一个mock文件夹，在mock文件夹下构建index.js(存储http模拟返回的所有接口数据)；我写了下面两个接口：
从“mockjs”导入Mock
const vehicle=Mock.mock(
/api/car ， post ，(req，res)={
返回{
代码：200，
数据：[{
id: 1，
名称：比亚迪，
}, {
id: 1，
姓名：宝骏，
}],
消息：“查询成功”
}
})
const user=Mock.mock(
/api/user ， get ，(req，res)={
返回{
代码：200，
数据：{
id: 1，
性别：1，
年龄：25，
创建时间： 2017-04-01
},
消息：“查询成功”
}
})
导出默认值{
车辆，
用户
}
3.为了方便在所有组件中使用mock仿真数据，在项目的main.js中导入新编辑的接口数据。
从“”导入模拟数据。/mock ；//这样就可以在组件中自由调用接口了。
4.调用组件中的虚拟接口。
只需调用生命周期钩子函数中的接口：我用的是axios，前提是项目已经安装了axios (npm先安装axios，然后npm安装-保存axios vue-axios)，一个按钮执行click事件。下面的方法调整接口。
Button @click=search()单击查询/按钮
方法：{
search() {
这个。$http.get(/api/user )。然后(res={
console . log(RES)；
});
这个。$http.post(/api/car )。然后(res={
console . log(RES)；
});
}
},
5.注意：项目接口调试完成后，需要删除main.js和mock/index.js模拟资源中对mock的引用，这样就不需要在组件中做任何修改，最大限度减少重复工作量。
mock使用及mock无侵入的解决
什么是mock？
看了官网的介绍，对于前端来说，“前端分离”大大提高了前端开发的效率。
讨论完需求、接口、数据格式，前端可以直接使用mock模拟后台返回的数据进行代码开发。
为什么要用到mock？
我在下面画一个流程图，帮助你理解项目中mock的处理逻辑。
可以看出，前端可以使用mock服务来模拟请求的后台数据。只要接口文档出来，它就可以根据接口文档的api和数据格式，自行模拟假数据。
如何使用mock？
这里介绍一下vue-cli2.x脚手架的使用。
1.安装mockjs NPM安装-保存-开发mockjs或NPM安装-D mockjs。
2.在根src中添加一个模拟文件夹，如下图所示，并创建
其中index.js的内容为：
从“mockjs”导入模拟
从“”导入{ Service }。/数据/服务
mock . mock(/\/Service \/Service list/， get ，Service)
Console.log(%c前端模拟环境已成功启动， color:# 38f；font-weight: bold )
导出默认模拟
数据文件夹中的Service.js是模拟仿真返回的数据，其内容为：
从“mockjs”导入Mock
const Service=[]；
for(设I=0；i5；i ) {
Service.push(Mock.mock({
id:模拟。Random.guid()，
serviceName: `${Mock。Random.protocol()} - ${Mock。Random.id()} `，
端口8000-9000: 1，
ip:嘲笑。Random.ip()，
状态：嘲笑。Random.pick([通过，关键，关键，空])，
节点0-2: 1
}));
}
导出默认服务；
3.介绍main.js中定义的模拟文件夹
从导入模拟。/模拟
此时打开终端控制面板，运行npm run dev后，打开开发者调试工具的控制台，就可以看到了。
4.接下来，所有发送的http请求都将被mock拦截。如果匹配mock中设置的url路径，/Service/ServiceList将返回service.js的模拟数据如下(在的文件中。vue)
脚本
从“axios”导入axios；
导出默认值{
data() {
返回{
};
},
方法：{
getServer() {
爱可信。get(/Service/ServiceList )。然后((res)={
console . log(RES)；
})。catch((错误)={
console.log(错误)；
});
}
},
};
/脚本
如上面的截图所示，可以看到发送到url的请求已经被拦截并返回给一个对象。您可以定义一个空数组来保存res.data的数据，并将其呈现在页面上。
5.如果发送http请求的url与mock中的定义不匹配或不存在，就会弹出一个错误。
注意:记住mock会拦截所有http请求，包括你要请求的真实API，也会拦截，提示404报错；此时，注释掉从导入的import Mock。main.js中的“/mock”
然而，“懒”的动机让我们思考，怎么能“践踏”嘲弄为听话呢？
mock无侵入式配置
然后，我们要思考如何将mock从项目代码中分离出来，既能保证前后开发的分离，又能在不改变代码的情况下任意切换环境。
大家应该知道，在用vue-cli构建的项目框架中，会有直接配置的npm运行dev和npm运行构建环境；
想到这一步，你也要有一个思路，就是配置另一个dev环境，重命名为mock，然后直接通过npm run mock和npm run dev随意切换代码运行环境。
如何实现？仔细听我说(以vue@2.5.2版本为例)
1.用vue-cli构建项目框架，打开package.json文件，添加运行脚本。
mock : web pack-dev-server-inline-progress-config build/web pack . mock . conf . js
如下所示：
脚本:{
dev : web pack-dev-server-inline-progress-config build/web pack . dev . conf . js ，
mock : web pack-dev-server-online-progress-config build/web pack . mock . conf . js ，//-此脚本是要配置的参数。注意注释不能写在json文件里，不要抄袭这句话。
开始: npm运行开发，
lint: eslint - ext。js，vue src ，
build :节点build/build.js
},
2.在根目录下的build文件夹中创建webpack.mock.conf.js文件，复制webpack.dev.conf.js文件的所有内容。
3.在webpack.mock.conf.js中添加配置，如下所示
let entry=basewebpackconfig . entry
Object.keys(条目)。forEach(函数(名称){
条目[名称]=[。/src/mock]。concat(entry[name])//-在运行npm时打包并编译entry中的模拟文件run mock。
})
保存后，打开终端运行npm run mock。
如果后期需要与后台调试对接，可以通过直接运行npm run dev进行切换，这样可以保证mock从业务代码中被拉出来。
注意：在webpack中配置条目后。Mock.config.js，不需要在main.js中引入Mock
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。