Node.js + MongoDB建立最愛球員清單

更新於 發佈於 閱讀時間約 3 分鐘

※ 專案起源

建立一個屬於自己喜愛球員的清單。

※ 成果發表


raw-image
raw-image
raw-image


※ 專案開發環境

  1. 架設 Node.js 伺服器。

原因:為了讓我所使用的程式語言JavaScript ,擁有能夠開發網路應用程式的能力,所以我用Node.js 來架設伺服器。

優點:

  • 有了 Node.js,JavaScript 可以直接建立、讀取、修改和刪除電腦內的檔案,並且能和資料庫連通。
  • Node.js具有網路應用程式需要的功能,例如作為伺服器處理用戶端發出請(request) 並給予回應 (response) 等。
  1. 用 Express.js 進行全端開發。

原因:Express 提供了一個強大的路由系統、豐富的內建中間件、使用模板引擎來動態生成 HTML等優點,讓程式碼更簡潔,開發速度更快速。

優點: 有了「網路框架」 (web framework) 讓我能夠分割負責不同功能的程式碼,以增加每一份檔案的易讀性,也讓程式碼更容易被維護。

  1. 用 MongoDB 資料庫。

原因:

  • 現階段使用者最多、生態系也最完整的文件資料庫。
  • 用 Express.js 開發應用程式時,會希望能直接用 JavaScript 操作資料庫,而不需要另外撰寫 SQL。

※ 專案開發技術

  • 使用 Express handlebars,為球員清單做出佈局和局部樣板的畫面。
  •  套入 Bootstrap在球員清單 的 HTML。
  • 將Handlebars 的語法跟原有的 HTML 語法與格式配合,顯示動態資料:圖片連結 - player.image 是放在 src = "{{this.images.index}} " 裡面
  • 在 handlebars 樣板中使用 each 迴圈,呈現多筆球員資料。
  • 讀取 JSON 檔案 ,將外部資料帶入樣板引擎中,讓網頁呈現出 50位球員資料。
  • 使用 :params 來取得網址資訊的路由,建立動態路由讓使用者可以在瀏覽器畫面上看到自己在網址列所輸入的內容。
  • 透過 req.query 取得網址 ? 後方的查詢字串(queryString)
  • 運用CRUD 功能,呈現瀏覽所有或特定球員資料,新增、修改和刪除球員資料。
  • 依照RESTful 風格優化路由設計。
  • 設定 express-session,來判斷使用者的登入狀態。
  • 設定 Passport.js,完成登入功能。
  • 運用middleware驗證登入狀態。
  • 使用 connect-flash 來建立快閃訊息 (flash message),作為提示使用者。
  • 使用 bcrypt 處理密碼,讓使用者在登入和註冊時輸入的密碼。
  • 整合 Facebook 第三方登入。
  • Promise.all 語法結構重構種子資料 。

※ 專案功能

使用者可以在首頁看到所有球員的簡單資料:

1. 球員照片

2. 球員名稱

3. 球員背號

使用者可以再點進去看球員的詳細資訊:

1. 英文名字

2. 職位名稱

3. 身高

4. 體重

5. 學歷

6. 出生年月日

使用者可以透過搜尋球員名稱來找到特定的球員

使用者可以透過搜尋職位名稱來找到特定的球員

使用者可以新增一位球員

使用者可以瀏覽一位球員的詳細資訊

使用者可以瀏覽全部所有球員

使用者可以修改一位球員的資訊

使用者可以刪除一位球員

使用者可以註冊

使用者可以登入

使用者可以透過Facebook Login 直接登入

留言
avatar-img
留言分享你的想法!
avatar-img
奧莉薇走在成為後端工程師之路上
18會員
141內容數
全端網頁開發專業知識分享
2025/04/26
※ 場景: 即時聊天應用: 設計一個支持多房間功能的即時聊天平台,像 WhatsApp、LINE或Facebook Messenger,提供文字、語音、視訊聊天功能,方便管理群組聊天。 功能亮點:加入特別功能,例如可加入多房間功能、使用者名單、表情符號支持、文件分享或訊息已讀未讀狀態。 展示
2025/04/26
※ 場景: 即時聊天應用: 設計一個支持多房間功能的即時聊天平台,像 WhatsApp、LINE或Facebook Messenger,提供文字、語音、視訊聊天功能,方便管理群組聊天。 功能亮點:加入特別功能,例如可加入多房間功能、使用者名單、表情符號支持、文件分享或訊息已讀未讀狀態。 展示
2025/04/26
※ 先建立基本的express後端服務: 1.建立新資料夾:Socket mkdir socket 2.進入資料夾:Socket cd ​bsocket 3. 安裝 Experss 到專案中 npm init -y //初始化專案,建立 package.json 檔 npm insta
Thumbnail
2025/04/26
※ 先建立基本的express後端服務: 1.建立新資料夾:Socket mkdir socket 2.進入資料夾:Socket cd ​bsocket 3. 安裝 Experss 到專案中 npm init -y //初始化專案,建立 package.json 檔 npm insta
Thumbnail
2025/04/10
※ 什麼是 Socket.io:一個基於傳統 WebSocket API 之上的框架。 ※ Socket.io常用功能: Custom Events:在 Socket.io 中,開發者可以創建自己的事件來處理特定的功能或需求。 Rooms:分組的功能。每個連接的用戶(或稱為 socket)可
Thumbnail
2025/04/10
※ 什麼是 Socket.io:一個基於傳統 WebSocket API 之上的框架。 ※ Socket.io常用功能: Custom Events:在 Socket.io 中,開發者可以創建自己的事件來處理特定的功能或需求。 Rooms:分組的功能。每個連接的用戶(或稱為 socket)可
Thumbnail
看更多
你可能也想看
Thumbnail
沙龍一直是創作與交流的重要空間,這次 vocus 全面改版了沙龍介面,就是為了讓好內容被好好看見! 你可以自由編排你的沙龍首頁版位,新版手機介面也讓每位訪客都能更快找到感興趣的內容、成為你的支持者。 改版完成後可以在社群媒體分享新版面,並標記 @vocus.official⁠ ♥️ ⁠
Thumbnail
沙龍一直是創作與交流的重要空間,這次 vocus 全面改版了沙龍介面,就是為了讓好內容被好好看見! 你可以自由編排你的沙龍首頁版位,新版手機介面也讓每位訪客都能更快找到感興趣的內容、成為你的支持者。 改版完成後可以在社群媒體分享新版面,並標記 @vocus.official⁠ ♥️ ⁠
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
這篇文章介紹了網站的整體架構以及開發時所使用的工具和套件,包括 Next.js、Tailwind CSS 和 socket.io 等。文章回顧了程式碼的重構與優化,幫助開發者提高工作效率,適合希望深入瞭解前端開發和網站架構的讀者。
Thumbnail
這篇文章介紹了網站的整體架構以及開發時所使用的工具和套件,包括 Next.js、Tailwind CSS 和 socket.io 等。文章回顧了程式碼的重構與優化,幫助開發者提高工作效率,適合希望深入瞭解前端開發和網站架構的讀者。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
在 IG 上看到一位前端大大用 Google Apps Script + Line bot 替自己的球隊安排了球經,覺得很有趣,想來玩看看
Thumbnail
在 IG 上看到一位前端大大用 Google Apps Script + Line bot 替自己的球隊安排了球經,覺得很有趣,想來玩看看
Thumbnail
Express 是一個流行的 web 框架,使用 JavsScript 實現,執行在 node 環境上,主要用來寫後端應用。
Thumbnail
Express 是一個流行的 web 框架,使用 JavsScript 實現,執行在 node 環境上,主要用來寫後端應用。
Thumbnail
建立一個屬於自己喜愛球員的清單。 ※ 專案開發環境 架設 Node.js 伺服器。 用 Express.js 進行全端開發。 用 MongoDB 資料庫。 ※ 專案開發技術 使用 Express handlebars,為球員清單做出佈局和局部樣板
Thumbnail
建立一個屬於自己喜愛球員的清單。 ※ 專案開發環境 架設 Node.js 伺服器。 用 Express.js 進行全端開發。 用 MongoDB 資料庫。 ※ 專案開發技術 使用 Express handlebars,為球員清單做出佈局和局部樣板
Thumbnail
npm 做為 node 套件版本管理工具,今天來學習如何使用 npm 升級 package.json 版號管理,可以對一個專案版號管理更加制式化 major 目標升級版號 指令 npm version --new-version major 範例 v1.0.0 -> v2.0.0 mi
Thumbnail
npm 做為 node 套件版本管理工具,今天來學習如何使用 npm 升級 package.json 版號管理,可以對一個專案版號管理更加制式化 major 目標升級版號 指令 npm version --new-version major 範例 v1.0.0 -> v2.0.0 mi
Thumbnail
隨著生活和工作複雜度的提高,我們面臨著在多個平台和網站上收集資訊的挑戰。因此,掌握整理資訊的技巧,以更有序的方式進行管理和追蹤,是值得思考的議題。本篇文章,我們將分享 Save to Notion,讓你輕鬆將網頁內容分門別類地儲存進 Notion 頁面,有助於你建立一個高效且有組織性的資訊管理系統。
Thumbnail
隨著生活和工作複雜度的提高,我們面臨著在多個平台和網站上收集資訊的挑戰。因此,掌握整理資訊的技巧,以更有序的方式進行管理和追蹤,是值得思考的議題。本篇文章,我們將分享 Save to Notion,讓你輕鬆將網頁內容分門別類地儲存進 Notion 頁面,有助於你建立一個高效且有組織性的資訊管理系統。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News