測(cè)試API的模擬主要分以下2塊
- 1.模擬服務(wù)器
- 2.模擬測(cè)試數(shù)據(jù)
一澎迎、模擬服務(wù)器解決方案
1）.使用Apache開(kāi)啟 Web Server
Mac自己集成了Python和Apache
啟動(dòng)：sudo apachectl start
停止：sudo apachectl stop
重啟：sudo apachectl restart
查看 Apache 版本： httpd -v
瀏覽器打開(kāi) http://127.0.0.1 可以看到 It works! 的頁(yè)面.
- 使用本地回環(huán)測(cè)試地址http://127.0.0.1
- 使用http://locahost
mac下Apache的默認(rèn)文件夾為/Library/WebServer/Documents
在該目錄添加一個(gè)名為test.json文件
瀏覽器輸入http://127.0.0.1/test 即可看到test.json文件內(nèi)容
修改Apache目錄
以上說(shuō)的有點(diǎn)雜熄驼，折騰很久還是出現(xiàn)Forbidden You don't have permission to access / on this server.
上面說(shuō)到了mac下Apache的默認(rèn)文件夾為/Library/WebServer/Documents，該目錄默認(rèn)是隱藏的职恳，操作不是很方便，我們可以將其修改成自定義的目錄。
-
1.1捆愁、打開(kāi)終端穆趴，輸入命令：
sudo vim /etc/apache2/httpd.conf
也可以找到httpd.conf文件進(jìn)行編輯
$ cd /etc/apache2 #進(jìn)入文件夾
$ open . #打開(kāi)文件夾
- 1.2、找到如下兩處
DocumentRoot "/Library/WebServer/Documents"
<Directory "/Library/WebServer/Documents">
-
1.3未妹、將兩處中引號(hào)中的目錄替換為自定義的目錄，如"
/Library/apacheWeb"
完成以上三步后族檬，重啟Apache，瀏覽器輸入http://127.0.0.1
Forbidden You don't have permission to access / on this server.
這個(gè)折騰了好久化戳，修改權(quán)限sudo chmod -R 777 apacheWeb也不行，靈機(jī)一動(dòng)把/Library/WebServer/Documents目錄中的index.html.en文件拷貝到自定義的目錄，sudo apachectl restart 后就可以看到 It works! 的頁(yè)面白对！
訪問(wèn)某一文件如：http://127.0.0.1/db
其它修改方式參考
mac 升級(jí)后配置 apache 到個(gè)人目錄
2）.使用Python開(kāi)啟 Web Server
相比Apache更簡(jiǎn)單不需要改本地服務(wù)器路徑，隨便進(jìn)入一個(gè)目錄即可開(kāi)啟
$ python -m SimpleHTTPServer #默認(rèn)8000端口
$ python -m SimpleHTTPServer 8080 #指定端口為8080
python會(huì)以當(dāng)前目錄作為根目錄起一個(gè)本地server, 訪問(wèn)localhost:8000就可以看到效果了换怖。
3）使用Node.js 模擬服務(wù)器
3.1 json-server
3.1.1甩恼、全局json-server安裝
$ sudo npm install json-server -g
安裝完成后可以用 json-server -h 命令檢查是否安裝成功狰域，成功后會(huì)出現(xiàn)幫助命令選項(xiàng)。
3.1.2.啟動(dòng)server
$ cd ~/Desktop/mock #進(jìn)入db.js文件目錄
$ json-server --watch db.json #啟動(dòng)監(jiān)聽(tīng)服務(wù),當(dāng)然也可以監(jiān)聽(tīng)js,json屈溉，text抬探，md等文本文件
如果成功會(huì)出現(xiàn):
\{^_^}/ hi!
{xxx: 'xxx'}
Home
http://localhost:3000
json-server啟動(dòng)默認(rèn)端口為3000；
這個(gè)時(shí)候訪問(wèn) http://localhost:3000/db可以查看所定義的全部數(shù)據(jù)小压。
3.2 使用http-server搭建靜態(tài)服務(wù)器
1.安裝http-server
npm install http-server -g
2.啟動(dòng)
http-server -a 127.0.0.1 #默認(rèn)端口8080
http-server -a 127.0.0.1 -p 9999 #指定端口9999
更多：https://www.npmjs.com/package/http-server
3.2 ohana
ohana 是一個(gè)返回模擬 json 數(shù)據(jù)的 node http 服務(wù)器怠益，默認(rèn)集成了 mockjs 生成動(dòng)態(tài)的 json 數(shù)據(jù)，支持 POST, GET, PUT, DELETE 四種請(qǐng)求烤咧。
特點(diǎn)：
使用 mockjs 生成 json 數(shù)據(jù)
支持路由規(guī)則
-
可跨域訪問(wèn)
如何使用：
作者主頁(yè)http://blog.allenice233.com/2014/12/01/ohana-node-server/
常用web服務(wù)器框架
開(kāi)源項(xiàng)目：
二抢呆、模擬數(shù)據(jù)生成
1.常用node.js數(shù)據(jù)模擬庫(kù)
2.生成模擬 JSON 在線工具:
3.JSON API 在線模擬工具:
-
?
商業(yè)化方案
代理服務(wù)器
- 使用 charles作為代理服務(wù)器
- 使用代理服務(wù)器的 map（映射）& rewrite（重寫(xiě)）功能
示例代碼：
mock.js 生成模擬數(shù)據(jù)抱虐，其它如json-server恳邀，koa，express等直接引用生成的數(shù)據(jù)就行
// 使用 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());//轉(zhuǎn)換為json字符格式,在服務(wù)器端直接解析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');//引入模擬數(shù)據(jù)js文件
// 如果你要用json-server的話儿奶，就需要export這個(gè)生成fake data的function
module.exports = function() {
// var jsonData = JSON.stringify(generateCustomers2());//轉(zhuǎn)換為json字符格式,在服務(wù)器端直接解析req.body
return customUser.mockJson3();
}
運(yùn)行服務(wù) json-server --watch jsonserverMockAPI.js
使用express模擬http server
// 引入 `express` 模塊
var express = require('express');
// 調(diào)用 express 實(shí)例
var app = express();
var customUser = require('./mock_users.js');//引入模擬數(shù)據(jù)js文件
//console.log( '生成模擬數(shù)據(jù)\n' + customUser.mockJson());
var jsonData1 = customUser.mockJson();//轉(zhuǎn)換為json字符格式,在服務(wù)器端直接解析req.body
// app 本身有很多方法，其中包括最常用的 get、post瓤鼻、put/patch贤重、delete茬祷，在這里我們調(diào)用其中的 get 方法并蝗，為我們的 `/` 路徑指定一個(gè) handler 函數(shù)。
// req和res是reques和response的縮寫(xiě)
var jsonData = customUser.mockJson2();//轉(zhuǎn)換為json字符格式,在服務(wù)器端直接解析req.body
app.get('/', function (req, res) {
res.contentType('json');//返回的數(shù)據(jù)類型
res.send(jsonData);//給客戶端返回一個(gè)json格式的數(shù)據(jù)
res.end();
});
// 監(jiān)聽(tīng)本地的 3000 端口
app.listen(3000, function () {
console.log('監(jiān)聽(tīng)3000端口');
});
使用koa模擬http server
//保存為如：KoaMockAPI001.js
//使用教程 https://cnodejs.org/topic/5709959abc564eaf3c6a48c8
var customUser = require('./mock_users.js');//引入模擬數(shù)據(jù)js文件
console.log( '生成模擬數(shù)據(jù)\n' + customUser.mockJson());
var Koa = require('koa');
var app = new Koa();
// 此處開(kāi)始堆疊各種中間件
//...
// response
app.use(ctx => {
ctx.body = customUser.mockJson();
});
app.listen(3000);
如何自動(dòng)化
可以用如nodemon 去啟動(dòng)你的 express
https://github.com/remy/nodemon
nodemon app.js
模擬數(shù)據(jù)演示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 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>
<!--創(chuàng)建超級(jí)鏈接-->
<div>模擬數(shù)據(jù)： <a target="_blank">http://mockjs.com/</a></div>
<div>生成JSON API： <a target="_blank">http://www.jsonohyeah.com/</a></div>
<div><h4 id="mockjs">mockjs+jsonohyeah模擬接口數(shù)據(jù)</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 的值是一個(gè)數(shù)組，其中含有 1 到 n 個(gè)元素
'result|1-20': [{
// 屬性 id 是一個(gè)自增數(shù)最盅，起始值為 1起惕，每次增 1
'id|+1': 1,
'title|1-6': '我是標(biāo)題 ', //5x6 30字以內(nèi)的標(biāo)題
"content" : "@cparagraph()", //模擬文本
"date": "@date('yyyy-MM-dd')",//模擬時(shí)間
"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
);
// 輸出結(jié)果
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>模擬規(guī)則（可修改）</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">模擬結(jié)果</h4>
<button id="button_id">生成模擬數(shù)據(jù)</button>
<pre><code class="json" id="result">#點(diǎn)擊按鈕生成模擬數(shù)據(jù)#</code></pre>
<script>
//調(diào)用mock方法模擬數(shù)據(jù)
$("#button_id").click(function(){
mockreloadPage();
});
</script>
</body>
</html>
