老爸的私房錢


為何會選擇這個專案?

此專案涵蓋前端+後端網頁開發,綜括本人至今所學的網頁開發技術,因此想透過介紹此專案回顧所學。

前端: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 的官方文件,以更加熟識資料操作。







你可能感興趣的文章

23. Template Method

23. Template Method

DNS, Lock, NoSQL vs SQL and ACID

DNS, Lock, NoSQL vs SQL and ACID

Guided Policy Search 環境安裝

Guided Policy Search 環境安裝






留言討論