vue mock模拟后台接口数据

一、Json server

轻量级，将已有的json文件跑在服务器上供前端调用

npm install -g json-server

启动JSON数据服务器：

json-server --watch json文件名
或
json-server --watch json文件 --port 指定端口

此时可请求此目录下的json；每个json都要手写，意义不大；所以使用下面的mock，不但能“监听”，还能按要求模拟数据。

二、Mock 服务

• 支持 GET / POST / PUT
• 支持返回 json 格式
• 支持返回结果实时替换
• 支持按照特定参数动态返回指定内容

1.安装

npm install mockjs --save-dev

在 package.json 文件里面提现出来的区别就是，使用 --save-dev 安装的插件将被写入到 devDependencies 里面，而使用 --save 安装的插件则被写入到 dependencies 对象里面。

2.创建 Mock

在src下创建mock文件夹，在文件夹下创建index.js，以及一个示例login文件夹和下面的index.js（模块化）

//src/mock/index.js
import Mock from 'mockjs'
import { postLogin } from './login'

// 设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留
Mock.setup({
    timeout: '300-600'
})

Mock.mock(/\/api\/login/, 'post', postLogin)
// Mock.mock('/api/login', 'post', postLogin)

// src/mock/login/index.js
// import Mock from 'mockjs' //由于此下无需模拟数据，故不引入mock
let passwords = {
    admin: '1',
    user: '1',
}

let tokens = {
    admin: 'admin-token'
}

let users = {
    'admin-token': {
        roles: ['admin'],
        introduction: 'I am a super administrator',
        avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
        name: 'admin'
    }
}

export const postLogin = response => {
    console.log(response, '开始执行mock')
    let res = JSON.parse(response.body)
    let token = tokens[res.name]
    let user = users[token]

    if (passwords[res.name] == res.password) {
        console.log("用户名密码正确")
        if (token) {
            console.log("有token",token)
        } else {
            console.log("创建新token",token)
            token = {}[res.name] = res.name + '-token'
            tokens[res.name] = token
            user = {
                roles: ['admin'],
                introduction: 'I am a super administrator',
                avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
                name: res.name
            }
            users[token] = user
        }
        console.log(passwords, tokens, users)
        return {
            code: 200,
          	data: { token, user },
            msg: "登陆成功"
        }
    }
    else {
        console.log("用户名密码错误")
        return {
            code: 1001,
            msg: '用户名密码错误'
        }
    }
}

3.main.js引入

具体看你的mock文件夹放在了哪

// 引入 mock 模拟数据
import './mock' 

4.组件中axure请求

直接使用axure请求

 axios.post(
 		url: '/api/login',
        {data:{ name: "user", password: "1" }}
        )
		.then(res => {
		      console.log(res);
			  this.$router.push("/index");
		    })
		.catch((error) => {
		  console.log(error);
		});

使用自己封装后的axios请求(因为有了响应器拦截，所以支持失败响应)：

import { postLogin } from "@/api/login";

postLogin({ name: "user", password: "1" })
            .then((res) => {
              console.log(res);
              this.$router.push("/index");
            })
            .catch((error) => {
              console.log(error);
            });

src下创建api，api下创建login.js

import request from '@/utils/request.js' 
export const postLogin = (data) => {
    return request({
        url: '/login',
        method: 'post',
        data
    })
}

src下创建utils，utils下创建request.js

import axios from 'axios'
import store from '@/store'
import router from '@/router'

// create an axios instance
const service = axios.create({
    baseURL: "/api", // url = base url + request url
    timeout: 5000, // request timeout
})

//添加请求拦截器，若token存在则在请求头中加token，不存在也继续请求
service.interceptors.request.use(
    config => {
        // 每次发送请求之前检测都vuex存有token,那么都要放在请求头发送给服务器,没有则不带token
        // Authorization是必须的
        // if (store.getters.getToken) {
        //    config.headers.Authorization = store.getters.getToken;
        // }
        return config;
    },
    error => {
        console.log("在request拦截器显示错误：", error.response)
        return Promise.reject(error);
    }
);

//respone拦截器
service.interceptors.response.use(
    response => {
        // 在status正确的情况下，code不正确则返回对应的错误信息（后台自定义为200是正确，并且将错误信息写在message），正确则返回响应
        // 在这里当code不是200时返回错误，否则axure catch不到
        return response.data.code == 200 ? response : Promise.reject(response.data);
    },
    error => { 
        // 在status不正确的情况下，判别status状态码给出对应响应
        if (error.response) {
            console.log("在respone拦截器显示错误：", error.response)
            switch (error.response.status) {
                case 401:
                    //可能是token过期，清除它
                    store.commit("delToken");

                    router.replace({ //跳转到登录页面
                        path: '/login',
                         // 将跳转的路由path作为参数，登录成功后跳转到该路由
                        query: { redirect: router.currentRoute.fullPath }
                    });
            }
        }
        return Promise.reject(error.response);
    }
);
export default service