Vue 使用 { Mock.js , axios } 模拟数据“伪造数据”也没有很难嘛！Mockjs就是其中一种容易上手

为什么要模拟数据

项目开发时，前端需要获取数据进行页面渲染和功能开发，但是后端人员不一定能及时提供接口以及接口文档，所以为了解决问题，前端可以模拟接口并发送请求，暂时获取静态数据以供使用。

模拟数据有很多种方法，比如使用YApi等接口管理平台，比如建立简单的node服务器写接口等等。这里分享一篇我觉得写得很好的文章，其中介绍总结了各种模拟数据的方案，个人很值得一看。

下面开始进入正题，论如何发axios请求-获取使用Mock.js模拟的数据。

Mock.js

Mock.js是一个模拟数据包，它可以生成随机数据，拦截Ajax请求。

官网地址：mockjs.com

前后端分离：让前端攻城师独立于后端进行开发
增加单元测试的真实性：通过随机数据，模拟各种场景
开发无侵入：不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据
用法简单：符合直觉的接口
数据类型丰富：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等
方便扩展：支持支持扩展更多数据类型，支持自定义函数和正则

步骤

1.下载mockjs、axios

npm  install  mockjs  axios

2.新建mock目录及其下文件

在src文件夹下创建一个mock文件夹

注意：这里可以直接在Mock.mock()方法中写模拟的数据，只是我将他们抽离出来弄成独立的模块

创建mockServer.js文件

// 引入Mock 和 所有模拟数据json文件
import Mock from 'mockjs'
// 引入所有模拟数据json文件    如果不抽离成模块，就不用引用了
import banner from './banner.json'
import floor from './floor.json'
import tradeAddress from './tradeAddress.json'

// Mock.mock()方法模拟数据
// Mock.mock(路径,要返回的数据)
Mock.mock('/mock/banner',{
    code: 200,
    data:banner     //可以直接将模拟数据写在这里
})
Mock.mock('/mock/floor',{
    code: 200,
    data:floor
})
Mock.mock('/mock/tradeAddress',{
    code: 200,
    data:tradeAddress
})

创建模拟数据json文件

webpack中，图片和json资源默认对外暴露，所以不需要另外exports。这里的图片路径需要的图片放置于public文件夹下。

3.引入（执行）mockServer.js

在main.js入口文件引入mockServer.js，相当于执行了。

一定要执行，文件才会生效。

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

4.封装axios请求

新建mockAjax.js文件，封装axios请求。

这只是简单的封装一下，还可以按需增加更多的配置。

import axios from 'axios''

// axios.create创建一个axios实例
const request = axios.create({
    // 根路径
    baseURL:'/mock',          //Mock.mock()方法中的路径有这个前缀
    // 请求超时5s
    timeout:5000
})

export default request

5.发请求

新建request.js文件，统一管理请求接口并对外分别暴露

// 引入封装的axios请求
import mockRequest from './mockAjax'

export const reqBannerList = () => mockRequest.get('/banner')
export const reqFloorList = () => mockRequest.get('/floor')
export const regTradeAddress = () => mockRequest({url:'/tradeAddress',method:'get'})

发请求

<template>
  <div class="app"></div>
</template>

<script>
export default {
    name:'App',
    created() {
        console.log(this.getBannerList());
        console.log(this.getFloorList());
        console.log(this.getTradeAddress());
    },
    methods: {
        async getBannerList(){
            let res = await reqBannerList();
            console.log(res);
            return res
        },  
        async getFloorList(){
            let res = await reqFloorList();
            console.log(res);
            return res
        },
        async getTradeAddress(){
            let res = await reqTradeAddress();
            console.log(res);
            return res
        }
    },
}
</script>

Vue 使用 { Mock.js , axios } 模拟数据