3-6.Angular 入門教學 - JsonServer - 模擬一個真實後端伺服器

影片講解

如果在開發上，想要快速建立一個真實後端來測試

又或者實務開發上負責後端的工程師還沒把後端寫出來的時候

你前端的開發該怎麼辦呢？

雖然我個人是沒這個困擾，因為我全端XD

但我還是來介紹一下JsonServer

這是一個可以真真實實的模擬出一個restful風格的API後端應用套件

用法也相當簡單，我們就繼續看下去如何使用

首先當然nodejs要裝好，但都到了這邊，相信大家都已經裝好了

接下來我們打開powershell，下一行指令

npm install -g json-server

如圖，就順利裝好了

接著你要先創一個你想要的後端的那個api的json資料檔案，以我們的範例會如下

建一個db.json

{
  "todo2_16": [
    {
      "TodoId": "012a5b34-cab8-47a0-823c-e786ad231128",
      "Thing": "玩遊戲",
      "Status": true,
      "CreateTime": "2022-09-03T00:00:00"
    },
    {
      "TodoId": "9e689784-8719-4d86-a0cf-785623622525",
      "Thing": "去看書",
      "Status": false,
      "CreateTime": "2022-09-04T00:00:00"
    },
    {
      "TodoId": "42ea7756-24dd-476c-ba58-4ceabe23d358",
      "Thing": "去上課",
      "Status": false,
      "CreateTime": "2022-09-05T00:00:00"
    }
  ]
}

接著到該檔案的資料夾下一個指令，後面的id是指定我主key是哪一個，這一定要指定才能正常運作

那這邊我們外加了delay 1000代表會故意慢一秒，這樣才能更真實反應與伺服器傳輸延遲時間的情況

json-server --watch db.json --id TodoId --delay 1000

因為這個伺服器沒有api開頭，所以我們這個proxy.conf.json設定檔要改一下

{
    "/api": {
        "target": "http://localhost:3000",
        "secure": false,
        "changeOrigin": true,
        "pathRewrite": {
            "^/api": ""
        }
    }
}

增加pathRewrite部分，就是說遇到api開頭的轉換後我們就把它去除

例如讀http://localhost:4200/api/todo2_16其實會變成讀http://localhost:3000/todo2_16這樣

如此我們主程式的寫法就不需要更動

好~那剩下的基本上我們原有的程式都不用改動，設定沒有問題的話，程式CRUD應該都能正確運作

想看更多的實際操作，可以看影片