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(){ 76       api.JH_info('/user/index','123') 77       .then(res => { 78  console.log(res); 79         this.user = res.person; 80  }); 81  }, 82 
  }
}

這是控制台打印的數據

當然還有更多mock的數據模板你可以去嘗試