测试API的模拟主要分以下2块
- 1.模拟服务器
- 2.模拟测试数据
一、模拟服务器解决方案
1）.使用Apache开启 Web Server
Mac自己集成了Python和Apache
启动：sudo apachectl start
停止：sudo apachectl stop
重启：sudo apachectl restart
查看 Apache 版本： httpd -v
浏览器打开 http://127.0.0.1 可以看到 It works! 的页面.
- 使用本地回环测试地址http://127.0.0.1
- 使用http://locahost
mac下Apache的默认文件夹为/Library/WebServer/Documents
在该目录添加一个名为test.json文件
浏览器输入http://127.0.0.1/test 即可看到test.json文件内容
修改Apache目录
以上说的有点杂，折腾很久还是出现Forbidden You don't have permission to access / on this server.
上面说到了mac下Apache的默认文件夹为/Library/WebServer/Documents，该目录默认是隐藏的，操作不是很方便，我们可以将其修改成自定义的目录。
-
1.1、打开终端，输入命令：
sudo vim /etc/apache2/httpd.conf
也可以找到httpd.conf文件进行编辑
$ cd /etc/apache2 #进入文件夹
$ open . #打开文件夹
- 1.2、找到如下两处
DocumentRoot "/Library/WebServer/Documents"
<Directory "/Library/WebServer/Documents">
-
1.3、将两处中引号中的目录替换为自定义的目录，如"
/Library/apacheWeb"
完成以上三步后，重启Apache，浏览器输入http://127.0.0.1
Forbidden You don't have permission to access / on this server.
这个折腾了好久，修改权限sudo chmod -R 777 apacheWeb也不行，灵机一动把/Library/WebServer/Documents目录中的index.html.en文件拷贝到自定义的目录，sudo apachectl restart 后就可以看到 It works! 的页面！
访问某一文件如：http://127.0.0.1/db
其它修改方式参考
2）.使用Python开启 Web Server
相比Apache更简单不需要改本地服务器路径，随便进入一个目录即可开启
$ python -m SimpleHTTPServer #默认8000端口
$ python -m SimpleHTTPServer 8080 #指定端口为8080
python会以当前目录作为根目录起一个本地server, 访问localhost:8000就可以看到效果了。
3）使用Node.js 模拟服务器
3.1 json-server
3.1.1、全局json-server安装
$ sudo npm install json-server -g
安装完成后可以用 json-server -h 命令检查是否安装成功，成功后会出现帮助命令选项。
3.1.2.启动server
$ cd ~/Desktop/mock #进入db.js文件目录
$ json-server --watch db.json #启动监听服务,当然也可以监听js,json，text，md等文本文件
如果成功会出现:
\{^_^}/ hi!
{xxx: 'xxx'}
Home
http://localhost:3000
json-server启动默认端口为3000；
这个时候访问 http://localhost:3000/db可以查看所定义的全部数据。
3.2 使用http-server搭建静态服务器
1.安装http-server
npm install http-server -g
2.启动
http-server -a 127.0.0.1 #默认端口8080
http-server -a 127.0.0.1 -p 9999 #指定端口9999
更多：https://www.npmjs.com/package/http-server
3.2 ohana
ohana 是一个返回模拟 json 数据的 node http 服务器，默认集成了 mockjs 生成动态的 json 数据，支持 POST, GET, PUT, DELETE 四种请求。
特点：
使用 mockjs 生成 json 数据
支持路由规则
-
可跨域访问
如何使用：
作者主页http://blog.allenice233.com/2014/12/01/ohana-node-server/
常用web服务器框架
开源项目：
二、模拟数据生成
1.常用node.js数据模拟库
2.生成模拟 JSON 在线工具:
3.JSON API 在线模拟工具:
-
商业化方案
代理服务器
- 使用 charles作为代理服务器
- 使用代理服务器的 map（映射）& rewrite（重写）功能
示例代码：
mock.js 生成模拟数据，其它如json-server，koa，express等直接引用生成的数据就行
// 使用 Mock 保存为mock_users.js
var Mock = require('mockjs')
let Random = Mock.Random;
function generateCustomers () {
var total=10;
var customers = []
for (var id = 0; id < total; id++) {
var firstName =Random.cname();
var email =Random.email("pconline.com.cn");
var gender = Random.pick(['男', '女']);
customers.push({
"id": id,
"first_name": firstName,
"Gender": gender,
'email': email,
})
}
var data = Mock.mock({ "customers": customers})
return {"customers": customers,
"stateCode":"200",
"total":"85"
}
}
var jsonData = JSON.stringify(generateCustomers());//转换为json字符格式,在服务器端直接解析req.body
exports.mockJson = function () {
return jsonData;
};
exports.mockJson2 = function () {
return generateCustomers();
};
exports.mockJsonTest = function () {
return {"customers":"hello world"};
};
使用json-server模拟http server
//保存为 jsonserverMockAPI.js
var customUser = require('./mock_users2.js');//引入模拟数据js文件
// 如果你要用json-server的话，就需要export这个生成fake data的function
module.exports = function() {
// var jsonData = JSON.stringify(generateCustomers2());//转换为json字符格式,在服务器端直接解析req.body
return customUser.mockJson3();
}
运行服务 json-server --watch jsonserverMockAPI.js
使用express模拟http server
// 引入 `express` 模块
var express = require('express');
// 调用 express 实例
var app = express();
var customUser = require('./mock_users.js');//引入模拟数据js文件
//console.log( '生成模拟数据\n' + customUser.mockJson());
var jsonData1 = customUser.mockJson();//转换为json字符格式,在服务器端直接解析req.body
// app 本身有很多方法，其中包括最常用的 get、post、put/patch、delete，在这里我们调用其中的 get 方法，为我们的 `/` 路径指定一个 handler 函数。
// req和res是reques和response的缩写
var jsonData = customUser.mockJson2();//转换为json字符格式,在服务器端直接解析req.body
app.get('/', function (req, res) {
res.contentType('json');//返回的数据类型
res.send(jsonData);//给客户端返回一个json格式的数据
res.end();
});
// 监听本地的 3000 端口
app.listen(3000, function () {
console.log('监听3000端口');
});
使用koa模拟http server
//保存为如：KoaMockAPI001.js
//使用教程 https://cnodejs.org/topic/5709959abc564eaf3c6a48c8
var customUser = require('./mock_users.js');//引入模拟数据js文件
console.log( '生成模拟数据\n' + customUser.mockJson());
var Koa = require('koa');
var app = new Koa();
// 此处开始堆叠各种中间件
//...
// response
app.use(ctx => {
ctx.body = customUser.mockJson();
});
app.listen(3000);
如何自动化
可以用如nodemon 去启动你的 express
https://github.com/remy/nodemon
nodemon app.js
模拟数据演示Demo html代码
<!-- https://gxnotes.com/article/33145.html 代码显示 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
<script src="https://cdn.bootcss.com/highlightjs-line-numbers.js/2.0.0/highlightjs-line-numbers.js"></script>
<link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/agate.min.css" rel="stylesheet">
<script>
hljs.initHighlightingOnLoad();
hljs.initLineNumbersOnLoad();
</script>
<style>
td.hljs-ln-numbers {
text-align: center;
color: #ccc;
border-right: 1px solid #999;
vertical-align: top;
padding-right: 5px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
td.hljs-ln-code {
padding-left: 10px;
}
code {
white-space: pre-wrap;
overflow: auto;
}
#wrapper {
max-width: 500px;
margin: 0 auto;
}
</style>
</head>
<body>
<!--创建超级链接-->
<div>模拟数据： <a href="http://mockjs.com/" target="_blank">http://mockjs.com/</a></div>
<div>生成JSON API： <a href="http://www.jsonohyeah.com/" target="_blank">http://www.jsonohyeah.com/</a></div>
<div><h4 id="mockjs">mockjs+jsonohyeah模拟接口数据</h4></div>
<style>
pre{
margin-bottom: 10px;
overflow: auto;
width: 90%;
padding: 10px;
padding-bottom: 20px!ie7;
max-height: 300px;
}
</style>
<script>// 使用 Mock
var mockjsObj= {
'total': 20,
'pageNo': 1,
"code": 0,
"message": '@cparagraph()',
// 属性 result 的值是一个数组，其中含有 1 到 n 个元素
'result|1-20': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 1,
'title|1-6': '我是标题 ', //5x6 30字以内的标题
"content" : "@cparagraph()", //模拟文本
"date": "@date('yyyy-MM-dd')",//模拟时间
"image" : "@image()", //模拟图片URL
'color' : '@color', //模拟颜色
'userName' : '@name',
"age|1-100":100, //模拟年龄(1-100)
"url" : "@url()" //模拟url
}]
};
function mockreloadPage()
{
/*获取下拉列表的值*/
var selectval = $('textarea#runcode_mock').val();
mockjsObj=JSON.parse(selectval);
var mockjsStingTest=JSON.stringify(mockjsObj,null,0);
console.log("selectvalv"+mockjsStingTest);
var data = Mock.mock(
mockjsObj
);
// 输出结果
console.log(JSON.stringify(data, null, 4))
console.log("mockreloadPage")
$("#result").text(JSON.stringify(data,null,2));
hljs.initHighlighting.called = false;
hljs.initHighlighting();
hljs.initLineNumbersOnLoad();
}
</script>
<h4>模拟规则（可修改）</h4>
<textarea class="pt" id="runcode_mock" rows="10" style='padding:10px;;width:90%'></textarea>
<script>$("textarea#runcode_mock").val(JSON.stringify(mockjsObj,null,2));</script>
<h4 id="mockResult">模拟结果</h4>
<button id="button_id">生成模拟数据</button>
<pre><code class="json" id="result">#点击按钮生成模拟数据#</code></pre>
<script>
//调用mock方法模拟数据
$("#button_id").click(function(){
mockreloadPage();
});
</script>
</body>
</html>
