vue+mock,vue中使用mockjs
本文主要介绍了如何在vue项目中使用mock，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
第一步：第二步，在request.js中进行相关配置，request.js的代码如下：第三步，在mock.js中进行相关配置，mock.js的代码如下：第四步，需要将mock.js引入main.js第五步，在页面中使用summary。
Mock.js是一个模拟数据生成器，旨在帮助前端攻城工程师独立于后端开发，帮助编写单元测试。提供以下模拟功能：
根据数据模板生成仿真数据
模拟Ajax请求，生成并返回模拟数据。
基于HTML模板生成仿真数据
第一步：
m安装mockjs//安装mock js
npm安装axios
第二步，在request.js中进行相关配置，request.js代码如下：
从“axios”导入axios
//axios . defaults . headers . post[ Content-Type ]= application/x-www-urlencoded
const http=axios.create()
http.defaults.timeout=3000
http . interceptors . request . use(config={//请求拦截器配置//不要配置它。
//做某事
返回配置
}，错误={
console.log(错误)
退货承诺.拒绝(错误)
})
http . interceptors . response . use(response={//响应拦截器配置//不要配置。
//做点什么
返回响应
}，错误={
console.log(错误)
退货承诺.拒绝(错误)
})
函数fetch (URL，params){//封装axios的post请求。
返回新的承诺((resolve，reject)={//承诺使用情况，自己查看。
axios.post(url，params)。然后(response={
resolve(response . data)//承诺相关
}).catch(错误={
拒绝(错误)//承诺相关
})
})
}
Export default {//公开htto_mock方法，这是在以下页面中使用的方法。
http_mock(url，params) {
返回提取(url，参数)
}
}
第三步，在mock.js中进行相关配置，mock.js代码如下：
从“mockjs”导入模拟
const Random=模拟。随意
var listData=function() {
let _data={
状态：200，
消息：“成功”，
数据：{
总计：100，
行10: [{
id:“@ guid”，
姓名： @cname ，
年龄20-30: 23，
作业1: [前端工程师，后端工程师， UI工程师，需求工程师]
}]
}
}
返回{ _data }
}
//url请求要拦截的请求地址和请求方法的数据(规则)(这里api会被mockjs拦截)
mock . mock( http://route . showapi . com/60-27 ， post ，listData())
第四步，在main.js中需引入mock.js即可
从“@/http/mock”导入模拟
第五步，在页面中使用
从 @/http/request 导入请求
导出默认值{
名称：“首页”，
已创建(){
this.getData()
},
方法：{
getData() {
//假装使用http_mock发送请求(mock自动拦截请求并生成数据)
//这里的第一个参数需要和Mock.mock()中的第一个参数一致
Console.log(请求启动)
request . http _ mock( http://route . showapi . com/60-27 ， api_id=63114api_sign=3847b0 )。然后(response={
console.log(响应。_data)
})
},
}
}
效果如下：
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。