[ 紀錄 ] 實戰練習 - 部落格 (以 Express 實作前端 + 後端)


Posted by krebikshaw on 2020-10-13

此次改寫「部落格」,是將原先以 PHP 實作的版本改寫成 Express 版本

改寫流程紀錄

  1. 安裝 Express
    • 建立 models, views, controllers, public 四個資料夾
    • 將 app 初步建立起來(能夠 listen 指定的 port)
  2. 首頁切版
    • 把 template 資料夾移至 views 底下
    • 將 css 檔案移至 public 資料夾底下,再引用至 index.ejs
    • 將 image 移至 public 資料夾底下
  3. 連線資料庫
    • 安裝 sequelize cli
    • 設定資料庫連線
    • 建立 table
  4. 建立顯示文章功能
    • 設定好 '/' 的路由
    • 建立 controller 從資料庫取得文章資料並 render 於首頁
  5. 建立新增文章功能
    • add_post.ejs 切版
    • 設定好 '/add' 路由
    • 建立 controller 將資料寫入資料庫並將結果 render 於首頁
  6. 建立顯示「文章類別」功能
    • 撈取 category 的資料顯示於 add_post 的下拉選單中
  7. 建立顯示單一文章功能
    • post.ejs 切版
    • 處理文章 id
  8. 建立登入登出功能
    • login.ejs 切版
    • 安裝 express-session
    • 安裝 connect-flash
    • 安裝 bcrypt
    • 設定登入機制(session flash)
    • 處理「發佈文章」的權限設定
    • (在 localhost 測試的時候 cookie: { secure: true } 要記得拿掉,不然會 session 怎麼設都會失效)
  9. 建立編輯文章功能
    • updata_post.ejs 切版
    • 設定 controller
  10. 建立刪除文章功能
    • 設定 controller

未完成部分

此部分等未來有空再回來改寫

  1. 文章分類列表
  2. 文章全文列表
  3. 分頁功能
  4. 文章後台管理系統
  5. 文章類別後台管理系統

#Express







Related Posts

CSS-[網頁設計準則]-#1. Typography 文字排版

CSS-[網頁設計準則]-#1. Typography 文字排版

17. Iterator

17. Iterator

[HTML BTS] 冒泡? 捕捉?Capturing & Bubbling in DOM Event

[HTML BTS] 冒泡? 捕捉?Capturing & Bubbling in DOM Event


Comments