vue使用mock配置步骤

以下方法基于已经搭建好vue脚手架

• 安装mockjs
  npm install mockjs --save-dev
  在src里面新建一个mock文件夹，里面分别创建一个guan.js和index.js，
  以下两个js都要引入mock.js
  guan.js 存放所有的http模拟返回的接口数据

import Mock from 'mockjs';
export default {
    //首页数据
    home:function(){
        var ret= {"card":{'user_name':Mock.Random.cname(),'his_card_num':Mock.Random.natural(10000)}};
        return ret;
    },
    //获取用户已绑定的就诊卡
    getAllCard:function(){
        var ret = {card_list:[]};
        var is_default = 1;
        var time = parseInt((new Date()).getTime()/1000);
        for (var i=1;i<5;i++) {
            if(i == 2){
                is_default = 2;
            }else{
                is_default = 1;
            }
            ret.card_list.push(Mock.mock({
                card_id:i,
                user_name:Mock.Random.cname(),
                his_card_num:Mock.Random.natural(10000),
                user_identify_num:Mock.Random.natural(10000),
                is_default:is_default,
                create_time:time,
                user_birthday:Mock.Random.date(),
                'user_mobile':/^1[3|4|5|6|7|8|9]\d{9}$/,
                'user_sex|1':[1,2],
                user_address:Mock.Random.province(),
                user_area:'区县乡镇',
                user_area_code:'区县乡镇code'
            }));
        }
        log(ret);
        return ret;
    },
}

index.js 使用mockjs模拟数据

import Mock from 'mockjs';
import guan from './guan.js';
Mock.mock(/api\/site\/his\/home/,guan.home);
Mock.mock(/api\/site\/his\/getAllCard/,guan.getAllCard);
export default Mock;

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

//模拟数据
//import './mock'

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