【Nodejs】探索 Node.js、NPM和 Express
更新於 2024/08/29閱讀時間約 16 分鐘
這篇想來寫，剛碰到js得時候，為了讓程式可以運作而安裝Node.js 。Node.js 是能夠在伺服器上面運行 JavaScript 的應用平台環境，透過 Node.js 提供的函式庫與執行環境能完成伺服器端服務。此篇幅就直接從純後端的角度切入摟（對不起拉我寫來寫去還是不知道怎麼順順的寫好文章開頭ＱＱ）
終端機運行指令為：
node app.js
- 這邊給的代碼。當使用者瀏覽時(這邊因為是單機作業，就是127.0.0.1:3000)，等同於對這個伺服器發送了一個請求，那終端機中會輸中請求的一些相關資訊：
// TODO:取得request資訊
const http = require("http");
const server = http.createServer((request, response) => {
console.log(response.url, response.method, response.headers);
});
server.listen(3000);
- 取得請求後，伺服器會依據請求給予其回覆。以下示範，在伺服器被訪問時，發送出回覆的一種方式：
這邊的操作，在網頁被瀏覽時，會帶出HTML<p>node test</p>
// TODO:處理require
const http = require("http");
const server = http.createServer((request, response) => {
response.write('<html lang="en">');
response.write(
' <head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head>'
);
response.write("<body><p>node test</p></body>");
response.write("</html>");
response.end();
});
server.listen(3000);
這邊的操作，在網頁被瀏覽時，會帶出button跟input
const http = require("http");
const server = http.createServer((request, response) => {
const url = request.url;
console.log(url);
response.write(
'<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head>'
);
response.write(
'<body><form method="get" action="/getMsg"><input type="text" name="msg" id="" /><input type="submit" value="submit" /></form></body>'
);
response.end();
});
server.listen(3000)
NPM(Node Package Manager)
接著我們要來談談，npm跟模塊(package)之間的關係：
在node中有三種模塊的方式：
- nodejs 自帶核心模塊 -> http, https, path, os
- 用戶自訂義模塊
- npm
NPM 是 Node Package Manager 的簡稱，它是一個線上套件庫，可以下載各式各樣的 Javascript 套件來使用。
在以前呀，我們需要套件的時候，就得額外到套件的官網，下載，在裝到自己正在用的專案當中，哩哩摳摳，有時候再給你一個環境建置小紅自，直接讓你心態炸裂（這就是傳說中的寫程式入門到放棄嘛～）為了讓我們這些小菜雞不要還妹入門就直接放棄，世界上的大大們幫我們整理好套件，那我們只需要下指令，就一鍵安裝摟（天啊寫程式的人好暖，暈爛暈爛～）
但要記得，要先安裝nodejs才能使用歐！
npm安裝指令：
npm init
npm install
安裝成功的話，你就會看到你得專案多了這些三個檔案：
有看到的話，在npm這一部分就安裝成功啦～
那接下來，介紹一個大家壹定會安裝的套件
nodemon
指令：npm install -g nodemon
啟動；nodemon 檔案
之前我們只要啟動終端機後，如果有更改裡面內容，就需要重啟終端機，再重新訪問，正在開發階段必須一直修修改改並且頻繁地測試內容，真的有點搞剛。
nodemon is a tool that helps develop Node.js based applications by automatically restarting the node application when file changes in the directory are detected.
那如果有起動成功，就會出現下面著個畫面：
Express
官網：https://expressjs.com
指令：npm i express
接下來介紹的express，先看GPT大大是如何解釋他：
Express 是一個流行的 Node.js Web 應用程序框架，它簡化了構建 Web 和 API 服務器的過程。它提供了一組強大的功能和工具，使開發者能夠更輕松地創建高性能、可擴展且易於維護的 Web 應用程序。
Express 提供了許多功能，包括：
1. 路由管理
2. 中間件(middleware)(可以在請求和響應之間執行一些操作)
3. RESTful API 構建
Express 提供了一個強大且靈活的框架，使得 Node.js 開發者能夠輕松構建各種類型的 Web 應用程序和服務。它是 Node.js 社區中最受歡迎和廣泛使用的 Web 框架之一。
總之，可以知道他是一個很棒棒的框架！那我們就來看看這個棒棒的框架如何使用吧。
// TODO: express 基本寫法
const express = require('express')
const app = express()
app.get('/', function (req, res) {
res.send('Hello World')
})
app.listen(3000)
這一段代碼中，我們可以得知兩件事：
在res中的res.write()跟res.end()在express中由res.send()取代
看到那個app.get()，他的名字叫middleware。
Middleware
那Middleware再請GPT大大開示：
Middleware（中間件）是在 Express 框架中用於處理請求和響應的函數。它可以訪問請求對象（`req`）、響應對象（`res`）以及應用程序中的下一個中間件函數（`next`）。中間件在請求處理過程中執行一些操作，然後可以決定是將請求傳遞給下一個中間件，還是結束請求-響應周期。
在 Express 中，中間件可以用來執行各種任務，例如：
1. 處理路由：根據不同的請求路徑，使用不同的中間件來處理不同的邏輯。
2. 記錄請求日志：記錄請求的信息，如請求時間、請求路徑、請求方法等。
3. 身份驗證和授權：驗證用戶身份，授權用戶訪問特定的資源。
4. 數據處理：解析請求體，處理表單數據、JSON 數據等。
5. 錯誤處理：捕獲和處理請求處理過程中的錯誤。
在 Express 中，中間件可以通過 `app.use()` 或類似的方法添加到應用程序中。例如，`app.use(middlewareFunction)` 將一個中間件函數添加到請求-響應處理管道中。多個中間件可以按順序添加，請求將依次通過每個中間件。
這裡可以大概知道，當伺服器運作時，middleware就承攬著伺服器要做的每一個動作。
app.use('/', function (req, res) {
res.send('Hello World')
})
那這邊可以看到app後面可以接很多東西，其中的app.post()，app.get()分別接收POST跟GET的方法。
在express中使用get方法：
get方法搭配的是req.query()
// TODO: route -> 在表單中使用get
const express = require("express");
const http = require("http");
const app = express();
// 顯示表單
// form method="get" action="/result "
app.use("/add", (req, res, next) => {
res.send(
'<body><form method="get" action="/result"><input type="text" name="msg" id="" /><input type="submit" value="submit" /></form></body>'
);
next();
});
app.use("/result", (req, res, next) => {
console.log(req.query); //{ msg: 'qew' }
next();
});
app.use("/", (req, res, next) => {
res.send("<h1>this is root page. </h1>");
next();
});
const server = http.createServer(app);
server.listen(3000);
在express中使用post方法：
express本身並沒有提供使用post方法，所以要另外下載body-parser
下載指令 ：$ npm install body-parser
post方法搭配的是req.body()
// TODO: route -> 在表單中使用post
// express本身不支援post，需要在額外使用bodyParser
const bodyParser = require("body-parser");
const express = require("express");
const http = require("http");
const adminRouters = require("./router/admin");
const shopRouters = require("./router/shop");
const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
router.use("/add", (req, res, next) => {
res.send(
'<body><form method="post" action="/result"><input type="text" name="msg" id="" /><input type="submit" value="submit" /></form></body>'
);
next();
});
router.use("/result", (req, res, next) => {
console.log(req.body); //{ msg: 'wer' }
res.send(req.body.title);
next();
});
router.use("/", (req, res, next) => {
res.send("<p>11111</p>");
res.send("<h1>this is root page. </h1>");
next();
});
// 404 not found
app.use((req, res, next) => {
res.status(404).send(<p>pages not found</p>);
});
const server = http.createServer(app);
server.listen(3000);
Express application generator
目前，加上【Nodejs】淺談網頁開發中的模板語言：Pug 和 EJS 這篇（還沒看的趕緊過去看ＸＤ），稍微都有提到基本的環計建置了。那接下來再提一個基於官方幫我們建置好的框架Express generator
還是要先安裝Express generator拉～
指令：npm install -g express-generator根據他給的提示下創建指令
那像我的話，因為要使用的模板語言是ejs，所以指令為：
express -e express-generator-1
就等他幫你創建好摟～
🥰以上是本文所分享的內容。如果您發現任何錯誤或遺漏，請不吝賜教。
4會員
10內容數
留言0
查看全部
你可能也想看
Google News 追蹤
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
咦！奇怪， 怎麼網頁用一用就出現以下的畫面了， 到底是怎麼回事啊？
不用慌張， 讓我們仔細看看中間的「HTTP ERROR 431」，看到這樣的錯誤代碼， 相信心中隱約已經知曉我們的請求標頭內容太大了， 超過限制導致這樣的問題發生， 讓我們先詳細查閱這樣的錯誤訊息吧！
📚 https://
研究這個部分起因是因為公司某些功能服務是使用AWS Serverless來處理計算，故而外訂立了三個月學習NodeJS的計畫，並開始試著實作Serverless服務，Jest測試還沒研究到，下次再補充說明。
NodeJS 學習來到 file systems 操作，在文檔操作上有分為同步跟異步的處理，接下來分階段介紹操作函數
最近跟著影片學習NodeJS，第一部分先學習對Buffer的處理跟理解，以下是對於NodeJS Buffer的理解筆記
NodeJS作用?
NodeJS 作為一個後端程式語言，與伺服器交互，能夠開發服務器應用、開發工具類應用，例如：Webback、Vite 這些好用工具，或是透過NodeJS的electron框架開發桌面端應用，而常見的桌面端應用如 VScode
一般來說我們如果將程式運行在console上，只要用ctrl + c 之類的強制中斷方式就能讓程式中止，但如果我們想要在程式運行到一半時，偵測到某些例外狀況就離開程式，可以怎麼做呢？
nodejs核心模組提供了process.exit()的方法可以讓程式強制中止，但使用了這個功能之後，我們尚未完成的
由於Javascript本身設計就適合於單線程的應用, 但一般後端應用程式都會支援多個服務來處理client的請求, nodejs中也提供了cluster模組來達成此功能。
Cluster的原理很簡單，由於每個Process都只能用單核心的CPU來運行，那麼就多開幾個來幫忙處理吧！ 而這個Clust
參考 :
https://www.w3school.com.cn/jsref/jsref_replace.ASP
取代字串方式
取代找到的第一個
全取代
str.replace(/原始字詞/g, '新字詞');
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
咦！奇怪， 怎麼網頁用一用就出現以下的畫面了， 到底是怎麼回事啊？
不用慌張， 讓我們仔細看看中間的「HTTP ERROR 431」，看到這樣的錯誤代碼， 相信心中隱約已經知曉我們的請求標頭內容太大了， 超過限制導致這樣的問題發生， 讓我們先詳細查閱這樣的錯誤訊息吧！
📚 https://
研究這個部分起因是因為公司某些功能服務是使用AWS Serverless來處理計算，故而外訂立了三個月學習NodeJS的計畫，並開始試著實作Serverless服務，Jest測試還沒研究到，下次再補充說明。
NodeJS 學習來到 file systems 操作，在文檔操作上有分為同步跟異步的處理，接下來分階段介紹操作函數
最近跟著影片學習NodeJS，第一部分先學習對Buffer的處理跟理解，以下是對於NodeJS Buffer的理解筆記
NodeJS作用?
NodeJS 作為一個後端程式語言，與伺服器交互，能夠開發服務器應用、開發工具類應用，例如：Webback、Vite 這些好用工具，或是透過NodeJS的electron框架開發桌面端應用，而常見的桌面端應用如 VScode
一般來說我們如果將程式運行在console上，只要用ctrl + c 之類的強制中斷方式就能讓程式中止，但如果我們想要在程式運行到一半時，偵測到某些例外狀況就離開程式，可以怎麼做呢？
nodejs核心模組提供了process.exit()的方法可以讓程式強制中止，但使用了這個功能之後，我們尚未完成的
由於Javascript本身設計就適合於單線程的應用, 但一般後端應用程式都會支援多個服務來處理client的請求, nodejs中也提供了cluster模組來達成此功能。
Cluster的原理很簡單，由於每個Process都只能用單核心的CPU來運行，那麼就多開幾個來幫忙處理吧！ 而這個Clust
參考 :
https://www.w3school.com.cn/jsref/jsref_replace.ASP
取代字串方式
取代找到的第一個
全取代
str.replace(/原始字詞/g, '新字詞');