讓電腦裡有兩個假伺服器,一個是 db, 一個是網站專案,
來模擬網站與伺服器要求資料的互動。
db 是一個 json-server
專案,用來發送 api ,
可模擬資料的新增刪除... (刪除的是 cache 的資料)。
這裡的 api 資料是用 mockjs
做出來的。
json server
mock js
mockjs 提供很多可靈活設定的「模板」,來產生假資料。 如日期格式、亂數、姓名字串...
需「全域」安裝 json-server
npm install json-server -g
然後再建立一個 json-server 專案。
建立 e.g. db.json
,內容為你的 "回應資料" 格式。
然后命令列直接执行:
json-server db.json -w -p 3000
db.json
为 json-server 启动服务器数据模板,-w
即 "watch",监控 db.json 的更改,-p 3000
即 port 3000,服务器监听的端口 。浏览器访问 json-server 服务器(上例 http://localhost:3000 ), 可以看到所有数据接口列表。
當 ajax 要求 url 時,mockjs 會判斷該 url 它是否認得, 若認得,就會截斷要求、並吐回 mockJs 的資料。
可以自由應用情境,如
安裝(引入資源方式):
使用 npm 下載:
npm install mockjs
或 html 直接引入 mockjs:
<script src="http://mockjs.com/dist/mock.js"></script>
靜態使用: 直接把 mockjs 模板寫在 function 中,
配合伺服器: 因 ajax 或 fetch 需要得到伺服器端「回應」, 故需要將 mockjs 整合到伺服器,使伺服器認得 mockjs, 得以操作它、使 mockjs 產生 json 檔並回應出去。
在伺服器專案,建立一 .js
檔 e.g. myMock.js
:
let mockjs = require('mockjs');
。mock({...})
,可將模板存在變數中。參考資源:
使用 ajax 或 fetch,是不能直接獲取本地端的數據的, 需要將 mockjs 整合到伺服器、使伺服器可以操作它。
AJAX 需要伺服器端回應,這種情況下,才會有本機不能執行特定網頁的問題。
ajax 会对请求进行分析, 如果是静态页面,请求地址均为
file:////
,相应採取本地端策略。 对于 chrome,则是出现 XMLHTTPRequest 无法访问的问题。瀏覽器在設計這個物件之初,就已經考量到安全性的問題, 因而限制 XMLHttpRequest 請求的 "資源" 與 "呼叫的腳本程式", 兩者必須在同一個網域內,不能存取網域外的資源,藉此降低風險。
在 server/ 目录下新建 mock.js 文件,執行:
json-server mock.js -w -p 3000
json-server 可单独启动 mock.js 文件, 以及启动 db.json 静态配置的数据源。
若当我们想在專案中使用 json-server 的 api 、自定义啟動伺服器时, json-server 是安装在本機的當前專案: 此時 json-server 需要用 node script 命令来启动,否则报错。
而在此「自定义的啟動伺服器」,都只是 js : 建立一個 .js ,其中設定去操作 json-server 的 api 伺服器。 e.g. 目录下新建 index.js,用來「使用 json-server 的 api 」启动服务器。 启动 index.js:
node index.js -w -p 3000
將此命令整合在專案中。
其他資訊 (目錄翻譯)