老爸的私房錢


為何會選擇這個專案?

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

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







Related Posts

[ JavaScript 11 ] 無敵重要的 Immutable 觀念

[ JavaScript 11 ] 無敵重要的 Immutable 觀念

新手疑難雜症 Q & A (持續更新中)

新手疑難雜症 Q & A (持續更新中)

C++ 教學(一) 基本介紹 & Hello World

C++ 教學(一) 基本介紹 & Hello World






Comments