前言：
前端的任务到底是什么
前端开发的本质,是数据的采集和数据的呈现,即把用户提交的数据准确安全地发送给服务器，把服务器传递的数据按照设计图展示在界面上，无论是否界面是否经过CSS的美化，是否经过交互设计的易用性优化，最本质的东西是一样的。
换句话说，你需要做到的是后端给的数据正确时，确保将其按设计稿展示出来，后端给的数据不正确时，给出提示并尽可能不要让脚本报错退出。
一、mock使用场景
1、现在的开发很多都是前后端分离的模式，前后端的工作是不同的，当我们前端界面已经完成，但是后端的接口迟迟不能提供前端很多时候都会等接口。
2、测试人员想要你提供一份可以直接测试，自行修改后端接口，测试 UI 的时候。
3、后端的接口，不能提供一些匹配不到的场景的时候。
二、mock 数据的方案
1、引入 mock.js 实现请求拦截。
Mock.js(github仓库地址)是一个生成Mock数据（也就是虚拟数据）js库，语法简单明了却非常好用，支持前端和服务端两种环境引用,感兴趣的读者可以点击上面链接进行学习，官方Wiki提供了全套文档，最多1小时就可以上手。
安装
npm install mockjs
使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 1
}]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))
RequireJS (AMD)
// 配置 Mock 路径
require.config({
paths: {
mock: 'http://mockjs.com/dist/mock'
}
})
// 加载 Mock
require(['mock'], function(Mock){
// 使用 Mock
var data = Mock.mock({
'list|1-10': [{
'id|+1': 1
}]
})
// 输出结果
document.body.innerHTML +=
'<pre>' +
JSON.stringify(data, null, 4) +
'</pre>'
})
2、搭建一个属于自己到 mock 服务器，模拟自己想要到数据及其数据结构。
使用node.js框架express快速搭建服务器，与后端人员约定好接口后，使用Mock.js在服务端生成各类型虚拟数据，前端开发人员直接对接Mock服务器
express (express框架): npm install express -g
express-generator (express项目生成插件): npm install express-generator -g
mockjs(模拟数据生成库): npm install mockjs
引入mockjs,生成需要的随机数据,当接收到前端发送的请求时,返回生成的数据:
var express = require('express');
var router = express.Router();
var Mock = require('mockjs');
var Random = Mock.Random;
router.get('/systemwarn', function (req, res, next) {
var data =Mock.mock({
'list|20':[{
'id|+1':1,
'serial_number|1-100':1,
'warn_number|1-100':1,
'warn_name|1':['流水线编排服务异常','磁盘占用超过阈值'],
'warn_level|1':['紧急','重要'],
'warn_detail':'环境IP:10.114.123.12,服务名称:XX',
'create_time':Random.datetime(),
'finish_time':Random.datetime(),
'contact|4':'abc'
}]
});
res.send({
meta : {
message: 'success'
},
status:true,
data: data.list
})
})
module.exports = router;
3、传统Apache服务器
为方便管理，直接使用开源XAMPP集成环境，安装完成后一键开启apache服务器，并将前端代码拷贝至安装目录中htdoc文件夹中的子文件夹中，然后以方式1中类似的方式在浏览器中访问即可，由于服务端代码取消了跨域限制，故即使端口号不同，apache服务器中的网站仍然可以访问node服务器中的接口并拿到数据。
