标签：import message 钩子 imp time 令行 post 目录 添加
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这些模拟的资源，
从而组件中不用做任何修改，最大减少反复工作量
标签：import message 钩子 imp time 令行 post 目录 添加
原文地址：https://www.cnblogs.com/mmykdbc/p/10605517.html
