iT邦幫忙

2021 iThome 鐵人賽

DAY 2
1
Modern Web

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

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

  • 分享至 

  • xImage
  •  

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

004

哈囉大閒人,妳在忙嗎?大閒人?

(你好像認為我們現在很閒,都在玩?死老百姓就是不懂我們的辛苦啊...)

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

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

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

(答!不是!附帶一問,你以為真的有人可以睡一星期不吃不喝嗎?)

聽著都不太合理,所以...我死了嗎?

(沒有。但如果這次的行動你失敗了,那全人類就滅亡了。)

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

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

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

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

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

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

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

(因為我們也要證明:人類不是廢物。只要有心,人類也可以對神有幫助。你,是個廢物。)

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

(少年啊——成為神話吧!)

我的腳怎麼不由自主地跑起來了,這個響起來的主題曲是怎麼回事啊~~~
https://ithelp.ithome.com.tw/upload/images/20210917/20128395klikv3rc6i.png
〈所有動畫片頭會用到的梗〉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 指令,就可以在本機上運行這個專案,目前看到畫面會是這樣:
https://ithelp.ithome.com.tw/upload/images/20210917/20128395SUZ9tZV9wx.png

使用 JSON-server

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

  1. 讓我們進入專案目錄並且安裝 JSON-server:
npm install json-server --save 
  1. 到 src 資料夾下新增 proxy.config.json 檔案:
{
    "/api": {
        "target": "http://localhost:3000/",
        "secure": false,
        "changeOrigin": true,
        "pathRewrite": { "^/api" : "" }
    }
}
  1. 將其配置到 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"
},
  1. 配置 package.json 中的 scripts 指令 "api"
"scripts": {
    "ng": "ng",
    "start": "ng serve",
    (前略)
    "api": "json-server db.json --no-core=true --watch db.json"
  },
  1. 只要輸入 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 專案。

參考資源


上一篇
第 1 天 大閒人降生
下一篇
第 3 天 「速速前呂布奉先!」|NgModule、HttpClientModule、新增元件
系列文
關於我作夢變成工程師這檔事(Angular 篇)14
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言