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
奧莉薇走在成為後端工程師之路上
23會員
167內容數
全端網頁開發專業知識分享
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
2025 九月最後一次 vocus 創作者推薦來啦!從日本獨旅專家、與兩歲娃的南法親子旅行,到台灣健行筆記,結合色彩與符號學的文化觀察,還有透過斜槓的前往理想生活的路途,邀請你跟著 vocus 創作者,用一百種視野探索這個世界!
Thumbnail
2025 九月最後一次 vocus 創作者推薦來啦!從日本獨旅專家、與兩歲娃的南法親子旅行,到台灣健行筆記,結合色彩與符號學的文化觀察,還有透過斜槓的前往理想生活的路途,邀請你跟著 vocus 創作者,用一百種視野探索這個世界!
Thumbnail
在溫哥華這座被大自然擁抱的城市,不會游泳的人也能在水裡泡一泡~~感受清涼和放鬆。 剛到溫哥華時,我去史丹利公園騎腳踏車,意外經過了 Second Beach Pool。那一眼真是讓我久久不能自己( • ̀ω•́ ),泳池的前方就是開闊的 English Bay,看到泳池裡的人群漂浮在海天之間。
Thumbnail
在溫哥華這座被大自然擁抱的城市,不會游泳的人也能在水裡泡一泡~~感受清涼和放鬆。 剛到溫哥華時,我去史丹利公園騎腳踏車,意外經過了 Second Beach Pool。那一眼真是讓我久久不能自己( • ̀ω•́ ),泳池的前方就是開闊的 English Bay,看到泳池裡的人群漂浮在海天之間。
Thumbnail
七星山主峰已走過幾次,這次要探探沒走過的夢幻湖↔️東峰段路線,補上「陽明山東西大縱走」中的七星山段。因為不喜歡原路折返,所以規劃一個簡易 小O路線,可以免費停車,還能把心頭好的秋芒看好看滿,很推薦的路線唷!
Thumbnail
七星山主峰已走過幾次,這次要探探沒走過的夢幻湖↔️東峰段路線,補上「陽明山東西大縱走」中的七星山段。因為不喜歡原路折返,所以規劃一個簡易 小O路線,可以免費停車,還能把心頭好的秋芒看好看滿,很推薦的路線唷!
Thumbnail
2025年9月1日起,臺新多張信用卡將整合為臺新Richart卡,並推出七大刷卡方案。本文詳細分析各方案優缺點、停卡教學及其他信用卡推薦,協助讀者選擇最適合自己的方案。
Thumbnail
2025年9月1日起,臺新多張信用卡將整合為臺新Richart卡,並推出七大刷卡方案。本文詳細分析各方案優缺點、停卡教學及其他信用卡推薦,協助讀者選擇最適合自己的方案。
Thumbnail
首先,最關鍵的問題就是「原創」是否有必要性? 我認為答案是否定的,因為原作者在翻拍時就創作了《今際之國的闖關者 RETRY》,講述的是有栖成為心理諮詢師後,因為救人意外再次被捲入遊戲世界。這樣的續作已經能自然承接主線。如今這種「硬原創」,只會讓整個 IP 的口碑下滑,新角色也淪為犧牲品。
Thumbnail
首先,最關鍵的問題就是「原創」是否有必要性? 我認為答案是否定的,因為原作者在翻拍時就創作了《今際之國的闖關者 RETRY》,講述的是有栖成為心理諮詢師後,因為救人意外再次被捲入遊戲世界。這樣的續作已經能自然承接主線。如今這種「硬原創」,只會讓整個 IP 的口碑下滑,新角色也淪為犧牲品。
Thumbnail
「知道自己怎麼了,然後呢?現狀還是沒有任何改變。」伴侶與諮商師晤談之前,曾與我描述她的狀態:「其實道理我都知道,已經發生很多次,我也在狀態好的時候練習過很多次。可是現在腦海的雜亂聲音不斷攻擊我,我知道『可以』怎麼想比較好、知道那些聲音是怎麼來的,也知道躺平軟爛你也不會覺得我怎樣。但知道又如何?
Thumbnail
「知道自己怎麼了,然後呢?現狀還是沒有任何改變。」伴侶與諮商師晤談之前,曾與我描述她的狀態:「其實道理我都知道,已經發生很多次,我也在狀態好的時候練習過很多次。可是現在腦海的雜亂聲音不斷攻擊我,我知道『可以』怎麼想比較好、知道那些聲音是怎麼來的,也知道躺平軟爛你也不會覺得我怎樣。但知道又如何?
Thumbnail
一轉眼,咩咩就已經九個多月大了,天氣也漸漸涼了起來,可以開始真的帶去爬山囉! 住在新店已經六年了,選擇二格山當她們的第一座小百岳,非常有意義。而且這天天氣超級好,視野好到超乎預期,連大霸尖山和南湖大山都一清二楚! 雖然我們作弊從小格頭起登,來回也才1.2k上一百多,但她們都玩得非常開心呢!
Thumbnail
一轉眼,咩咩就已經九個多月大了,天氣也漸漸涼了起來,可以開始真的帶去爬山囉! 住在新店已經六年了,選擇二格山當她們的第一座小百岳,非常有意義。而且這天天氣超級好,視野好到超乎預期,連大霸尖山和南湖大山都一清二楚! 雖然我們作弊從小格頭起登,來回也才1.2k上一百多,但她們都玩得非常開心呢!
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 環境上,主要用來寫後端應用。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News