mockJs and jsonServer

MockJs & JsonServer

目的

讓電腦裡有兩個假伺服器,一個是 db, 一個是網站專案, 來模擬網站與伺服器要求資料的互動。 db 是一個 json-server 專案,用來發送 api , 可模擬資料的新增刪除... (刪除的是 cache 的資料)。 這裡的 api 資料是用 mockjs 做出來的。

json server

GitHub json-server

  • 一個虛擬伺服器,可模擬操作 api (新增、修改、刪除)處理 db 資料。
  • 會將所有資料會合成一個 obj,方便使用管理。
  • 可客製生成「路由」去對應 database 的 json。

mock js

mockjs.com (中文)

mockjs 提供很多可靈活設定的「模板」,來產生假資料。 如日期格式、亂數、姓名字串...


json-server

需「全域」安裝 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 ), 可以看到所有数据接口列表。

mockJs

當 ajax 要求 url 時,mockjs 會判斷該 url 它是否認得, 若認得,就會截斷要求、並吐回 mockJs 的資料。

可以自由應用情境,如

  1. 直接在靜態檔案中使用 mockjs 模板
  2. 在本機伺服器中使用,回應給你假資料。

安裝(引入資源方式):

使用 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

  1. 引入 npm 安裝的 'mockjs':let mockjs = require('mockjs');
  2. 用 mockjs 的模板,建立我們的 json 資料結構: mock({...}),可將模板存在變數中。
  3. 以 mockjs 方法連接設定,連接 "url" 和 "模板", 若 ajax 要求該 url,mockjs 就會截斷、並吐回 mockJs 的 "格式模板" 資料。

參考資源:

mockjs x json-server

使用 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 時

若当我们想在專案中使用 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

將此命令整合在專案中。


其他資訊 (目錄翻譯)

results for ""

    No results matching ""