2fish 的部落格

歡迎來到我的部落格！這裡是我記錄開發點滴的地方，希望你會喜歡😌

0%

[ 2024 IT 鐵人賽 DAY12 ] 後端開發好幫手：四大套件使用指南

發表於 更新於 Disqus：

嗨大家好！今天我們要來認識幾個在後端開發中超級實用的套件。這些套件就像是我們的得力助手，能讓我們的開發過程變得更加順暢。讓我們一起來看看吧！

房東不給養鸚鵡 - 那就用 Nuxt + Express + MongoDB 30 天寫一個全端鸚鵡專案。

挑戰人生第一次鐵人賽，就來個佛心分享 side project，從專案發想、規劃、設計、資料庫、開發到部署，技術使用 Nuxt 3、Tailwind CSS、Pinia、Axios、Express、MongoDB，製作一個前後端分離的鸚鵡專案，功能主要介紹食物計算機和聯絡我們，希望可以讓更多人瞭解專案的完整流程 ✨

IT 全文章連結

1. cors：跨來源資源共用的守門員

什麼是 cors？

CORS（Cross-Origin Resource Sharing）是一種安全機制，用於控制網頁從不同源（網域）存取資源的權限。想像一下，CORS 就像是一個精明的門衛，決定哪些訪客可以進入你的網站後院。

為什麼需要它？

在現代網頁開發中，前端和後端經常部署在不同的網域上。如果沒有 CORS，瀏覽器會出於安全考慮，阻止前端向不同網域的後端發送請求。這就像是兩個不同國家的人想要通話，但是沒有國際電話服務一樣。CORS 就是那個讓我們能夠進行「國際通話」的服務。

如何使用：

使用 CORS 非常簡單，讓我們一步步來：

  1. 首先，我們需要安裝 CORS 套件： 
    1
    npm install cors
  2. 然後，在我們的 app.js 檔案中設定：
    這樣設定後，所有來源的請求都會被允許，就像是給了所有人進入你後院的通行證。 
    1
    2
    3
    const cors = require('cors');// 引入 CORS 套件
    const app = express();
    app.use(cors());// 允許所有來源的請求
  3. 如果你想要更嚴格的控制，可以這樣設定：
    這樣就像是你告訴門衛：「只有來自 ‘http://yourfrontend.com‘ 的訪客可以進來，而且他們只能用走的或跑的方式進入（GET 和 POST）。」 
    1
    2
    3
    4
    app.use(cors({
      origin: 'http://yourfrontend.com',// 只允許這個網域的請求
      methods: ['GET', 'POST']// 只允許 GET 和 POST 請求
    }));

    💡 註解說明：
    - origin:
    這個參數用來設置允許的前端來源。只有來自這個指定來源的請求才會通過 CORS 檢查。如果你想限制只有特定的網站或應用程序能夠訪問你的 API，這裡就可以指定該網站的 URL。
    - methods:
    這個參數指定了允許的 HTTP 方法。例如，這裡的配置僅允許 GET 和 POST 請求。如果你的 API 僅支持這兩種方法，其他方法的請求將被拒絕。這樣可以防止其他類型的請求（如 PUT、DELETE）被不正當使用。

2. dotenv：環境變數的管家

什麼是 dotenv？

dotenv 就像是一個神奇的保險箱，可以安全地存放我們的秘密（環境變數），並在需要時輕鬆取用。它能夠將存儲在 .env 檔案中的環境變數載入到 process.env 中。

為什麼需要它？

在開發過程中，我們經常需要使用一些敏感資訊，比如資料庫密碼或 API 金鑰。把這些直接寫在程式碼裡是很危險的，尤其是當你的程式碼會被分享或公開時。dotenv 讓我們可以把這些敏感資訊安全地存放在 .env 檔案中，既方便管理又安全。

如何使用：

讓我們一步步來設定 dotenv：

  1. 首先安裝 dotenv：

    1
    npm install dotenv

  2. 在專案根目錄創建一個 config.env 檔案：
    這就像是在保險箱裡放入我們的秘密。

    1
    2
    3
    DB_HOST=localhost
    DB_USER=root
    DB_PASS=s1mpl3

    https://ithelp.ithome.com.tw/upload/images/20240921/20159686ab47g8lt4T.png

    💡 說明：環境變數檔案中的 Key-Value Pair（鍵值對）
    在環境變數檔案（例如 .env 或 config.env）中，變數是以 Key-Value Pair（鍵值對） 的形式表示的。這種格式幫助我們輕鬆管理和使用配置數據。
    ### Key-Value Pair 結構

    1
    DB_HOST=localhost

    - Key（鍵）:
    - DB_HOST 是這個環境變數的 key，它是變數的名稱，告訴我們這個變數代表什麼。通常，key 使用全大寫字母並用 _ 來分隔單詞。
    - Value（值）:
    - localhost 是這個變數的 value，它是這個變數的具體內容。在這個例子中，localhost 指的是資料庫的主機位置。
    ### 為什麼使用 Key-Value Pair？
    - Key 是變數的名稱，你可以在程式中通過這個名稱來引用這個變數。
    - Value 是變數的實際值，代表這個變數的具體內容，比如地址、密碼、或其他配置資料。
    這樣的結構讓我們可以在程式中靈活使用不同的配置數據，並且能夠在不同環境中輕鬆切換配置，而不必改動程式碼。

  3. 在 app.js 中使用和測試 (記得要將專案 npm start 執行起來)：
    這樣，我們就可以安全地在程式中使用這些環境變數了。

    1
    2
    3
    4
    5
    // 將 .env 檔案中的變數載入到 process.env 中
    const dotenv = require("dotenv");
    dotenv.config({ path: "./config.env" });

    console.log(process.env.DB_HOST); // 從 process.env 中讀取並打印 DB_HOST 變數的值 // 這邊會得到 localhost

    https://ithelp.ithome.com.tw/upload/images/20240921/201596864mzj84h0Rr.png

  4. 別忘了保護你的秘密！將 .env 檔案加入 .gitignore：
    這樣可以確保你的秘密不會被不小心上傳到版本控制系統中。
    在專案根目錄新增一個 .gitignore 檔案，貼上範例程式碼：

    1
    2
    3
    4
    5
    6
    7
    8
    # 不要上傳套件包
    node_modules/

    # 不要上傳 config.env
    config.env

    # 不要上傳所有 .env
    *.env

    https://ithelp.ithome.com.tw/upload/images/20240921/20159686AFSrydiu0w.png

    💡 說明
    1. 忽略特定檔案 config.env
    如果你有一個特定的環境變數檔案，如 config.env，可以通過在 .gitignore 中添加以下一行來忽略它：

    1
    config.env

    2. 忽略所有 .env 結尾的檔案
    若要忽略所有副檔名為 .env 的檔案（例如 production.env 或 development.env），可以添加：
    1
    *.env

    這樣設置後，無論是特定的 config.env 還是其他 .env 檔案，都將被 Git 忽略，保護你的敏感資訊不會被推送到遠端版本庫。

    版本控制 (github) 會在下一篇詳細教學歐

3. mongoose：MongoDB 的最佳拍檔

什麼是 mongoose？

Mongoose 是一個 ODM（Object Data Modeling）庫，它就像是 MongoDB 的私人翻譯官。它幫助我們用 JavaScript 對象的方式來操作 MongoDB 的文檔。

為什麼需要它？

MongoDB 本身就很強大，但 Mongoose 讓它變得更加易用。它提供了模式驗證、查詢構建等功能，讓我們可以更直觀、更安全地操作數據。使用 Mongoose，我們可以定義數據的結構，這樣就能確保存入數據庫的數據都是符合預期的。

安裝：

1
npm install mongoose

我們會在後續的課程中深入探討如何使用 Mongoose，敬請期待！

4. uuid：唯一識別碼生成器

什麼是 uuid？

UUID（Universally Unique Identifier）是一個 128 位元的數字，用於在網路中唯一地標識資訊。想像它是一個超級長的，幾乎不可能重複的序號。

為什麼需要它？

在開發中，我們經常需要生成唯一的標識符，比如用戶 ID、訂單編號等。UUID 保證了即使在不同的系統或時間點生成的 ID 也不會重複，這在分布式系統中特別有用。

如何使用：

  1. 安裝 uuid：

    1
    npm install uuid

  2. 在程式中使用：
    每次調用 uuidv4() 都會生成一個新的、唯一的 ID。

    1
    2
    const { v4: uuidv4 } = require('uuid');
    console.log(uuidv4()); // 輸出類似：'1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed'

    https://ithelp.ithome.com.tw/upload/images/20240921/201596864o9K0EGdZB.png

今日範例程式碼 app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var cors = require("cors"); // 引入允許跨網域套件 cors

// 將 .env 檔案中的變數載入到 process.env 中
const dotenv = require("dotenv");
dotenv.config({ path: "./config.env" });

console.log(process.env.DB_HOST); // 從 process.env 中讀取並打印 DB_HOST 變數的值 // 這邊會得到 localhost

const { v4: uuidv4 } = require('uuid');
console.log(uuidv4()); // 輸出類似：'1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed'

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

app.use(cors()); // 全部放行

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

這些套件就像是我們的超級英雄團隊，各自有著獨特的本領，幫助我們構建更安全、更有效率的後端應用。透過正確使用它們，我們可以專注於開發應用的核心功能，而不必過多擔心底層的實現細節。
下次我們將深入探討如何使用這些工具構建更複雜的後端功能！記住，學習編程就像是一場冒險，每一步都充滿了新的發現。保持好奇心，勇於嘗試，你一定會成為出色的開發者！加油！💪✨
大家有沒有想要更詳細補充的部分呢？歡迎在下方留言分享喔！我們一起學習、一起成長。明天見啦，掰掰～



希望這篇文章有幫助到你，謝謝你的觀看，若有想看的系列也歡迎告訴我 😉