浅谈vue项目用到的mock数据接口的两种方式
1.使用devServer.before进行数据mock
//通过配置devServer.before选项，设置url访问路径及response响应数据，进行mock数据。
const{data}=require('./data.json')
//引入json数据对象
//vue.config.js配置文件中进行VueCLI的配置
module.exports={
//...
devServer:{
before:function(app,server){
app.get('/api/data',function(req,res){
res.json({data:data,errno:0});
});
}
}
};
importaxiosfrom'axios'
constERRNO=0
//通过函数柯力化，接收url作为参数，以返回新的函数接收额外的参数作为axios配置项
functionget(url){
returnfunction(params){
returnaxios.get(url,{
params
}).then((res)=>{
const{errno,data}=res.data
if(errno===ERRNO){
returndata
}
}).catch((e)=>{
})
}
}
constgetData=get('api/data')
getSeller().then(res=>{
console.log(res)
})
2.使用Mock.js进行数据mock
使用Mock.mock()，根据数据模板生成模拟数据。
importMockfrom'mockjs'
importdatafrom'./bookHome'
//导入存放模拟json数据的js文件
Mock.mock(/\/api\/data/,'get',home)
//表示需要拦截的URL，可以是URL字符串或URL正则。
//表示需要拦截的Ajax请求类型。例如GET、POST、PUT、DELETE等。
//表示数据模板，可以是对象或字符串。例如{'data|1-10':[{}]}、'@EMAIL'。
/*axios获取mock数据*/
importaxiosfrom'axios'
exportfunctiongetData(){
returnaxios({
method:'get',
url:`${process.env.VUE_APP_BOOK_URL}/api/data`
//通过环境指定的默认地址设定接口url，方便后续调用
})
}
//接口方法返回promise对象，最终获取mock数据
getData().then(response=>{
if(response&&response.status===200){
constdata=response.data
console.log(data)
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。