第 2 天諸神早安晨之美｜建立 Angular 專案、使用 JSON-server

2021 iThome 鐵人賽

DAY 2

Modern Web

關於我作夢變成工程師這檔事（Angular 篇）系列第 2 篇

13th鐵人賽 angular json-server

tomasysh

2021-09-17 08:04:04

1150 瀏覽

今天我們將建構專案開發環境，除了 Angular 之外，我們也將在專案中配置 json-server 這個套件，來模擬與後台的互動。

004

哈囉大閒人，妳在忙嗎？大閒人？

（你好像認為我們現在很閒，都在玩？死老百姓就是不懂我們的辛苦啊...）

那妳突然消失一晚上是怎麼了？我不是要展開 Angular 英雄之旅了嗎？

（所以我才到處去搜集英靈，看來有必要讓你知道，你現在的一舉一動都關係著人類存亡的命運。）

我是不太想吐槽啦，但我先確認一下，我不是只是在睡覺而已嗎？

（答！不是！附帶一問，你以為真的有人可以睡一星期不吃不喝嗎？）

聽著都不太合理，所以...我死了嗎？

（沒有。但如果這次的行動你失敗了，那全人類就滅亡了。）

這個聽著也不太合理，但畢竟我都可以睡這麼久了，人類滅亡好像也是有可能的，妳要不展開說說吧。

（每千年諸神就會召開一次人類滅亡會議...）

等等，妳不會是要說，如果諸神覺得人類太廢又邪惡就要滅亡人類吧。

（就是這樣喵。但現在，我們已經發動了諸神早安，所以會議目前暫時中止了。諸神早安是人與神一對一單挑，如果在 13 場對決中，人類取得了 7 勝，那就可以繼續存活千年。）

嗯...我是已經猜到妳找了哪些人類啦，但妳幹嘛來找我，我姓湯不姓葉...十個也打不了一個啊。

（答！除了人類英靈要對付神明之外，我們還需要工程師來打造英靈殿，強化英靈，否則現在的人類是不可能擊敗神的。）

這倒是挺合理的啦，但為什麼是找我，太奇怪了吧。

（因為我們也要證明：人類不是廢物。只要有心，人類也可以對神有幫助。你，是個廢物。）

這也是挺合理...等等，我現在龜懶趴火。

（少年啊——成為神話吧！）

我的腳怎麼不由自主地跑起來了，這個響起來的主題曲是怎麼回事啊～～～

〈所有動畫片頭會用到的梗〉Youtube 影片連結

開發環境建置

首先，請參考保哥的〈Angular 12 開發環境說明〉，不論作業系統是 Windows 或 Mac OS X，這篇文章都手把手地帶我們完整地配置開發環境，當然也包括了 Angular CLI。

在編輯器方面，我選擇使用 Visual Studio Code，並強烈推薦安裝保哥的 Angular Extension Pack，能夠有效地幫助 Angular 專案的開發。

新增專案

在想要生成專案資料夾的路徑下，使用 ng new { projectName } 就可以新增 { projectName } 專案資料夾：

ng new angular-tour-of-heroes

它會詢問你想要的配置，可以隨喜好選擇，我這邊是直接選擇預設值（Enter 鍵連發），包含：

Would you like to add Angular routing? No // 是否要配置路由機制，這裏我們之後會手動配置。
Which stylesheet format would you like to use? CSS // 基本上我們不會寫樣式，怎麼選都可以。

此時，如果進入資料夾，輸入 ng serve 指令，就可以在本機上運行這個專案，目前看到畫面會是這樣：

使用 JSON-server

現在我們將在 Angular 專案中使用 JSON-server 來模擬與後端的互動行為（增刪改查資料）。

讓我們進入專案目錄並且安裝 JSON-server：

npm install json-server --save

到 src 資料夾下新增 proxy.config.json 檔案：

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

將其配置到 angular.json 檔案中（新增"proxyConfig"）：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "configurations": {
    "production": {
      "browserTarget": "angular-tour-of-heroes:build:production"
    },
    "development": {
      "browserTarget": "angular-tour-of-heroes:build:development",
      "proxyConfig": "src/proxy.config.json"
    }
  },
  "defaultConfiguration": "development"
},

配置 package.json 中的 scripts 指令 "api"：

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    (前略)
    "api": "json-server db.json --no-core=true --watch db.json"
  },

只要輸入 npm run api 就會產生 db.json 檔案，這就是用來儲存 mock 資料的地方，之後我們都是對它進行增刪改查。當自動產生這個檔案時，裡面預設會有下列資料：

{
    "posts": [
      {
        "id": 1,
        "title": "json-server",
        "author": "typicode"
      }
    ],
    "comments": [
      {
        "id": 1,
        "body": "some comment",
        "postId": 1
      }
    ],
    "profile": {
      "name": "typicode"
    }
  }

將這些資料刪掉後，換成下面這樣：

{
  "heros": [
    {
      "id": 1,
      "name": "呂布奉先"
    },
    {
      "id": 2,
      "name": "亞當"
    },
    {
      "id": 3,
      "name": "佐佐木小次郎"
    },
    {
      "id": 4,
      "name": "開膛手傑克"
    },
    {
      "id": 5,
      "name": "雷電為右衛門"
    },
    {
      "id": 6,
      "name": "始皇帝"
    },
    {
      "id": 7,
      "name": "列奧尼達王"
    },
    {
      "id": 8,
      "name": "尼古拉·特斯拉"
    },
    {
      "id": 9,
      "name": "沖田總司"
    },
    {
      "id": 10,
      "name": "格里戈里·拉斯普丁"
    },
    {
      "id": 11,
      "name": "米歇爾·諾斯特拉達穆斯"
    },
    {
      "id": 12,
      "name": "席摩·海赫"
    },
    {
      "id": 13,
      "name": "坂田金時"
    }
  ]
}

這樣，弒神 13 人就隨時供我們驅策啦。別問這個名單怎麼開出來的，很可怕。
現在我們的 Angular 專案環境已建立起來並加上模擬的後台了，日後起專案時就要開兩個 terminal，一個輸入 npm run api 來跑 mock db，另外一個就是 ng serve 來跑 Angular 專案。