vue-cli+mock.js+axios模拟前后台数据交互

最近工作不是很忙，自己做了一个vue的移动端的小项目，涉及到后台数据的时候，网上查阅了一些资料，因为是自己写的项目没有后台只能自己模拟数据，刚开始就自己写了一些静态数据后来觉得尽量模拟真实的比较好些，刚好也了解一下axios因为之前用的是vue-resource，就此开始挖坑填坑之路-------

首先说一下mock.js  http://mockjs.com/这是它的官网，讲的还是很详细，主要有各种数据模板可以去定义，废话不多说，下面开始正文

1、安装mock

npm install mockjs --save-dev

2、安装axios

npm install axios --save

3、我们来看一下项目结构

mock.js

 const Mock = require('mockjs');
 // 获取 mock.Random 对象
 const Random = Mock.Random;
 // mock一组数据
 const userInfoData = function() {
         let person = [
             {
                 label:'姓名',
                 text:Random.cname(),//随机生成中文名
             },
             {
                 label:'身份证号',
                 text:Random.id()//随机生成身份证
             },
             {
                 label:'手机号',
                 text:/^[1][3,4,5,7,8][0-9]{9}$/ //正则生成手机号
             },
             {
                 label:'地址',
                 text:Random.county(true) //随机生成地址
             },
             {
                 label:'返佣银行卡号',
                 text:/^([1-9]{1})(\d{14}|\d{18})$/
             },
             {
                 label:'开户行',
                 text:Random.cword(2,4)+'银行'
             },
         ]
     return {
         person: person
     }
 }

 // Mock.mock( url, post/get , 返回的数据)；
 Mock.mock('/user/index', 'post', userInfoData());

 Mock.mock('user/ma','post',{
     phone:/^[1][3,4,5,7,8][0-9]{9}$/,
     photo:Random.dataImage('118x118', '居间协议')
 });

 Mock.mock('user/login','post',{
     userId:'@natural(0,100)'
 })

 Mock.setup({
     timeout:0-300
 })

这个就是mock.js里面的数据，你可以在里面定义各种数据模板，然后当然还需要模拟的api这个就是在axios/api.js里面统一管理进行拦截ajax请求

axios/api.js如下

 import axios from 'axios'
 import vue from 'vue'

 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

 // 请求拦截器
 axios.interceptors.request.use(function(config) {
     return config;
   }, function(error) {
     return Promise.reject(error);
   })
   // 响应拦截器
 axios.interceptors.response.use(function(response) {
   return response;
 }, function(error) {
   return Promise.reject(error);
 })

 // 封装axios的post请求
 export function fetch(url, params) {
   return new Promise((resolve, reject) => {
     axios.post(url, params)
       .then(response => {
         resolve(response.data);
       })
       .catch((error) => {
         reject(error);
       })
   })
 }

 export default {
   JH_info(url, params) {
     return fetch(url, params);
   }
 }

这里就自己看，不用多说了，最后用export default去暴露接口进行引用

接下来就是怎么在自己页面调用mock数据

上代码

 import api from '../../axios/api.js'   //引入api
 export default {

   data(){
     return {
       proStatue:'等待上传居间协议',
       proPhoto:require('../../assets/img/logo.png'),
       upload:'ok',
       imageUrl:'',
       user:[
        {
         label:'姓名',
         text:'小花'
        },
        {
         label:'身份证号',
         text:'467829299277718369'
        },
        {
         label:'手机号',
         text:'136890288802'
        },
        {
         label:'开启时间',
         text:'2018-05-01'
        },
        {
         label:'来源',
         text:'都某人'
        },
        {
         label:'权益',
         text:1000.00
        },
        {
         label:'手续费',
         text:1000.00
        },

       ],
     }
   },
   created(){
44     this.setUserApi();//调用了定义的请求方法
45     api.JH_info('user/ma','123')//直接页面创建的时候请求接口
46     .then(res=>{
47       console.log('img',res);
48       this.imageUrl = res.photo;
49     })
50   },
   methods:{
     // 图片上传
      handleAvatarSuccess(res, file) {
       console.log('file',file);
         this.imageUrl = URL.createObjectURL(file.raw);
       },
       beforeAvatarUpload(file) {
         const isJPG = file.type === 'image/jpeg';
         const isLt2M = file.size / 1024 / 1024 < 2;

         if (!isJPG) {
           this.$message.error('上传头像图片只能是 JPG 格式!');
         }
         if (!isLt2M) {
           this.$message.error('上传头像图片大小不能超过 2MB!');
         }
         return isJPG && isLt2M;
       },
        //提交审核
       checkInfo(){
         this.upload = 'true';
         this.proStatue = '等待审核';
       },

       setUserApi(){
       api.JH_info('/user/index','123')
       .then(res => {
         console.log(res);
         this.user = res.person;
       });
     },

   }
 }

这是控制台打印的数据

当然还有更多mock的数据模板你可以去尝试