為何會選擇這個專案?
此專案涵蓋前端+後端網頁開發,綜括本人至今所學的網頁開發技術,因此想透過介紹此專案回顧所學。
前端:HTML, CSS, Bootstrap
後端:Node.js, Express.js, MongoDB
功能: 瀏覽 web 介面, CRUD 資料, LOGIN 功能
使用了什麼技術?
【前端】
運用 Bootstrap 元件排版 index, new, edit, login, register 等頁面,並著重版面一制性
- Navbar: 統一在頁面上方載入 Navbar 放置網站名稱,及登入/登出快捷鈕
- Containers: 頁面主體採用 Container 包覆,並接續使用 row, col 排版
- Forms: 表單使用 Forms 元素,修改文字/按鈕樣式以符合整體版面設計
【後端】
- Node.js: 此專案執行環境為 Node.js,及選用 npm 套件們
- Express.js: 搭配 Express.js 框架來開發 Web App
- Express-Handlebars: 使用樣版引擎解析 html & css 渲染成網頁,並可將後端資料傳給前端使用
- MongoDB: 將資料存取在 MongoDB 資料庫
- Mongoose: 透過 Mongoose (ODM 套件) 來連接並操作 MongoDB
- body-parser: 解讀 request 表單資料的請求,存放到 req.body 做為參數後續使用
- method-override: 使用 method-override 套件以符合 RESTful 風格的網址設計
- express-session: 擷取 cookie 資訊、生成 session,並把 session 資訊存放在伺服器端
- passport: 載入 passport 認證帳號密碼,提供使用者登入使用
- bcrypt.js: 將使用者登入之密碼,透過 bcrypt.js 雜湊後,再存入資料庫
哪部分你相對能掌握?哪裡花了最多時間?
這份專案需要處理多筆的資料關聯,因此花了較多時間思考Router該如何處理,但過程中也學習到更多 MongoDB 的操作方法。
而在建立 CRUD 操作時相對較能掌握,在撰寫程式碼時,遵守 RESTful 風格的網址設計,就能減少出錯的機率。
過程中碰到什麼困難?又如何克服?
1. 日期無法顯示正確格式
在寫index page時,發現日期無法顯示正確格式,查找資料發現 Date.prototype.toISOString(),因此在 handlebars-helpers 放入 dateFormate function 來轉換呈現的日期變數
2. 網頁UI的設計
在網頁UI設計時花費不少時間,原本是使用者時,不會細看網頁上的文字,功能排版,當成為設計者時,為了使用者體驗,網頁上每放一個東西,包括排版,文字敘述,都必須再三確認確保能讓使用者了解如何使用,避免詞不達意。
過程中你有對哪個技術有特別深刻的學習?
因爲有多個資料表,所以在製作 Model Schema 時、及撰寫 CRUD Routes 時,都需要更謹慎確認資料,也因此發現 Mongoose 提供了眾多使用語法,打算繼續研究 Mongoose 的官方文件,以更加熟識資料操作。