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的数据模板你可以去尝试