项目中使用Mock数据的几种方式

项目中使用Mock数据的几种方式

• 需求背景：在前后端分离的大环境下，前端需要获取后端接口的数据去渲染页面，这种情况下当后端开发进度落后的时候，前端的开发也受到阻碍。因此，前端需要静态的模拟数据来进行调试。

• mock数据(模拟数据)产生方式：       

       手动创建。但是这种方式问题也比较明显，特别是当数据内容较为复杂的时候或者是数据量较多的时候，创造mock数据都是很耗时的。

       使用mockjs 。mockjs 可以根据数据模板自定义生成mock数据，时下很多开发者都使用mockjs来生成mock数据，本文所讲的方法也是基于mockjs。

       利用第三方在线mock平台。例如：Easy Mock

• mock数据实战

        1.安装 npm install mockjs

        2.在项目目录中新建一个mock文件夹，将跟mock数据有关的内容都放在此处。

    3.构建mock数据

//mock/data/index.js
const Mock = require("mockjs");
module.exports = [
  Mock.mock("/mock/getData", {
    "data|10": [
      {
        "key|+1": 1,
        "words|1": ["哈哈", "嘿嘿", "biubiu", "啾啾", "喵喵","啦啦"],
        "activity|1": ["吃饭", "睡觉", "打豆豆"]
      }
    ]
  })
];

    4. 开启mock数据服务：

        方法一：

               在入口文件引入mock数据文件，并请求mock数据

import React,{Component} from "react";
import axios from "axios";
import '../mock/data/index';

class App extends Component {
    constructor(props) {
    	super(props);
    	this.state = {
      		mockData: ""
    	};
  	}
    componentDidMount(){
        axios.get("/mock/getData").then(res => {
      		console.log("This is mock data : ", res.data);
             this.setState({
        		mockData: res.data
     		});
    	});
    }
    render() {
        return (
        	<div>
            <h2>mock数据：</h2>
            <div>{this.state.mockData}</div>
            </div>
        )
    }
}

此时控制台和页面上都可以看到mock数据的输出了。但是这种利用方式需要在每一个用到mock数据的文件中进行引用，如果联调之后不用mock数据之后也需要手动注释。

另外有两点需要注意的是：

1. 这种方式请求的mock数据在浏览器的Network中是捕获不到的，因为这是个假的ajax
2. 用fetch发送ajax是无法请求到数据的，可能是mockjs目前还不支持fetch。

            方法二：配置项目的package.json文件，通过node开启mock服务。

            创建mockServer.js文件

//mock/server/mockServer.js
let express = require("express"); //引入express
let Mock = require("mockjs"); //引入mock
let app = express(); //实例化express
//设置允许跨域
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "PUT, GET, POST, DELETE, OPTIONS");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Access-Control-Allow-Headers", "Content-Type");
  next();
});

app.get("/mock/getData", function(req, res) {
  res.json(
    Mock.mock({
    "data|10": [
      {
        "key|+1": 1,
        "words|1": ["哈哈", "嘿嘿", "biubiu", "啾啾", "喵喵","啦啦"],
        "activity|1": ["吃饭", "睡觉", "打豆豆"]
      }
    ]
  })
});
app.listen("4000", () => {
  console.log("监听端口 4000");
});

            修改package.json配置，然后只需要在项目运行之后再npm run mock即可。

//package.json部分代码
"scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start && npm run mock",
    "type-check": "tsc",
    "pm2:start": "npm run build && pm2 startOrRestart ecosystem.config.js --env production",
    "pm2:stop": "pm2 stop linkchain",
    "pm2:deploy": "pm2 deploy ecosystem.config.js dev",
    "mock": "node ./mock/server/mockServer"//开启mock服务
  }

这种方式请求mock数据可以在浏览器的Network中捕获到请求信息。

但是这种方法也存在一个不足之处：无法实现热加载，每一次修改mock数据相关文件后必须要杀死当前mock服务之后再次重启mock服务才会生效，这样也会给开发添加一些麻烦。

当然，在项目中使用mock数据肯定还有其他更好的方式，待笔者学习之后再进行更新！