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


Posted by krebikshaw on 2020-10-13

此次紀錄利用 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 顯示於前端頁面

#Express







Related Posts

Week1: CLI 和 Git 筆記

Week1: CLI 和 Git 筆記

那些年不懂的JS - Event Loop

那些年不懂的JS - Event Loop

從 React 原始碼看 keyPress 與 keyDown 事件

從 React 原始碼看 keyPress 與 keyDown 事件


Comments