vue mock使用,mock怎么模拟数据
本文主要介绍了如何在Vue中使用mock仿真数据，这是很有价值的。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
Vue使用模拟仿真数据。Vue使用模拟数据的几种方式。一种方式：使用mockjs插件实现本地模拟数据。两种方式：将Mock数据放在public文件夹中(不使用mockjs插件)。三种方式：前端在本地启动nodejs服务。
Vue使用mock模拟数据
在开发阶段，为了提高效率，需要提前模拟减少代码冗余，灵活插拔减少通信，减少接口调试的时间。
1.编辑器安装json5扩展，(采用json5格式允许json格式的注释)
2.创建一个新的模拟文件夹/userInfo.json5文件模拟数据
3.在mock文件夹下，创建一个新的index.js来引入刚才mock的数据。
const fs=require( fs )；
const path=require( path )；
const Mock=require( Mock js )；//mockjs导入依赖模块
const JSON 5=require( JSON 5 )；
//读取json文件
函数getJsonFile(文件路径){
//读取指定的json文件
设JSON=fs . read file sync(path . resolve(_ _ dirname，filePath)， utf-8 )；
//解析并返回
返回JSON 5 . parse(JSON)；
}
//返回函数
module.exports=function(app){
//侦听http请求
app.get(/user/userinfo ，function (rep，res) {
//每次响应请求时，读取模拟数据的json文件
//getJsonFile方法定义如何读取json文件并将其解析为数据对象。
let json=getJsonFile(。/userinfo . JSON 5’)；//模拟数据
//将json传入Mock.mock方法，生成的数据返回给浏览器。
RES . JSON(mock . mock(JSON))；
});
App.post (/.mock ，(req，res)={
Let=getjsonfile(。/.mock的json5数据’)；
})
}
4.在4.vue.config.js中添加配置
模块.导出={
devServer: {
之前：要求(。/mock/index.js )//引入mock/index . js。
}
}
5.在VUE文件下发送ajax请求测试数据
从“axios”导入axios
导出默认值{
已安装(){
axios.get(/user/userinfo )。然后(res={
console.log(res)
})。catch(错误={
console.error(错误)；
})
}
}
5.扩展：移除模拟
在。环境开发文件
模拟=假
改进mock\index.js
module.exports=function(app){
if(process.env.MOCK==true){
//侦听http请求
app.get(/user/userinfo ，function (rep，res) {
//每次响应请求时，读取模拟数据的json文件
//getJsonFile方法定义如何读取json文件并将其解析为数据对象。
let json=getJsonFile(。/userinfo . JSON 5’)；
//将json传入Mock.mock方法，生成的数据返回给浏览器。
RES . JSON(mock . mock(JSON))；
});
}
}
Vue使用mock数据的几种方式
下面解释基于vuecli3.0创建的项目。
先说一下vue/cli 3.0和2.0的一些区别：
3.0删除了静态文件目录，添加了公共目录。这个目录下的静态资源不会被webpack处理，而是直接复制，所以我们可以直接访问这个目录下的资源。静态数据(如json数据、图片等。)需要存放在这里。3.0 config、build和其他配置目录已被删除。如果需要相关配置，我们需要在根目录下创建vue.config.js进行配置。
方式一：借助mockjs插件实现本地mock数据
1.安装插件：NPM I mock js-d；
2.在src目录下创建一个mock文件夹，在mock文件夹下创建一个index.js和json文件夹(用于存储项目需要的仿真数据)，如下图所示：
3.3.mock目录中的index.js示例如下：
const Mock=require( Mock js )；
//格式：Mock.mock( url，post/get，返回数据)；
Mock.mock(/index/foodlist ， get ，require(。/JSON/food list . JSON ))；
Mock.mock(/index/foodlist2 ， post ，require(。/JSON/food list 2 . JSON ))；
4.json文件夹下的JSON数据示例如下：
{
代码:200，
列表:[
{
img src : https://Tim GSA . Baidu . com/timg？C2880.jpg？模式=下载，
名称:旧车道1 ，
条款:送货15元免运费
},
{
img src : https://Tim GSA . Baidu . com/timg？2C2880.jpg？模式=下载，
名称:老巷2 ，
条款:送货15元免运费
}
]
}
5.将模拟数据引入main.js导入文件，并在不需要时将其注释掉。
从“Vue”导入Vue；
从导入应用程序。/App ；
从导入路由器。/router ；
要求(。/mock’)；//引入模拟数据，并在关闭时注释该行。
vue . config . production tip=false；
新Vue({
埃尔： #app ，
路由器，
组件：{ App }，
模板：“应用程序/”
});
6.最后，在vue模板中使用。
axios.get(/user/userInfo )。然后(函数(res){
console . log(RES)；
})。catch(函数(错误){
console . log(err)；
});
方式二：在public文件夹放mock数据（无需使用mockjs插件）
1.在public文件夹下创建一个mock文件夹，在mock文件夹下创建项目所需的json文件。目录结构如下：
2.按如下方式配置vue.config.js中的路径：
3.最后，在vue模板中使用。
//模拟对本地模拟数据的请求(不基于插件)
这个。$http.get(/api/foods.json )。然后(函数(res){
let list=RES . data . list；
console.log(列表)；
that . business list=RES . data . list；
})
注意：不过这个方法好像只能用get请求方法，不支持post等其他方法。细节有待进一步研究。
方式三：前端本地启动一个nodejs服务
vue项目向nodejs服务请求mock数据
1.创建一个节点项目(为了方便，这个例子直接在vue项目的根目录下创建，但是也可以在其他任何地方)
2.2.serve.js的示例如下：
const http=require( http )；
//URL模块用于处理和解析从前端传递到后台的URL，适用于get请求(不适用于post请求)。有关详细信息，请参见文档。
const URL lib=require( URL )；
http.createServer(function(req，res){
let urlObj=urlLib.parse(req.url，true)；//注意：这里的第二个参数必须设置为：true，这样才能将true，query解析成对象形式，更方便的获取key:value。
let url=urlObj.pathname
let get=URL obj . query；
console . log(URL)；
//模拟的模拟数据
let data={
代码:200，
列表:[
{
img src : https://ss 0 . BD static . com/70 cfu HSH _ Q1 ynxgkpowk 1 HF 6 hy/it/u=1126716551，3134048915fm=26gp=0.jpg ，
名称:旧车道1 ，
条款:送货15元免运费
},
{
img src : https://Tim GSA . Baidu . com/timg？image quality=80 size=b 9999 _ 10000 sec=1582134004436 di=eee 2d 024 a 136 e 950 da a694 f 56 ea 78 a2 dimg type=0 src=http://bpic . 588 ku . com/element _ origin _ min _ pic/16/12/05/56 db 465 e 153 a5d 808 b 54501846 e 88 DCA . JPA
名称:老巷2 ，
条款:送货15元免运费
}
]
}
//console . log(get . user)；
If(url===/food) {//食物列表界面
RES . write(JSON . stringify(data))；
}
RES . end()；
}).听(9000)；
启动节点服务：节点服务
3.配置vue.config.js的代理，解决跨域问题。
注意：这里配置的端口号不能和节点的端口相同，否则会报告端口号被占用。
3.最后，在vue模板中使用。
//模拟请求本地节点服务
这个。$http.get(/api/food )。然后(函数(res){
let list=RES . data . list；
console.log(列表)；
that . business list=RES . data . list；
})
总结：以上介绍了使用mock数据的三种方式，方便前端开发在本地开发环境下开发项目，使前端和后端分离，加快开发效率。个人建议第一种方式(使用方便灵活)。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。