前端开发使用Mock.js+express模拟响应数据

在开发中，如果后端的接口还没完成，前端就需要使用mock.js来模拟数据，来模拟前后端交互数据，以保证工作的进度。

Mock.js官方简介：

Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：

• 根据数据模板生成模拟数据
• 模拟 Ajax 请求，生成并返回模拟数据
• 基于 HTML 模板生成模拟数据

在这里就不教大家如何搭建node.js环境了，默认大家都是有nodejs基础的。大家可以参考我这篇博客快速初始化项目，以及参考另一篇博客写简单的接口。

1.nodejs

下面我们先上nodejs的源码：

创建app.js：

const express = require('express')

// 创建 express 应用
const app = express()

// 监听 /getList 路径的 get 请求
app.get('/getList', function(req, res) {
  res.send('hello node')
})

// 使 express 监听 4200 端口号发起的 http 请求
const server = app.listen(4200, function() {
	console.log("服务器已启动，监听4200端口");
})

运行命令：

node app.js

在浏览器或postman访问localhost:4200/getList即可接收到hello node字符串。
上面就是一个利用nodejs快速搭建的只有一个接口的简单服务器。

2.Mockjs

下面引入Mockjs生成随机模拟数据：

Mockjs官网

安装mockjs：

npm install mockjs

在app.js引入：

var Mock = require('mock.js');

Mockjs生成数据的方法很多，我们主要使用：

Mock.mock(template);

注意：template的数据类型是json。

下面生成一个随机对象：

var data=Mock.mock({
        'id|+1':1,
        'time':Random.time('HH:mm:ss'),
        'name':Random.cname(),
        'imgUrl':Random.image(Random.image('200x100', '#00405d', '#FFF', 'Mock.js')),
        'key|1-5': '★'
    })

完整代码：

const express = require('express')
var Mock = require('mock.js');

// 创建 express 应用
const app = express()

// 监听 /getList 路径的 get 请求
app.get('/getList', function(req, res) {
  var data=Mock.mock({
        'id|+1':1,
        'time':Random.time('HH:mm:ss'),
        'name':Random.cname(),
        'imgUrl':Random.image(Random.image('200x100', '#00405d', '#FFF', 'Mock.js')),
        'key|1-5': '★'
    })
    
	res.send(data);
})

// 使 express 监听 4200 端口号发起的 http 请求
const server = app.listen(4200, function() {
	console.log("服务器已启动，监听4200端口");
})

运行服务器：node app.js

浏览器访问：

Mockjs能模拟各种数据类型，更多内容请参考mockjs官网。