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,以上是本次记录！！！

巴特西

vue+vux-ui+axios+mock搭建一个简单vue框架

最新文章

热门文章