mock.js

/**
  1.安装好mockjs
 *  命令行 npm install mockjs
 *
  2.在项目中引用mockjs [ 重要 ]
 *  ##在项目src目录下新建一个mock文件夹
 *  ##mock文件夹下新建 index.js ---存放所有的http模拟返回的接口数据
 *
 3.编辑index.js
 *  添加代码导入mockjsimport 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这些模拟的资源,
 从而组件中不用做任何修改,最大减少反复工作量
 * */
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值