简单的vue+axios+mock配合使用

一、目标

        1.简单的封装axios；

        2.简单的编写mock模拟接口；

        3.简单的集合vue、axios、mock实现模拟请求数据返回；

        实现案例：通过mock模拟数据在点击登录后返回mock自定义的用户信息

二、实现

        1.安装axios（npm install axios --s)，在src下新建utils目录（工具目录），在utils下新建request.js文件为axios的封装文件。（其中拦截器可以在axios文档中获取，设置拦截器是为了配合mock）

// 封装axios，将一大串请求配置代码封装成一个http实例，调用http等同于使用一次axios请求
// 引入axios
import axios from 'axios'

// 创建axios实例http
const http = axios.create({
    // 所有api父目录
    baseURL: '/api',
    // 超时停止请求
    timeout: 10000,
})

//拦截器 
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
});

// 暴露http实例
export default http

        2.安装mockjs(npm install mockjs --s)，在src目录下创建api目录，在api目录中创建index.js文件和mock.js文件和mockServeData文件。

        在mockServeData目录下创建一个mock模拟接口permission.js文件：其中返回的data数据是自定义的。（mock支持生成随机数据

import Mock from 'mockjs'
export default {
    getUser: config => {
        //对前端请求携带的数据进行判断并返回何种data数据
        const { username, password } = JSON.parse(config.body)
        // 先判断用户是否存在
        // 判断账号和密码是否对应
        if (username === 'kkly' && password === '123456') {
            return {
                code: 20000,
                data: {
                    baseInfor: {
                        circleUrl: '../assets/bg/user.jpg',
                        username: 'KKLY',
                        gender: '1',
                        birthday: '2003-04-24',
                        favorite: ['programming', 'games', 'tennis ball'],
                        quote: 'horizon your eyes'
                    },
                    token: Mock.Random.guid(),
                    message: '获取成功'
                }
            }
        } else if (username === 'admin' && password === '123456') {
            return {
                code: 20000,
                data: {
                    baseInfor: {
                        circleUrl: '../assets/bg/user2.jpg',
                        username: 'admin',
                        gender: '0',
                        birthday: '2013-06-24',
                        favorite: ['painting', 'study', 'football'],
                        quote: 'keep alive'
                    },
                    token: Mock.Random.guid(),
                    message: '获取成功'
                }
            }
        } else {
            return {
                code: -999,
                data: {
                    message: '密码错误'
                }
            }
        }

    }
}

        在mock.js文件中引入mockjs和permission：

import Mock from 'mockjs'
import permission from './mockServeData/permission'

//这是登录接口，方法为post，第一个参数为模拟接口地址，与index定义的方法地址一致，需要转义，第三个参数为模拟接口的方法
Mock.mock(/api\/permission\/getUser/,'post',permission.getUser)

        3.mock模拟接口写好后，就需要在api目录下的index.js中定义请求的一个方法 ：

import http from "@/utils/request";
//引入axios实例http

//定义并暴露getUser数据请求方法，data参数为前端向后端发送请求携带的数据，如登录表单中的username和password，发送请求并return返回后端给的数据
export const getUser = (data) =>{
    return http.post('/permission/getUser',data)
}

        3.在login组件中引入getUser方法，并调用：

 methods: {
        submitForm() {
            this.$refs.loginForm.validate((isPass) => { //验证表单信息内容
                if (isPass) { //当表单内容符合 rule则isPass为true
                    getUser(this.loginForm).then(({ data }) => { //后端接口进行判断查找是否存在这个用户，并返回失败或成功的data数据
                        console.log(data)
                        if (data.code === 20000) { //返回的数据中的code属性为2000时则表示存在这个用户则可以跳转到home页面
                            Cookie.set('token', data.data.token); //将用户携带的token赋值给Cookie中的‘token’，在导航守卫中
                            this.$router.push('/home'); //点击登入后路由跳转到home首页，即to指向的页面

                            this.$store.commit('setUser',data.data.baseInfor) //将用户信息保存到store中
                        } else if (data.code === -999) {
                            this.$message.error(data.data.message)
                        }
                    })
                }
            })
        },