vue+vux-ui+axios+mock搭建一個簡單vue框架

1.首先感謝同事

2.之前一直在做angularjs的項目，目前vue火熱，所以自己搭建了一個的vue框架，在此作為記錄

 

vue+vux-ui這里就不介紹了，有很多博客都寫的很詳細了。

下面簡單記錄下axios 和 mock

1.axios

<1>  安裝axios

npm install axios

 

<2>  使用axios

   1.因為有時候項目需要稍微封裝一下axios，所以我這里並沒有直接像官網那里在入口main.js直接引入axios

   2.按照官網的要求，我在src目錄下新建了一個文件axios，然后新建了兩個js文件

         1.axios.post.form.js

         2.axios.post.json.js

　這里記錄第個axios.post.form.js文件：

        1.首先引入axios

import axios from 'axios'

 

  2.自定義配置新建一個 axios 實例
　　

const axiosPostForm = axios.create({
       baseURL: "", // api的base_url
       timeout: 5000, // request timeout
       headers: {
        'Content-Type': 'application/json'
       }
   })

　　

  3.創建請求過濾器

　axiosPostForm.interceptors.request.use(
    config => {
        //根據實際項目修改攔截器
        console.log(config);
        config.data = config.data||{}
        return config;
    },
    error =>{
        return Promise.reject(error);
    });

   4.創建響應過濾器

axiosPostForm.interceptors.response.use(
    response => {
        console.log(response);
        return response.data
    },
    error => {
        return Promise.reject(error);
    })

　　

    5.返回封裝之后的axiosPostForm　　

export default axiosPostForm

　　

    下面是完整的這個JS文件

　　

import axios from 'axios'

const axiosPostForm = axios.create({
    baseURL: "", // api的base_url
    timeout: 5000, // request timeout
    headers: {
        'Content-Type': 'application/json'
    }
})

axiosPostForm.interceptors.request.use(
    config => {
        //根據實際項目修改攔截器
        console.log(config);
        config.data = config.data||{}
        return config;
    },
    error =>{
        return Promise.reject(error);
    });

axiosPostForm.interceptors.response.use(
    response => {
        console.log(response);
        return response.data
    },
    error => {
        return Promise.reject(error);
    })
export default axiosPostForm

　　

<3> 接下來需要在入口main.js中引入該封裝之后的axiosPostForm，以便全局使用

//引入axios

import axiosPostForm from './axios/axios.post.form'

　

//在vue的原型鏈上增加axiosPostForm

Vue.prototype.$axiosPostForm =  axiosPostForm;

　　<4>在你的應用組建就可以直接使用封裝之后的$axiosPostForm了,一下代碼：

    

 this.$axiosPostForm({

     method: 'post',
     url:"/userInfo",   //這里是你的后端地址，如果沒有，請看下面引入mock擋板數據
     data: {
         id: '100001',
         name: 'xxxxxx'
         }
 }).then(function (res) {
     console.log(res)
 })

  以上，一個完整的axios服務已經完成，下面引入mock擋板


2.mockjs

<1> 安裝mockjs

　npm install mockjs

<2> 在src文件新建mock文件夾
   1.在mock文件夾目錄下，新建兩個文件，一個index.js，一個usermock.js
   2.首先先在usermock.js，新建擋板數據，並暴露出來，代碼如下：

export default {
   　　 getUserInfo:()=>{
         return {
            code:"0",
            message:"訪問成功",
            data:[{
                id:1,
                licNumber:'陝A79898',
                color:1,
                buyTime:'2017-04-01'
            },
                {
                    id:2,
                    licNumber:'陝A2222',
                    color:1,
                    buyTime:'2017-04-01'
                },
                {
                    id:3,
                    licNumber:'陝A3333',
                    color:1,
                    buyTime:'2017-04-01'
                }]
        }
     }
  }

　　

<3> 在mock文件夾下的index.js中引入mock和上面寫的usermock.js,代碼如下

   import Mock from 'mockjs';
   import userInfo from "./usermock"

   Mock.mock("/userInfo",'post',userInfo.getUserInfo());
   export default Mock

　　

<4>在入口文件main.js里面加入對Mock的控制（是否使用mock擋板）

const mock = true;
　　if(mock){
  　　require("./mock");
　　}

　　

<5> 以上，在你的應用組建就可以直接使用

this.$axiosPostForm({
    　　method: 'post',
    　　url:"/userInfo",
    　　data: {
       　　 id: '100001',
       　　 name: 'xxxxxx'
        　　}
　　}).then(function (res) {
   　　 console.log(res)
　　})

　   over,以上是本次記錄！！！