[ 紀錄 ] 實戰練習 - 部落格 (以 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

使用 Gazebo 模擬器控制機器人建立 2D 地圖

使用 Gazebo 模擬器控制機器人建立 2D 地圖

Custom Hook 來自己寫一個  hook 吧!

Custom Hook 來自己寫一個 hook 吧!

JavaScript 五四三 Ep.06 Array.prototype.includes()

JavaScript 五四三 Ep.06 Array.prototype.includes()


Comments