W18_後端框架 Express + Sequelize


Posted by Christy on 2022-02-17

本文為 Lidemy 程式導師計畫第十八週學習內容,主要使用後端框架做出一個餐廳網站,以下記錄整個實作過程。

零、讀書計畫

1. 作業概覽

移植 W6-W8 的餐廳網站到 Express 上面,加上後台,有抽獎跟管理菜單的頁面,本週推薦部署到自己買的主機上面。

hw1: 用 Express 打造一個餐廳網站還有餐廳後台,但應該會有大部分的資源都可以沿用之前的作業。

hw2: 餐廳網站 menu 頁面

前台新增「我要點餐」那頁,包含以下:

  1. 名稱

  2. 價格

  3. 圖片

後台新增可以管理餐點品項的頁面,包含以下功能:

  1. 新增品項

  2. 刪除品項

  3. 編輯品項

上傳圖片的部分請參考 week17 的延伸挑戰題,如果上傳圖片不好做的話,也可以改成填入圖片網址就好。

hw3: 餐廳網站常見問題後台

做個後台可以管理常見問題列表,然後在前台的部分動態載入這些資料。

  1. 身為一個管理員,我希望常見問題的內容可以儲存在資料庫,這樣我才能方便修改

  2. 身為一個管理員,我希望管理後台可以管理常見問題,這樣我才能方便修改

  3. 身為一個管理員,我希望在後台可以新增常見問題,會有標題跟內容以及順序

  4. 身為一個管理員,我希望在後台可以編輯常見問題,包括標題跟內容以及順序

  5. 身為一個管理員,我希望在後台可以刪除常見問題

  6. 身為一個管理員,我希望前端頁面的資料是從後端拿的,這樣才能跟後台連動

hw4: 簡答題

  1. 什麼是反向代理(Reverse proxy)?

  2. 什麼是 ORM?

  3. 什麼是 N+1 problem?

2. 預計花費時間: 50 小時

開始時間:2/4,結束時間:2/11

實際時間:2/9,結束時間:2/17,總共九天,大概四十小時

hw1: 三天 21 hrs

hw2: 一天 7hrs

hw3: 一天 7hrs

我覺得這個網站可以變成一個作業就好,大概三四天做完差不多?

hw4: 1hr -> 差不多一小時,除了 N+1 problem 花了一點時間理解以外,其他的題目在影片中可以找到解答。

部署:一天 7hrs -> 才怪,部署大魔王就在這裡,就算是十四週部署過了,物換星移一切還是不一樣,卡卡卡爆了,抱著棉被痛哭了三天,最後真的只好先放著。

W18 直播檢討 79 mins

3. 讀書行動

預計實作事項:

實際流程:

MTR 導讀 — W18

W18 沒有新的東西,基本上跟 W17 一樣,就是在多練習一次,但如果說要加上挑戰題跟超級挑戰題,可以練習「購物車」、「訂單以及 email 通知」、「結帳串接金流」的部分。

W18 作業介紹裡面,有說到 API,用 res.json() 就可以拿到 json 格式的資料,奇怪,那我在 W17 的時候怎麼會忽略了呢,哎呀呀。

看 W18 直播檢討

實作需要的時間

4. 自我檢測

  • P1 我能夠從頭把一個網站獨立建起來

  • P1 我知道如何部署 Node.js 的網站到自己的主機

  • P2 我知道如何使用 Nginx

  • P2 我知道如何使用 PM2

5. 學前關鍵字:Nginx、PM2、上傳圖片、反向代理(Reverse proxy)、N+1 problem

一、筆記內容

1. 用 Express & Sequelize 做一個餐廳網站

2. PM2、Nginx & Reverse Proxy Server

3. AWS EC2 + LAMPP + Nodejs + Nginx 部署失敗過程紀錄

4. 反向代理(Reverse proxy)、ORM 及 N+1 problem 介紹

二、W18 直播檢討

W18_直播檢討

三、心得與心態調整

拖延症又犯了,好像一直不想開始,所以不想開始的原因是什麼?

是覺得作業很難,還是累了?我也不知道,總之騙自己沒有要開始做作業,我只是要規劃餐廳路由而已。結果這樣就真的開始了,恩騙自己真好,哈哈哈。

還是覺得學到很多東西,就算是 AWS 沒有部署成功,但是我紮實的知道了環境變數要怎麼設定,也重新複習了一次部署的流程。

四、其他

如何在 Mac 上印出文字版的資料夾結構

利用 dotenv 套件,設置在 Node.js 裡面的環境變數

Debug: Aws connection problem

相見恨晚的 chrome 插件 — Octotree - GitHub code tree

Git error -> fatal: the remote end hung up unexpectedly










Related Posts

Hoisting

Hoisting

邪魔歪道還是苦口良藥?Functional CSS 經驗分享

邪魔歪道還是苦口良藥?Functional CSS 經驗分享

拜託,請你愛用 console.log

拜託,請你愛用 console.log


Comments