简单的mock数据调试

前言

在我们的开发过程中常常会遇到接口格式已经确定，但后端却迟迟给不到接口，导致开发效率下降。
出现这种情况时我们可以使用mock数据来模拟后端接口进行测试，接下来我将介绍一种简单的Mock方案。
此方案一般适用于接口较少、且数据结构简单、手动定义数据效率更高的情况。
若接口较多，且数据结构十分复杂，使用本方案手动构建mock数据可能会适得其反，在构造mock数据时反而浪费大量时间。

方案详情

一. 安装

本方案使用的是npm中的json-server，需要Node.js环境
项目是使用webpack构建的，以下两种安装方式选一种即可

yarn add json-server --dev
# OR
npm install json-server --save-dev
复制代码

二. 创建mock数据及服务器

1. 在开发环境中创建mock文件夹

2. 在mock文件夹中创建list.json文件，该文件中存放的是自己定义的mock数据

3. 在mock文件夹中创建mock.js，文件内容：

// 引入伪数据
const list = require('./list.json');

module.exports = function(){
    return {
        list
    }
}
复制代码

4. 配置路由文件,在mock文件夹中创建route.json文件

通过路由文件可以在不更换真实url的基础上访问伪数据,文件内容如下：

{
    // key为真实访问的url
    // value为实际的url
    "/api/position/list":"/list"
}
复制代码

5.开启mock数据服务器

在终端中开启一个服务器，默认端口号为3000

在命令行中输入以下内容

.\node_modules\.bin\json-server ./src/mock/mock.js -r ./src/mock/route.json
复制代码

可将此命令添加为脚本，在package.json中配置

"scripts": {
    "json-server": "json-server ./src/mock/mock.js -r ./src/mock/route.json"
  }
复制代码

配置完成后，在命令行中直接输入以下代码即可开启服务器

yarn json-server
复制代码

因为新建了一个服务器，端口号不同，所有会产生跨域问题，前端页面想到拿到数据，需要在配置文件中配置反向代理

proxy: {
  '/api': {
    target: 'http://localhost:3000',
    changeOrigin: true
  }
}
复制代码

mock数据服务和反向代理已全部搭建完成，接下来就可以模拟真实的数据访问了

三. 数据访问

js代码：

// 发送Ajax请求
$.ajax({
  url: '/api/position/list',
  success(result){
    // 打印数据
    console.log(result);
  }
})
复制代码

浏览器控制台打印的数据：

发送的Ajax请求：

至此在前端已成功拿到mock数据