使用mock.js快速搭建一个模拟接口

---

---

前言

本系列主要是记录我在做前端项目学习到的一些常用组件或功能，方便后面复习时用；同时也是想把我学习到的内容做一个总结，或许能帮到有需要的人，或许能有大佬指出我的错误，让我能能及时更正学习；希望与大家一起共勉！

本文并非零基础入门，需要学习例如promise、axios、vue-cli等基础知识

---

一、mock.js是什么？

用官网的话来说，就是生成随机数据，拦截 Ajax 请求。
在开发中，如果后端还没有开发好接口，那么我们就可以先用mock.js来模拟数据接口。
等后端准备好了，直接用后端接口替换模拟数据的接口就好。

二、使用步骤

1.在本地下载依赖包

npm install mockjs

安装完以后，可以在vue脚手架的package.json文件中查看是否安装上了

感觉开发中是不是应该用-save-dev命令安装在devDependencies会比较好

2.创建mock文件夹

一般都会把mock.js相关的文件放在src目录下的mock文件夹中

3.设计JSON数据结构

直观点来看JSON的数据结构就好像对象数组，这个是不能变的。
但对象里面的键值对可以根据自己的需求来编写。

例如我要给我的轮播图组件写一个模拟接口，那么我要创建个名为banners的json文件，记得放在mock文件夹里。

轮播图因为是通过v-for来展示图片，所以需要图片的路径和id（提供给:key）
大致格式如下：

[{
        "id": "1",
        "imgUrl": "/images/banner1.jpg"
    },
    {
        "id": "2",
        "imgUrl": "/images/banner2.jpg"
    },
    {
        "id": "3",
        "imgUrl": "/images/banner3.jpg"
    },
    {
        "id": "4",
        "imgUrl": "/images/banner4.jpg"
    }
]

建议安装插件格式化文档，整理下代码的格式，我之前就是因为有回车空格导致json文件读取错误

4.json文件需要的图片放到静态资源文件夹下

vue有个专门的public文件夹来放静态资源，图片存放的路径要与你json文件写的一样，我放在images这个文件夹里了。

5.创建mockServer.js文件

接下来就是用mockjs来模拟数据接口

因为我自己准备了数据，我只需要模拟接口就可以了，所以接下主要介绍的是mockjs里的Mock.mock()方法。

Mock.Random()等其他方法的具体使用语法可以参考官方中文文档

在mock文件夹下创建mockServer.js文件，里面代码如下：

import Mock from 'mockjs'
import banners from './banners.json'


Mock.mock('/mock/banners', {
    code: 200,
    data: banners
})

首先是要引入mockjs和json文件。
然后Mock.mock()里有两个参数，第一个是rurl，第二个是数据模板 template，作用是当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。

6.在入口文件引入mockServer

入口文件一般是main.js，至少我是；在这个文件里引入mockServer，在其他文件里就不用再写一次了

7.封装请求mock接口的axios

axios的封装是项目很重要的一环，之后再写一篇文章单独讲一下。

现在我们要做的就是专门封装一个单独访问mock接口的axios文件。
也不用做什么太多的操作，就是baseURL设置成’/mock’，然后添加请求拦截器和响应拦截器，最后将请求方法暴露出去让别的文件能访问到就行。

首先在api文件夹下创建mockAjax.js文件

具体代码如下：

import axios from 'axios';

const mockAjax = axios.create({
    baseURL: '/mock',
    timeout: 10000
})

mockAjax.interceptors.request.use((config) => {
    return config;
})

mockAjax.interceptors.response.use((response) => {
    return response.data;
}, (error) => {
    return Promise.reject(error);
})

export default mockAjax

mockAjax就是一个创建axios请求的方法

然后在index文件里调用该方法发送axios请求，method为get，url为mockServer.js里设置的路径banners，具体代码如下：

import mockAjax from './mockAjax'

export const reqBanners = () => {
    return mockAjax.get('/banners')
}

8.测试是否能获得模拟数据

我的项目里，从接口获得的数据是存放在vuex里的，为了避免一篇文章的篇幅过长，我这里先测试下能不能获得axios返回的promise对象和结果data，具体存储数据，展示在轮播图上就下一篇文章再介绍。

在App.vue这个文件下的生命周期函数mounted里直接调用reqBanners()
可以用async/await直接获取promise对象里的值

import { reqBanners } from '@/api';

methods: {
	async getBanners() {
		let result = await reqBanners();
		console.log(result);
	},
},
mounted() {
	this.getBanners();
},

输出结果如下：

---

总结

以上就是今天要讲的内容，本文介绍了mock.js的使用，算是一个比较基础的使用，目的就是能快速入手模拟接口进行项目开发，更详细的random随机生成数据等之后有时间研究研究再说吧。
如果本文有哪里说错了，欢迎提出指正和批评，我们一起共勉！