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