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

Mr.mmming發表於2018-12-07

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,以上是本次記錄!!!








      

 

相關文章