文、意如
下載：
可用下載回來安裝，也可以使用指令安裝
Mac指令：
brew install --cask mockoon
開啟Mockoon應用程式
一進入畫面就有範例可以參考，按下綠色箭頭就可以使用了
使用瀏覽器測試：輸入http://0.0.0.0:3000/users
快速建立一個api
1.選擇＋按鈕（建立一個router)
2.選擇方法(GET、POST、PUT)等
3.輸入router的名字
4.輸入json資料
5.執行(啟動服務）
6.開啟瀏覽器輸入0.0.0.0:3000/剛取的router名稱
跨域Cors
Headers→add CORS headers
Settings→勾選 Automatically handle OPTIONS pre-flight requests
重啟
windows 版本
1.新增api的名稱
2.寫入要回傳的資訊
3.重新啟動
測試資料JSON格式:
[
"dataYear": "2025",
"busi2cd": 96,
"busiNm": "未分類其他服務業",
"invoiceDonateCnt": 16349,
"dataYm": "202505"
},
{
"dataYear": "2025",
"busi2cd": 12,
"busiNm": "成衣及服飾品製造業",
"invoiceDonateCnt": 850,
"dataYm": "202505"
},
{
"dataYear": "2025",
"busi2cd": 60,
"busiNm": "廣播、電視節目編排及傳播業",
"invoiceDonateCnt": 2238,
"dataYm": "202505"
},
{
"dataYear": "2025",
"busi2cd": 46,
"busiNm": "批發業",
"invoiceDonateCnt": 240733,
"dataYm": "202505"
},
{
"dataYear": "2023",
"busi2cd": 61,
"busiNm": "電信業",
"invoiceDonateCnt": 36550,
"dataYm": "202302"
},
{
"dataYear": "2023",
"busi2cd": 29,
"busiNm": "機械設備製造業",
"invoiceDonateCnt": 141,
"dataYm": "202302"
},
{
"dataYear": "2022",
"busi2cd": 68,
"busiNm": "不動產經營及相關服務業",
"invoiceDonateCnt": 4698,
"dataYm": "202211"
}
]
測試API
網頁讀取api
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<center>
使用mock模擬API<br>
<br>
<table border=1>
<tr>
<td>ID</td>
<td>dataYear</td>
<td>busi2cd</td>
<td>busiNm</td>
</tr>
<tbody id="row">
</tbody>
</table>
</body>
</html>
<script>
$(document).ready(function(){
<!--$("#row").html("<td>123</td>");-->
$.ajax({
url: 'http://localhost:3000/mytest123',
type: "get",
dataType:"json",
success: function (info) {
<!--原本已有的資料再加上去-->
console.log("查詢抓回來的筆數有幾筆");
console.log(info.length);
total_len = info.length;
for(i=0;i<total_len;i++){
$("#row").append(
"<tr>"+
"<td>"+(i+1)+"</td>"+
"<td>"+info[i].dataYear+"</td>"+
"<td>"+info[i].busi2cd+"</td>"+
"<td>"+info[i].busiNm+"</td>"+
"</tr>"
)
}
},
error: function (data) {
console.log("請求失敗");
}
});
});
</script>Yiru@Studio - 關於我 - 意如