【Nodejs】探索 Node.js、NPM和 Express

2023/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

查看全部

發表第一個留言支持創作者！

W. C. Chen的沙龍的其他內容

【Unity】粒子系統實踐：掌握子彈效果的創建與控制

啊,,,,,是這個樣子的，這是我今正在做的東西，目前做到的進度是， unity醬可以上下左右，搭配上timeline預先設定好路線，創造出往前樣子，那第一次寫發射砲彈的東西，就來記錄一下。子彈（粒子效果）這邊我還很爛ＱＱ，但網路上有推薦文章，這篇真的介紹的很詳細： Unity Part

#遊戲開發 #unity #遊戲

【Nodejs】淺談網頁開發中的模板語言：Pug 和 EJS

這一篇文章，我想來談談模板語言（template language/engine）。而其中比較有名的為handlebar、pug、ejs。那我會的事後兩著，因此拿這兩個出來寫一篇文章。 Pug 指令：npm install pug 比起 HTML 的語法，pug 語法可以說簡潔很多。那下面

#ejs #pug #模板語言

【Unity】使用新版Input System在Unity中創建流暢的角色控制

新版Input System 要先來調整設定：（如果日後發現移動不了，可能是這邊有出問題，可以把這邊視為一個檢查點）下載Input System 在script中的寫法： (這邊的功能是讀取移動的值而已，主要目的是讓unity讀到movement，絕對不是托篇幅的拉🥺) using

#遊戲開發 #Unity #InputSystem

【Flowbite】使用 JavaScript 和 Tailwind.css 實現Dark Mode

今天在練習寫網頁時，剛好要來有做到Dark Mode 的功能，那順便來記錄一下做法～首先要先知道Dark Mode的運作原理。是如何知道你現在是Light Mode還是Dark Mode呢？ 😀就是這邊拉～當你按下按鈕時，javascript 的toggle()去為<html>增加dark標

#DarkMode #Tailwind #Flowbite

【Tailwind CSS】「從頭開始：逐步引入 Tailwind CSS 到你的網頁專案」

當然指令不是背的，所以第一步就是要打開Tailwind CSS的官網。 Installation - Tailwind CSS 主要的方式有CLI跟CDN，這裡使用的方式前者。 Install Tailwind CSS npm install -D tailwindcss npx tai

#Tailwind #CSS #網頁開發

【網站部屬】比較 Netlify 與 Vercel 的網站部屬方式：一步步上手教學

這篇要來談談網站部屬的方式 Netlify 提供100GB的空間給大家做使用~ 一定事先註冊登入的拉~，那我登入的方式為github。以下就是你會看的頁面。上傳完後，就回到Netlify，選擇github，並選取剛剛建立好的專案。接著進行部屬網站前的先置(但我自己基本是除了網站名稱，

#部屬網站 #網頁 #網頁管理

「天天秋嗨嗨」：vocus 秋季徵文，五大主題 & 獎品登場！

這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～

#天天秋嗨嗨 #秋季旅遊 #秋季穿搭

阿Han的沙龍

2023/12/26

【程式語言 - Nodejs】431 Request Header Fields Too Large

咦！奇怪，怎麼網頁用一用就出現以下的畫面了，到底是怎麼回事啊？不用慌張，讓我們仔細看看中間的「HTTP ERROR 431」，看到這樣的錯誤代碼，相信心中隱約已經知曉我們的請求標頭內容太大了，超過限制導致這樣的問題發生，讓我們先詳細查閱這樣的錯誤訊息吧！ 📚 https://

DDDDD的沙龍

2023/11/05

AWS Serverless with NodeJS

研究這個部分起因是因為公司某些功能服務是使用AWS Serverless來處理計算，故而外訂立了三個月學習NodeJS的計畫，並開始試著實作Serverless服務，Jest測試還沒研究到，下次再補充說明。

#AWS #NodeJS #部署

DDDDD的沙龍

2023/09/22

NodeJS 關於 file systems，FS異步同步檔案寫入及讀取操作

NodeJS 學習來到 file systems 操作，在文檔操作上有分為同步跟異步的處理，接下來分階段介紹操作函數

#NodeJS #工程師筆記 #工程師

DDDDD的沙龍

2023/09/09

NodeJS Buffer 理解

最近跟著影片學習NodeJS，第一部分先學習對Buffer的處理跟理解，以下是對於NodeJS Buffer的理解筆記

#學習 #NodeJS #程式學習

DDDDD的沙龍

2023/09/09

NodeJS 初學(一)

NodeJS作用? NodeJS 作為一個後端程式語言，與伺服器交互，能夠開發服務器應用、開發工具類應用，例如：Webback、Vite 這些好用工具，或是透過NodeJS的electron框架開發桌面端應用，而常見的桌面端應用如 VScode

#nodeJS #程式學習 #工程師

Jeremy Ho的沙龍

2023/08/09

Node.js 筆記 | 基本操作

Node.js 基礎操作篇

#NodeJS #WebDev

阿Han的沙龍

2023/04/29

【程式語言 - NodeJS】如何從Nodejs程序退出

一般來說我們如果將程式運行在console上，只要用ctrl + c 之類的強制中斷方式就能讓程式中止，但如果我們想要在程式運行到一半時，偵測到某些例外狀況就離開程式，可以怎麼做呢？ nodejs核心模組提供了process.exit()的方法可以讓程式強制中止，但使用了這個功能之後，我們尚未完成的

#程式語言 #NodeJS

阿Han的沙龍

2023/04/29