vue使用mockjs配置步骤(无需启动node服务)

Posted 2021-11-10 mmykdbc

1.安装好mockjs
命令行 

npm install mockjs

2.在项目中引用mockjs [ 重要 ]
 ##在项目src目录下新建一个mock文件夹
 ##在mock文件夹下新建 index.js ---存放所有的http模拟返回的接口数据

 

3.编辑index.js
 添加代码导入mockjs：

import Mock from ‘mockjs‘;

* 添加接口数据代码：
*************************index.js******************************

import Mock from ‘mockjs‘;
const vehicle = Mock.mock(
‘/api/vehicle‘,‘post‘, (req, res) =>{
return {
code:200,
data:[{
id:1,
licNumber:‘陕A79898‘,
color:1,
buyTime:‘2017-04-01‘

},{
id:1,
licNumber:‘陕A79898‘,
color:1,
buyTime:‘2017-04-01‘

}],
message:‘查询成功‘
}
} )
const user = Mock.mock(
‘/api/user‘,‘get‘, (req, res) =>{
return {
code:200,
data:{
id:1,
sex:1,
age:25,
createTime:‘2017-04-01‘
},
message:‘查询成功‘
}
} )

export default { vehicle,user }

　

***************************end***********************************
4.为了方便在所有组件中使用mock模拟数据
在i项目 main.js中导入刚编辑的接口数据

import mockdata from "./mock"; //这样的话组件里就可以随意调用接口了

5.在组件中调用虚拟接口
在生命周期钩子函数中调用接口即可：可以使用axios 或者 vue-resourse

created(){
this.$http.get(‘/api/vehicle‘,null,r=>{ console.log( r ) },r=>{}) //此http请求请自行封装
this.$http.post(‘/api/user‘,null,r=>{ console.log( r ) },r=>{}) //此http请求请自行封装
}

6.注在项目接口调试完成后需要删除main.js中对于mock的引用以及mock/index.js这些模拟的资源，
从而组件中不用做任何修改，最大减少反复工作量