[ 紀錄 ] 實戰練習 - 抽獎程式 (以 Express 實作後端 API )

此次紀錄利用 Express 實作後端 API 系統

確認需求

實作出一個 API 能夠：

• 回傳 抽獎品項的名字、圖片還有說明

實作出一個後台管理系統，能夠：

• 一個抽獎頁面可以管理獎項
• 新增抽獎的品項（名字、圖片網址以及說明）以及機率
• 編輯抽獎的品項（名字、圖片網址以及說明）以及機率
• 刪除抽獎的品項

在前台能夠抽出我在後台所設定的獎項

資料庫規劃

user :
(會員只會有管理員一人，不開放外人註冊，所以不加上權限功能)

• id ：會員 id
• username ： 會員帳號 (獨一)
• password ： 會員密碼
• created_at ： 註冊時間

prize:

• id
• name
• imageURL
• description
• probability
• is_deleted

檔案路由規劃

baseURL: 給前端串接的 api

後台管理系統頁面：

• 新增品項：
  • 導到新增品項頁面： /add
• 編輯品項：
  • 導到編輯品項頁面： /update
• 刪除品項：
  • 執行刪除品項程式： /handleDelete

新增品項頁面：

• 執行新增品項程式： /handleAdd

編輯品項頁面：

• 執行編輯品項程式： /handleUpdate

開發流程規劃

1. 安裝 Express
   • 建立 models, views, controllers, public 四個資料夾
   • 將 app 初步建立起來(能夠 listen 指定的 port)
2. 登入頁面切版
   • index.ejs
   • 首頁就是登入頁面
3. 後台管理頁面切版
   • 完成 backstage.ejs
4. 連線資料庫
   • 安裝 sequelize cli
   • 設定資料庫連線
   • 建立 table
5. 建立顯示品項功能
   • 設定好 '/' 的路由
   • 建立 controller 從資料庫取得文章資料並 render 於首頁
6. 建立新增品項功能
   • add_prize.ejs 切版
   • 設定好 '/add' 路由
   • 建立 controller 將資料寫入資料庫並將結果 render 於首頁
7. 建立編輯品項功能
   • update_prize.ejs 切版
   • 設定好 '/update' 路由
   • 建立 controller 將資料寫入資料庫並將結果 render 於首頁
8. 建立刪除品項功能
   • 設定好 '/delete' 路由
   • 建立 controller 將資料寫入資料庫並將結果 render 於首頁
9. 建立 API 系統
   • 設定根據指定機率，回傳對應的 response
10. 建立會員登入系統
    • 安裝 express-session
    • 安裝 connect-flash
    • 安裝 bcrypt
    • 設定登入機制(session flash)
    • 處理「新增、編輯、刪除品項」的權限設定
11. 設定前端
    • 串接 API 並將回傳的 response 顯示於前端頁面