什么是Mock Server数据？
简单来讲，就是API （也就是服务器接口）没有写好前提下，前端无法进行调试，Mock Server 就是用来模拟Api接口返回JSON数据的服务！
下面介绍 3 种 mock处理，同时也有很多第三方的，比如（jsonServer mockJS、webpack lorem-ipsum等等）：
1、MockJS
mockJS官网 或者 Mock
==注意：目前为止 mockJS 不支持 fetch，但是可以跟webpack搭配使用==
基于没有任何打包工具（webpack/gulp/node等），纯静态H5使用，推荐：
代码语言：javascript复制<script src="http://mockjs.com/dist/mock.js"></script>mockJS是拦截 ajax 请求再生成随机数据响应的工具！
下面附上简单的demo，方便理解：gitHub
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title>MockJs测试</title>
<style>
#write {
width: 50%;
height: 100%;
min-height: 500px;
}
</style>
</head>
<body>
<h1>MockJS 使用测试</h1>
<p>结果如下：</p>
<p><textarea id="write"></textarea></p>
</body>
<script src="http://mockjs.com/dist/mock.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
var obj = {
'aa': '11',
'bb': '22',
'cc': '33',
'dd': '44'
},
d = document,
g = "querySelector";
// Mock响应模板
Mock.mock('http://AAA.com', {
"user|1-3": [{ // 随机生成1到3个数组元素
'name': '@cname', // 中文名称
'id| 1': 88, // 属性值自动加 1，初始值为88
'age|18-28': 0, // 18至28以内随机整数, 0只是用来确定类型
'birthday': '@date("yyyy-MM-dd")', // 日期
'city': '@city(true)', // 中国城市
'color': '@color', // 16进制颜色
'isMale|1': true, // 布尔值
'isFat|1-2': true, // true的概率是1/3
'fromObj|2': obj, // 从obj对象中随机获取2个属性
'fromObj2|1-3': obj, // 从obj对象中随机获取1至3个属性
'brother|1': ['jack', 'jim'], // 随机选取 1 个元素
'sister| 1': ['jack', 'jim', 'lily'], // array中顺序选取元素作为结果
'friends|2': ['jack', 'jim'] // 重复2次属性值生成一个新数组
}, {
'gf': '@cname'
}]
});
$.ajax({
url: 'http://AAA.com',
type: 'get',
dataType: 'json'
}).done(function(data, status, xhr) {
console.log(data)
var str = JSON.stringify(data, null, 4)
console.log(str);
d[g]("#write").innerHTML = str;
});
</script>
</html>2、marmot介绍
marmot 官方
依赖： - Node.js 4.0 - JDK 7
操作使用分为几步骤：
1、安装
代码语言：javascript复制//window
npm install -g marmot
//mac
sudo npm install -g marmot2、初始化
代码语言：javascript复制marmot init3、启动服务
代码语言：javascript复制//启动服务，默认服务8080
marmot server start
//指定端口启动服务
marmot server start -p 8090
//关闭服务
marmot server stop
//指定端口进行关闭服务
marmot server stop -p 8090
//移除服务
marmot server remove
//移除指定服务
marmot server remove -p 8090成功启动服务：如下图：
接下来编写 router/mian.xml 文件，文件太多，见 gitHub
操作成功后，可本地查看页面效果：http://127.0.0.1:8099/index.html
4、最后查看启动服务
代码语言：javascript复制marmot server list
3、Webpack devServer使用
主要是利用 Webpack devServer proxy 处理
代码语言：javascript复制devServer: {
inline: true, //设置为true，代码有变化，浏览器端刷新。
open: true, //:在默认浏览器打开url(webpack-dev-server版本> 2.0)
port: config.server.port,
compress: true, //使用gzip压缩
host: ip.address(), //ip地址，同时也可以设置成是localhost,
progress: true, //让编译的输出内容带有进度和颜色
historyApiFallback: true, //回退:支持历史API。
contentBase: "./", //本地服务器所加载的页面所在的目录
proxy: {
'api/**': {
target: config.server.target, //跨域Ip地址
pathRewrite: {"^/api" : ""},
secure: false
},
'/mock/**': {
target: `http://${ip.address()}:${config.server.port}/`,
pathRewrite: {"^/mock" : ""},
changeOrigin: true,
secure: false
}
},
}使用
代码语言：javascript复制axios.post('/news/index', 'type=top&key=123456')
.then(res => {
console.log(res);
that.newsListShow = res.data.articles;
});特别的声明下，这里的 proxy 的 target指向地址为自己，为 请求本地mock
全部demo：GItHub
