iT邦幫忙

2024 iThome 鐵人賽

DAY 21
0
自我挑戰組

30 天 Node.js 探索:基礎、進階與實踐系列 第 21

Day 21: 計畫應用實作、準備工作與專案初始化

  • 分享至 

  • xImage
  •  

接下來的十天,經過了前面二十天的知識與經驗累積,我想做出一個實用的應用,既能覆蓋到我學到的 Node.js 相關知識,也能讓我在實作過程中進行擴展和優化。

終極目標 個人財務管理應用

接著介紹我想製作的一些功能:

  • 用戶可以記錄收入和支出,並分類管理。
  • 自動生成月度和年度報告,顯示圖表。
  • 用戶設定儲蓄目標。
    目標:管理財務記錄和報表生成

為了確保我能順利展開個人財務管理應用的開發,第一步是設置一個乾淨的開發環境,並初始化專案。

專案初始化

在專案資料夾中使用 npm init 初始化專案,就會生成一個 package.json 文件。該文件將包含應用所需的依賴和設定。

bash
npm init -y

安裝必要依賴

為了要構建後端 API 和數據庫連接,需要安裝一些必要的 Node.js 依賴。以下是要安裝的核心依賴:

bash
npm install express mongoose dotenv bcryptjs jsonwebtoken cors
npm install nodemon --save-dev
  • express: Node.js 應用框架,用來創建 API。
  • mongoose: 用來和 MongoDB 資料庫互動的 ODM(Object Data Modeling)庫。
  • dotenv: 用於管理環境變數,能夠安全地保存敏感訊息,像是資料庫連接字串。
  • bcryptjs: 密碼加密工具,用來安全地保存用戶的密碼。
  • jsonwebtoken (JWT): 用於生成和驗證 JSON Web Token,實現用戶身份驗證。
  • cors: 解決跨域請求問題,允許前端與後端的交互。
  • nodemon: 開發環境工具,會自動重啟伺服器,方便開發時測試代碼變更。

建立專案結構

建立一些基本的文件夾結構,這些文件夾會在接下來的開發過程中用到:

  • models/: 存放資料庫模型文件(例如 User、Transaction 模型)。
  • routes/: 存放應用的 API 路由。
  • controllers/: 處理業務邏輯的控制器。
  • middleware/: 存放自定義的中間件(例如驗證 JWT)。
  • config/: 用於存放 MongoDB 連接和其他配置。

配置伺服器 (server.js)

創建一個 server.js 文件來啟動 Express 應用,並連接到 MongoDB 資料庫:

js
const express = require('express');
const dotenv = require('dotenv');
const mongoose = require('mongoose');
const cors = require('cors');

dotenv.config();

const app = express();

// 中間件
app.use(express.json());
app.use(cors());

// 資料庫連接
mongoose.connect(process.env.MONGO_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
}).then(() => console.log('MongoDB connected'))
  .catch(err => console.error(err));

// 設定伺服器運行的端口
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

這個 server.js 文件會讀取 .env 文件中的環境變數,並使用 mongoose 連接到 MongoDB。

配置環境變數 (.env)

創建 .env 文件來儲存敏感的環境變數,這些變數不會被提交到版本控制系統。

bash
MONGO_URI=your_mongodb_connection_string
PORT=5000
JWT_SECRET=your_jwt_secret_key

確保 .gitignore 文件中加入 .env 來避免敏感訊息洩露。

測試伺服器啟動

使用 nodemon 來啟動伺服器,它會自動監聽文件變更並重新啟動伺服器:

bash
npx nodemon server.js

如果伺服器正常啟動,終端應該顯示伺服器運行於端口 5000,並成功連接到 MongoDB。

總結

今天完成了個人財務管理應用的基本設置,從專案初始化到資料夾結構的設計,再到安裝必要的依賴和配置伺服器。這一步奠定了應用開發的基礎,確保接下來的功能開發有條不紊的進行。


上一篇
Day 20: 性能優化與記憶體管理
下一篇
Day 22: 註冊與登入功能 (JWT 驗證)
系列文
30 天 Node.js 探索:基礎、進階與實踐30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言