Nodejs on Wayne's blog | 偉恩的部落格 | 技術博客

【Javascript】Require 與 Import 的區別

Wed, 22 Feb 2023 00:00:00 +0000

你有想過，我們在 JavaScript 要引入其他文件，有的時候使用 require，有的時候使用 import，這兩個方式有什麼差別？效能上又有什麼差別呢？本篇就來說明一下！

遵循的模塊化規範不同

require/exports 遵循 CommonJS 規範，主要用於 Node.js 伺服器端開發，以同步方式載入模組，也就是要載入完成後才能執行後面的程式碼。

而 import/export 則是 ES6 模組（ESM）標準，由 TC39 制定，屬於靜態編譯，編譯期就能解析依賴，瀏覽器與 Node.js 都原生支持（Node.js 14+）。若舊環境不支援，則可以透過 Babel + Webpack 轉譯。

出現的時間不同

require/exports：2010 年左右在 CommonJS 規範中出現，Node.js 廣泛採用。
import/export：ES6 (ES2015) 引入，2015 年之後才廣泛使用，Babel 是早期轉譯支援的重要工具。

現在 Node.js 14+ / 16+ 已原生支援 ES Module，不需要 Babel 也能直接使用 import/export。

寫法與使用方式不同

CommonJS (`require/exports`)

1
2
3


const component = require('component')
exports.component = component
module.exports = component

ES6 Module (`import/export`)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


import fs from 'fs'
import { readFile } from 'fs'
import { readFile as read } from 'fs'
import fs, { readFile } from 'fs'

export default fs
export const fs
export function readFile
export { readFile, read }
export * from 'fs'

動態載入（Dynamic Import）

靜態 import 必須是字面量字串，編譯期就要能確定模組路徑：

1
2
3
4
5
6


// ❌ 靜態 import 不能使用變數
const url = "./utils.js";
import url; // SyntaxError

// ✅ 靜態 import 正確用法
import myUtil from "./utils.js";

若需要 動態載入，可以使用 CommonJS 的 require() 或 ESM 的動態 import()：

1
2
3
4
5
6
7


// 使用 require()（CommonJS）
const url2 = "./utils.js";
const myUtil2 = require(url2);

// 使用動態 import()（ESM）
const url3 = "./utils.js";
const myUtil3 = await import(url3);

說明

方法	同步/非同步	支援變數	適用環境
`import` (靜態)	靜態編譯	❌	ESM（編譯期）
`require()`	同步	✅	CommonJS (Node.js)
`await import()`	非同步	✅	ESM (Node.js / 瀏覽器)

Node.js 支援情況

Node.js 14.8+：動態 import() 正式可用（無需 flag）。
Node.js 16+ LTS：動態 import() 穩定，CommonJS 與 ESM 都可使用。
靜態 import 與動態 import() 都可以取代 Babel 轉譯的需求，但 Babel/Webpack 仍用於瀏覽器或舊版兼容。

本質上的不同

CommonJS 與 ES Module 輸出都是物件，但 ESM 支援 export default 與強綁定屬性。
require() 載入的是值或引用，靜態與動態都可以。
動態 import() 與 require() 的動態行為對等，但非同步，不阻塞事件循環。

範例比較

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


// counter.js
exports.count = 0
setTimeout(() => {
 console.log('increase count to', ++exports.count, 'in counter.js after 500ms')
}, 500)

// commonjs.js
const { count } = require('./counter')
setTimeout(() => {
 console.log('read count after 1000ms in commonjs is', count)
}, 1000)

// es6.js
import { count } from './counter'
setTimeout(() => {
 console.log('read count after 1000ms in es6 is', count)
}, 1000)

執行結果：

1
2
3
4
5
6
7


node commonjs.js
> increase count to 1 in counter.js after 500ms
> read count after 1000ms in commonjs is 0

babel-node es6.js
> increase count to 1 in counter.js after 500ms
> read count after 1000ms in es6 is 1

效能差異

靜態 import：編譯期執行。
require()：同步載入，阻塞事件循環。
動態 import()：非同步載入，不阻塞事件循環。

在現代 Node.js 專案，如果能用靜態 import 就用，需動態載入才使用 require() 或 await import()。效能差異微乎其微，但動態載入的同步/非同步行為會影響事件循環。

【Node.js】用 Typescript 與 Express 建立一個 server

Tue, 21 Feb 2023 00:00:00 +0000

參考網站
 參考網站
 參考網站
 參考網站
 參考網站

最近前端離不開 typescript 後，我將原本用 javascript 撰寫的 mock server 改用 typescript 來撰寫；本篇就來記錄一下該如何使用 typescript 建立 node.js 的 Express！

使用 typescript 的好處

typescript 是為了彌補 javascript 不足的地方而誕生的語言，最主要的差別就在於宣告變數或是執行函數時需要指定 type ，不過這篇的重點在於在 node.js 中使用 typescript 建立 Express，所以就不描述太多 typescript 的特性了。

提供許多 OO pattern 的方法，如介面、繼承與抽象類別
強型別，能夠在編譯過程中先行找到一些錯誤
能夠編譯成不同版本的 JS
有 Declaration files 能夠使用 JS Library，因此不太需要擔心套件相容問題，像是 express 有 @type/express

建立 typescript 環境

進入初始化專案或現有專案的目錄

1
2
3
4


cd ~/project/node-express-project

# 初始化專案
# npm init

安裝 typescript 與 express

1
2


npm install --save-dev typescript @types/express @types/node
npm install --save express

設定 typescript

安裝 typescript 時，也會同時安裝將 typescript 編譯成 javascript 的編譯器 - tsc。

初始化 tsc

1

tsc --init

tsc --init 後會產生 tsconfig.json，當 typescript 透過 tsc 編譯成 javascript 時，就會遵循該檔案的設定進行編譯。

可能遇到的錯誤

tsc command not found

這個 error message ，請先在 global 安裝 typescript。

1

npm install -g typescript

若仍出現 “tsc command not found”，請在終端機輸入：

1

export PATH=”$PATH:/Users/{user name}/.npm-global/lib/node_modules/typescript/bin/”

再輸入 tsc -v ，確認 tsc 的版本即可。

tsconfig.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


{
 "compilerOptions": {
 "target": "es5", // 選擇要編譯成哪種版本的 javascript
 "module": "commonjs",
 "strict": true, // 嚴格模式，啟用後需要指定函數參數的 type
 "esModuleInterop": true,
 "skipLibCheck": true,
 "forceConsistentCasingInFileNames": true,
 "outDir": "dist" // 將編譯過後的 js 檔放到 dist 資料夾中
 }
}

官網有 tsconfig.json 所有屬性的說明，請參考官網。

node.js 的設定

安裝完 typescript 環境後，接著我們來設定 node.js 的部分。

1. 新增入口檔案

1
2
3


mkdir src

touch src/app.ts # 入口檔案

src/app.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


import express from 'express';
​
const app = express();
const port = 3000;
app.get('/', (req, res) => {
 res.send('The server is working!');
});
app.listen(port, () => {
 if (port === 3000) {
 console.log('true')
 }
 console.log(`server is listening on ${port} !!!`);
});

2. 安裝 nodemon 與 ts-node

nodemon：用於在每次儲存檔案後自動重啟 node，看到即時的修正。
ts-node：可以當作 node.js + typescript，用於直接在 node.js 執行 typescript 檔案。

在專案資料夾內安裝：

1

npm install --save-dev nodemon ts-node

【推薦】也可以直接安裝於全域環境：

1

npm install -g nodemon ts-node

3. 調整 package.json 的 scripts

package.json

1
2
3
4
5


"scripts": {
 "start": "nodemon src/app.ts",
 "build": "tsc --project ./",
 "test": "echo \"Error: no test specified\" && exit 1"
}

4. 執行 npm start

1

npm run start

start 後，nodemon 會監聽檔案是否有儲存的動作，並用 ts-node 來重啟。

npm run build 後則會出現一個 dist 資料夾來存放編譯過後的 js 檔。

BONUS：使用自定義的 tsconfig.json

補充一下，若當前專案包含前後端，而前端也使用 typescript 撰寫時，已經有一隻前端部分的 tsconfig.json，此時若需拆分 Express 的 tsconfig.json，可以透過 nodemon 的參數 --config {express tsconfig.json 檔案位置} 來調整。

先複製一份 tsconfig.json 到 Express src 資料夾內

1
2


# 先複製一份 tsconfig.json
copy tsconfig.json src/tsconfig.json

調整 start 的 scripts

package.json

1
2
3
4
5


"scripts": {
 "start": "nodemon src/app.ts --config src/tsconfig.json",
 "build": "tsc --project ./ --config src/tsconfig.json",
 "test": "echo \"Error: no test specified\" && exit 1"
}

使用 http

這邊講解用 http module 寫 node.js，如需直接使用 express 可以直接跳到使用 Express。

建立完 typescript 的環境後，引入 node.js 的核心套件之一：http module。 http module 能讓你建立一個 http server，當你的 code 在執行的時候，可以隨時監聽網路上發送到你 url 的所有 request，並將你寫的程式邏輯 response 回去。

載入 http module 其實跟 javascript 的寫法差不多，只是在 request 和 response 加上對應的型別： IncomingMessage、ServerResponse。

PS：在 node 無法直接使用 import，得透過 Babel 轉譯，可以在 tsconfig.json 中設定 module。

src/tsconfig.json

 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


{
 "compilerOptions": {
 "target": "esnext",
 "module": "CommonJS", // 重點是這行
 "useDefineForClassFields": true,
 "strict": true,
 "jsx": "preserve",
 "outDir": "./dist",
 "importHelpers": true,
 "moduleResolution": "node",
 "experimentalDecorators": true,
 "allowJs": true,
 "skipLibCheck": true,
 "esModuleInterop": true,
 "allowSyntheticDefaultImports": true,
 "sourceMap": true,
 "isolatedModules": false,
 "resolveJsonModule": true,
 "baseUrl": ".",
 "types": ["node"],
 "paths": {
 "@/*": ["src/*"]
 },
 "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
 "noFallthroughCasesInSwitch": true,
 "forceConsistentCasingInFileNames": true,
 "typeRoots": ["node_modules/@types", "src/types", "src"],
 "suppressImplicitAnyIndexErrors": true
 },
 "include": ["**/*.ts", "**/*.d.ts"]
}

src/app.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


import { createServer, IncomingMessage, ServerResponse } from 'http';

const port = 5000;

const server = createServer((request: IncomingMessage, response: ServerResponse) => {
 response.on('error', (err) => {
 console.error(err);
 });
 response.writeHead(200, {"Content-Type": "text/plain"});
 response.end('Hello world!');
});

server.listen(port);
console.log(`server is running on http://localhost:${port}`)

如此一來每當有任何 client 對 http://localhost:5000 這個 url 發送 request 時，我們的 server 都會回應 “Hello world!” 給該 client。

取得 request 中的資料

取得 request body

大部分的時候，如果我們需要傳資料到 server，會發送 POST request ，並且將資料存在 body 當中，要在 node.js 取得 request 中的 body data 方法如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


let body = [];
request
 .on('error', (err) => {
 console.error(err);
 })
 .on('data', (chunk) => {
 body.push(chunk);
 })
 .on('end', () => {
 body = Buffer.concat(body).toString();
 console.log(body);
 })

如果直接將 chunk console.log 出來會發現是一段看不懂的資料：<Buffer 7b 0d 0a 20 20 20 20 22 74 65 73 74 22 3a 20 22 35 22 0d 0a 7d>，這是因為 http request 在發送給 server 的時候是按照順序一個 byte、一個 byte 以資料流的方式發送的，因此需要用 Buffer.toString() 轉換回原本的資料。

當我使用 POST method 發送 request 時，我的 server 端就會印出 request 中 body 的資料。

取得 request header

直接用 request.headers 取得 request 中的基本資料：

1
2
3
4
5
6
7


request
 .on('error', (err) => {
 console.error(err);
 })
 .on('end', () => {
 console.log(request.headers);
 })

取得 request authorization

authorization 是我們習慣放置 token 的欄位，雖然在 postman 中是獨立的一欄，但事實上是存在 request 的 headers 裡的。

1
2
3
4
5
6
7
8


request
 .on('error', (err) => {
 console.error(err);
 })
 .on('end', () => {
 console.log(request.headers);
 console.log(request.headers.authorization);
 })

完整程式碼

src/app.ts

 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


import { createServer, IncomingMessage, ServerResponse } from 'http';

const port = 5000;

const server = createServer((request: IncomingMessage, response: ServerResponse) => {
 const { headers, method, url } = request;
 let body:any = [];
 request
 .on('error', (err) => {
 console.error(err);
 })
 .on('data', (chunk) => {
 body.push(chunk);
 })
 .on('end', () => {
 body = Buffer.concat(body).toString();
 console.log(body);
 console.log(request.headers);
 console.log(request.headers.authorization);
 })
 response.on('error', (err) => {
 console.error(err);
 });
 response.writeHead(200, {"Content-Type": "text/plain"});
 response.end('Hello world!');
});

server.listen(port);
console.log(`server is running on http://localhost:${port}`)

使用 Express

接著使用 Express 來改寫一下。

src/app.ts

 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


import express, { Express, Request, Response } from 'express';

const port = 5000;

const app: Express = express();

app.get('/', (request: Request, response: Response) => {
 response.type('text/plain');
 response.send('Homepage');
})

app.get('/articles', (request: Request, response: Response) => {
 response.type('text/plain');
 response.send('All articles are here!');
})

app.get('/about-me', (request: Request, response: Response) => {
 response.type('text/plain');
 response.send('My name is Jimmy.');
})

app.use((request: Request, response: Response) => {
 response.type('text/plain');
 response.status(404)
 response.send('Page is not found.');
})

app.listen(port, () => {
 console.log(`server is running on http://localhost:${port}`)}
);

加入 Route 與 Controller

當專案越長越大後，將所有 routes 和邏輯都寫在 app.ts 是個很難維護的做法，因此大多數的專案都會將 routes 和 controllers 獨立出來，把商業邏輯寫在 controllers 中。

Controller：請求經過 router 分配過後，會交由 controller 負責處理商業邏輯，並回傳對應的 response。
Route：我們要將使用者的請求，依照其進入的 Url 分配給不同的 Controller。

Controller

建立 controllers。

src/controllers/api-controllers.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


import { Request, Response, NextFunction } from 'express';

export class ApiControllers {
 getHomePage(request: Request, response: Response, next: NextFunction) {
 response.type('text/plain');
 response.send('Homepage');
 }

 getAboutPage(request: Request, response: Response, next: NextFunction) {
 response.type('text/plain');
 response.send('My name is Jimmy.');
 }
}

Route

建立 routes。

src/routes/api-routes.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


import express, { Router, Request, Response, NextFunction } from 'express';
import { ApiControllers } from '../controllers/api-controllers';

const apiControllers = new ApiControllers;

export class ApiRouter {
 router: Router;
 constructor() {
 this.router = express.Router();
 this.initializeRoutes();
 }

 initializeRoutes() {
 this.router.get('/', apiControllers.getHomePage);
 this.router.get('/articles', apiControllers.getArticlesPage);
 this.router.get('/about-me', apiControllers.getAboutPage)
 }
}

調整 src/app.ts

src/app.ts

 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


import express, { Express, Request, Response, NextFunction } from 'express';
import { ApiRouter } from './routes/api-routes';

const port = 5000;

const app: Express = express();
const apiRouter = new ApiRouter;

app.use((request: Request, response: Response, next: NextFunction) => {
 response.setHeader("Access-Control-Allow-Origin", "*");
 response.setHeader(
 "Access-Control-Allow-Headers",
 "Origin, X-Requested-With, Content-Type, Accept, Authorization"
 );
 response.setHeader("Access-Control-Allow-Methods", "GET, POST, PATCH, DELETE");

 next();
});

app.use('', apiRouter.router)

app.use((request: Request, response: Response) => {
 response.type('text/plain');
 response.status(404)
 response.send('Page is not found.');
})

app.listen(port, () => {
 console.log(`server is running on http://localhost:${port}`)}
);

檔案結構：

將 routes 拆分成多個檔案

先建立一個 route 的 abstract class

src/routes/route.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


import { Router } from "express";

abstract class Route {
 protected router = Router();
 protected abstract setRoutes(): void;

 public getRouter() {
 return this.router;
 }
}

export default Route;

新增 AuthRoute 與 AuthController

src/controllers/AuthController.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


import { Request, Response } from "express";

class AuthController {
 echo(request: Request, response: Response, next: NextFunction) {
 response.type('text/plain');
 response.send('echo');
 }
}

export default AuthController;

src/routes/auth.route.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


import AuthController from "../controllers/AuthController"
import Route from "./route";

class AuthRoute extends Route{
 private authController = new AuthController();

 constructor() {
 super();
 this.setRoutes();
 }

 protected setRoutes() {
 this.router.get('/login', this.authController.echo);
 }
}

export default AuthRoute;

新增 ArticleRoute 與 ArticleController

src/controllers/ArticalController.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


import { Request, Response } from "express";

class ArticleController {
 getArticlesPage(request: Request, response: Response, next: NextFunction) {
 response.type('text/plain');
 response.send('All articles are here!');
 }
}

export default ArticleController;

src/routes/article.route.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


import ArticalController from "../controllers/ArticalController"
import Route from "./route";

class ArticleRoute extends Route{
 private articalController = new ArticalController();

 constructor() {
 super();
 this.setRoutes();
 }

 protected setRoutes() {
 this.router.get('/articles', this.articalController.getArticlesPage);
 }
}

export default ArticleRoute;

建立 router 並加載各個檔案的 route

移除原先的 src/routes/api-routes.ts，統一改成使用 src/routes/router.ts。

src/routes/router.ts

1
2
3
4
5
6
7
8


import Route from "./route";
import AuthRoute from "./auth.route";
import ArticleRoute from "./article.route";

export const router: Array<Route> = [
 new AuthRoute(),
 new ArticleRoute()
]

改寫 src/app.ts

src/app.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


import express from 'express';
import { router } from "./routes/router";

const app: express.Application = express();

app.use(express.json());
app.use(express.urlencoded({ extended: false }));

// load router
for (const route of router) {
 app.use(route.getRouter());
}

module.exports = app;

前綴 Prefix

同一個 route 檔案常常會有相同的 prefix url，例如說 auth route 可能會有：

POST auth/login
POST auth/logout
POST auth/forgetPassword
…

我們在 Route class 中加入一個新的資料成員 prefix，用來設定每個 route 的前綴網址：

src/routes/route.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19




import { Router } from "express";

abstract class Route {
 protected router = Router();
 protected abstract setRoutes(): void;
 protected prefix: string = '/';

 public getRouter() {
 return this.router;
 }

 public getPrefix() {
 return this.prefix;
 }
}

export default Route;

在各個 Route 的建構子中修改它：

src/routes/auth.route.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


import AuthController from "../controllers/AuthController"
import Route from "./route";

class AuthRoute extends Route{
 private authController = new AuthController();

 constructor() {
 super();
 this.prefix = '/auth';
 this.setRoutes();
 }

 protected setRoutes() {
 this.router.get('/login', this.authController.echo);
 }
}

export default AuthRoute;

src/routes/article.route.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


import ArticalController from "../controllers/ArticalController"
import Route from "./route";

class ArticleRoute extends Route{
 private articalController = new ArticalController();

 constructor() {
 super();
 this.prefix = '/articles';
 this.setRoutes();
 }

 protected setRoutes() {
 this.router.get('/articles', this.articalController.getArticlesPage);
 }
}

export default ArticleRoute;

最後，在 app.ts 中，載入 router 時加入 prefix 的設定：

src/app.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


import express from 'express';
import { router } from "./routes/router";

const app: express.Application = express();

app.use(express.json());
app.use(express.urlencoded({ extended: false }));

// load router
for (const route of router) {
 app.use(route.getPrefix(), route.getRouter());
}

module.exports = app;

如此一來，原本是 /login 的 url，在加上 prefix 之後，就會變成 /auth/login，而其他在 AuthRoute 定義的 url 也都會變成 /auth/*、在 ArticleRoute 定義的 url 也都會變成 /articles/*。

Middleware

在 Express 中，有三種可以嵌套 middleware 的方式：

應用到單一 url
應用到單一 route 檔案
全域使用，每個請求都會經過這個 middleware

我們先寫一個簡單的 middleware，他只看請求的 header 裡面有沒有 Authorization，若沒有的話會回傳 status code 401：

src/middleware/AuthMiddleware.ts

1
2
3
4
5
6
7
8
9


import { Request, Response, NextFunction } from "express";

export function AuthMiddleware(req: Request, res: Response, next: NextFunction) {
 if (!req.header('Authorization')) {
 return res.status(401).send('unauthorized');
 }

 next();
}

套用在單一 url

若你想套用在單一 url，只需要放在 router.METHOD 的第二個參數即可：

src/routes/auth.route.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


import AuthController from "../controllers/AuthController"
import AuthMiddleware from "../middleware/AuthMiddleware"
import Route from "./route";

class AuthRoute extends Route{
 private authController = new AuthController();

 constructor() {
 super();
 this.prefix = '/auth';
 this.setRoutes();
 }

 protected setRoutes() {
 this.router.get('/login', AuthMiddleware, this.authController.echo);
 }
}

export default AuthRoute;

套用在單一 route 檔案

套用在單一 route 檔案，則在該 route class 的建構子加入 (必須在 setRoutes() 之前)：

src/routes/auth.route.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


import AuthController from "../controllers/AuthController"
import AuthMiddleware from "../middleware/AuthMiddleware"
import Route from "./route";

class AuthRoute extends Route{
 private authController = new AuthController();

 constructor() {
 super();
 this.prefix = '/auth';
 this.router.use(AuthMiddleware); // 必須在 setRoutes() 之前
 this.setRoutes();
 }

 protected setRoutes() {
 this.router.get('/login', this.authController.echo);
 }
}

export default AuthRoute;

全域使用

全域使用的話，就在 app.ts 裡面加上：

src/app.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


import express from 'express';
import { router } from "./routes/router";
import AuthMiddleware from "../middleware/AuthMiddleware"

const app: express.Application = express();

app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(AuthMiddleware);

// load router
for (const route of router) {
 app.use(route.getPrefix(), route.getRouter());
}

module.exports = app;

Validator

若要驗證 Request body 或 query string 的內容，建議可以使用 express-validator 套件，裡面有各式各樣的驗證用 middleware 可供使用。

1

npm install express-validator @types/express-validator

假設我們的登入表單需要有 username 和 password 兩個欄位，且最少要有四個字。

我們能夠將這個驗證寫成 request 檔案：

src/requests/AuthRequest.ts

1
2
3
4
5
6
7
8


import { check } from "express-validator";
import { showApiError } from "../middleware/AuthMiddleware";

export const loginRequest = [
 check('username').exists().isLength({min: 4}),
 check('password').exists().isLength({min: 4}),
 showApiError
];

改寫 AuthMiddleware ：

src/middleware/AuthMiddleware.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


import { Request, Response, NextFunction } from "express";
import { validationResult } from "express-validator";

export function showApiError(req: Request, res: Response, next: NextFunction) {
 const errors = validationResult(req);
 if (!errors.isEmpty()) {
 return res.status(400).json({ errors: errors.array() });
 }

 next();
}

showApiError 是為了在有 input 錯誤發生時，能夠回傳對應的錯誤訊息而使用的 middleware，如果沒有它的話，validator 不會回傳錯誤訊息。

接著我們在 auth route class 裡面載入這個 request：

src/routes/auth.route.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


import AuthController from "../controllers/AuthController";
import Route from "./route";
import { loginRequest } from "../requests/AuthRequest";

class AuthRoute extends Route{
 private authController = new AuthController();

 constructor() {
 super();
 this.prefix = '/auth';
 this.setRoutes();
 }

 protected setRoutes() {
 this.router.get('/login', loginRequest, this.authController.echo);
 }
}

export default AuthRoute;

如此一來 POST /login 的請求就會驗證 request body，當我的 username 輸入太短時，會得到以下錯誤：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


{
 "errors": [
 {
 "value": "123",
 "msg": "Invalid value",
 "param": "username",
 "location": "body"
 }
 ]
}

因為 request 其實就是 middleware 的陣列，因此若要嵌套其他 middleware 時，使用 Array merge 即可。

簡單扼要的介紹什麼是 Node.js？

Tue, 14 Feb 2023 00:00:00 +0000

本文整理自我初學 Node.js 時的筆記，用於對 Node.js 這門語言有興趣的讀者簡單扼要的介紹 Node.js 是什麼，以及該如何學習這門語言。

什麼是 Node.js？

Node.js 是 Ryan Dahl 在 2009 年為了解決 Web 服務器高併發問題而開發的基於 Chrome V8 引擎的 JavaScript 運行時環境。

從這個定義中，可以看到 Node.js 的三個關鍵特徵：

目的：為了解決Web 服務器高並發問題。
底層：使用的是 Chrome V8 引擎。
本質：一個 Javascript 運行時環境(runtime environment)。

因此，要搞清楚什麼是 Node.js，首先就要搞清楚以上三個關鍵特徵。

Node.js 三個關鍵特徵

為了解決 Web 服務器高並發問題

Ryan Dahl 在設計 Node.js 之前，一直致力於解決 Web 服務器高併發引起的性能問題，根據工作經驗，他認為性能問題的瓶頸在於阻塞的 I/O 操作。恰逢 Chrome 推出了高性能的 V8 引擎，Ryan Dahl 認為 JavaScript 天然的異步、事件委託機制以及 JavaScript 語言在服務端無歷史包袱的特性，非常適合通過異步流程控制的方式提升大型分佈式系統性能。於是 Node.js 應運而生。

儘管現在 Node.js 已經被應用於各種各樣的場景。但是我們始終應該認識到，理解 Node.js 的異步流程控制原理才算是掌握了 Node.js 的核心。

Chrome V8 引擎

Chrome 內核基於 WebKit，分為以下兩個引擎：

渲染引擎： Web Core
JavaScript 解釋引擎： JavaScript Core

而 Google 由於不滿意 JavaScript Core 的性能，於是自主研發了性能更好的 V8 引擎予以取代。

作為 JavaScript 的解釋引擎，V8 引擎的主要作用在於：

解釋與編譯JavaScript；
堆管理；
處理內存垃圾回收；
處理內存分配；
…

可以說，V8 引擎提供了一個高性能的 JavaScript 執行環境，因而 JavaScript 能夠有充足的底氣在各平台（瀏覽器，服務端，桌面端）運行。

Javascript 運行時環境

Node.js 既不是一門語言（JavaScript），也不是一個框架（React、Vue、Koa），而是一個 JavaScript 運行時環境(runtime environment)。

那，什麼是 JavaScript 運行時環境(runtime environment) 呢？

顧名思義，是一個可以運行 JavaScript 的環境。

那麼這裡的環境是指什麼呢？主要包含以下兩個方面：

提供了解釋，編譯 JavaScript 的底層能力。
提供了一系列接口，使開發者可以通過 JavaScirpt 調用系統底層能力（例如網絡，文件讀寫等）。

前者是由 Chrome V8 引擎提供的，而後者則是由一個底層由 C、C++ 編寫的高性能的事件驅動的異步 I/O 庫 libuv 所提供。

libuv

libuv 是一個跨平台的事件驅動的異步 I/O 庫，為 Node 提供了 CPU 和操作系統層面的功能。

我們知道不同的操作系統調度硬件的方式不同，CPU 的指令集也各有差異。libuv 則抹平了這一差異，通過名為 Node Bindings 的模塊，向用戶暴露了統一的系統操作接口。

因此現在我們可以說，Node 實際上由兩部分組成：Chrome V8 引擎以及 libuv。這兩層隱藏在 Node Bindings 之下，而用戶面向 Node Bindings 進行編程。

至此你應該理解了什麼是 Node.js。

它是一個跨平台的 JavaScript 可執行環境，在這個環境中你可以使用 JavaScript 充分調動操作系統的能力，做你想做的任何事！

Node.js 的哲學

要充分的理解 Node.js，除了前文提到的異步流程控制原理之外，我們還需要了解下 Node.js 從創始到發展所彰顯的設計哲學，這有利於我們更喜歡 Node.js 生態。

我認為 Node.js 有以下三大特點：

開放

Node.js 在設計之初，就堅持將核心庫做的足夠小，以便讓充分發揮社區的創造性，讓所有搭建大型系統的構建都盡可能來源於社區，因此每個構件都可以快速試錯和迭代。不得不說，這種做法雖然有顯得有些偷懶，但是事實證明這種對社區的信賴，和開放的態度收穫了巨大的回報：Node.js 擁有了全世界最活躍也是最大的社區和包管理平台 npm。

專注

Node.js 社區的開發者始終保留著一個默契，將 package 的功能約束的足夠窄，最好一次只做好一件事(單一職責原則)，並對外暴露單一的接口。這樣 package 的開發，設計，測試就會變得更加簡單，package 也就更加可靠。這種專注，也同時表現了開發者們的謙遜以及效率至上。

簡約

Node.js package 通常只暴露單一模塊和接口，並繼承了 JavaScript 的簡約特點，使用簡單的數據結構。這使得 Node.js 包易於閱讀和理解。

前端開發者如何學習 Node.js？

對於從未涉足過服務端開發的前端開發者而言，以下幾點是學習 Node.js 過程中必須補足的知識：

對 JavaScript 語言特性（特別是 ESNext），語法的深入理解。
數據庫知識與數據表設計能力。
系統架構能力。

而學習 Node.js 則可以分為兩個部分：

學習 Node.js 的核心庫的使用。
學習相關 Web 框架的使用。

在整個學習過程中，建議採用以下四步學習：

閱讀官方文檔。
撰寫 Demo 熟悉語法驗證思路。
在此過程中不斷地問自己問題，並深入調研得到答案。
通過對外輸出，分享所得加深自己的印象。

小結

Node.js 在如今已經是每一位前端開發者必須掌握的技術，它通過 libuv 向前端開發者開放了操作系統層面的底層能力，讓開發者能夠全面使用計算機的算力和功能。並用一種語言解決 Web 應用開發的所有問題的想法成為可能。希望通過本文的介紹，您能夠對 Node.js 產生好奇，祝您在未來的探索旅途中，過得愉快。

使用 Node.js 串接 MongoDB (含CRUD)

Mon, 06 Feb 2023 00:00:00 +0000

參考網站
 參考網站
 參考網站
 參考網站
 參考網站

資料庫的連結對於網頁是不可或缺的，無論是 MongoDB 或是 Django，這種 NoSQL 的資料庫構建套件都十分的受程式設計師的歡迎，由於其不用再去學 SQL 格外的構築語法，NoSQL 就成為了廣為人知的開源資料庫，最近專案正好使用到 MongoDB，本篇來介紹一下 MongoDB、MongoDB 的安裝方式，以及使用 Node.js 串接 MongoDB 的 CRUD。

MongoDB 資料庫簡介

MongoDB

MongoDB 是什麼？

MongoDB 是一種文件導向資料庫管理系統，由 C++ 撰寫而成，是一個以分散式檔案儲存為基礎的資料庫，旨在 Web 應用提供可擴充的高性能資料儲存解決方案。

它是 10gen 開發的 NoSQL (Not only SQL - 不只有 SQL)。
不是關聯式資料庫，沒有 Schema。
它是用來處理巨量資料的資料庫，這個資料庫是以文件導向儲存(Document Oriented Storage)的資料庫，以 key:value 表示，儲存格式與 JSON 完全一樣。
簡潔的文件模型。
容易水平擴展。
三層式的結構：

資料庫(Database)
集合(Collection)
文件(Document)

MongoDB 的層級架構

MongoDB 世界的層級觀念，分別由大而小：

Database (資料庫)： 資料庫，儲存所有「表」跟資料的地方，在一個 MongoDB 伺服器中通常會有一至多個 Database，通常將不同的應用放在不同 database 中。
Collection (集合)：就是資料表，概念好比關聯式資料庫的 Table。通常一個 databse 中會有數個 collection。
Document (文件)：就是一筆資料，概念就如同關聯式資料庫的 Row。通常一個 collection 中會有數筆 document。也因此我們稱 MongoDB 是 document database。

MongoDB 資料 v.s. 關聯式資料庫

關聯式資料庫(RDBMS)	MongoDB
Database	Database
Table	Collection
Tuple/Row	Document
Column	Field
Table Join	Embedded Documents
Primary Key	Primary Key (如果沒有設定，mongodb會自動給予預設主鍵值 _id 欄位)

BSON？

BSON 就是 JSON 格式的 key-value 組合，採用 JSON 的二進位表示。

MongoDB 在儲存資料時，都必須採用 BSON 格式做處理。

使用 BSON 的優點包含：

在空間儲存上較有效率
有更多 type（資料格式）可以使用：如 ObjectId、Regular Expression、Timestamp 等，都是 BSON 支援的格式

我們以網站結構範例來示範：

會員資料

1
2
3
4
5
6
7
8
9


{
 "email": "jddj4541@gmail.com",
 "password": "54875487"
},
{
 "email": "jddj4541@gmail.com",
 "password": "54875487"
},
...

因為 MongoDB 的 schemeless 特性，當我們突然想為其中一個 user 紀錄手機，只需要在那個 user 的 document 中加入「手機」這個新欄位就行，其他 user 完全不受影響。

會員資料

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


{
 "email": "jddj4541@gmail.com",
 "password": "54875487"
},
{
 "email": "jddj4541@gmail.com",
 "password": "54875487",
 "phone": "0912345678"
},
...

實際上 BSON 支援的 type 有很多，這邊我們再舉一個包含多種 type 的 document 當作範例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


{
 "_id": ObjectId("5099803df3f4948bd2f98391"), // _id 屬性是 ObjectId，常作為主鍵
 "name": { "first": "Alan", "last": "Turing" }, // name 屬性是 object
 "email": "jddj4541@gmail.com",
 "password": "54875487",
 "phone": "0912345678",
 "birth": new Date('Jun 23, 1912'), // bitrh 屬性是日期
 "death": new Date('Jun 07, 1954'),
 "contribs": [ "Turing machine", "Turing test", "Turingery" ],
 "views": NumberLong(1250000)
}

在 Windows 上安裝 MongoDB

在安裝前，我們先來確認 Windows 版本。

在終端機輸入，並執行：

1
2
3
4


wmic os get osarchitecture

> OSArchitecture
> 64-bit # 顯示出所用的 OS 是哪一種結構。

接著，我們去 MongoDB Downlad Center 下載所需套件：

下載後，可以參考 Install on Windows 我們就依此文件，做以下的操作：

安裝流程

Step 1.

Step 2.

Step 3. 可以選 Custom 安裝，這裡就可以設定安裝的路徑。

Step 4. 系統預設是安裝在 C:\Program Files\MongoDB\Server\6.0\ 那我們這裡就依照官方的，不改。

Step 5.

Step6. 完成

Bonus(一)：下載 mongosh.exe

前往安裝目錄下 /bin 目錄中，會發現沒有 mongo.exe 檔案，原因在於：MongoDB 6.0 以後做出了重大改變，已經不再預設為你安裝 shell 工具，因此需要安裝一個額外的 shell：Install mongosh – MongoDB Shell，這個工具被稱為 mongosh。

前往頁面下載 mongosh.exe，下載後將解壓縮出來的 bin 資料夾內的檔案，複製到安裝目錄下 /bin 目錄中。

直接點擊 mongosh.exe 即可進入 MongoDB shell 界面。

Bonus(二)： “mongo” 不是內部或外部命令

要執行 MongoDB Shell，還需要回到 /bin 目錄底下，無法在任意地方執行 MongoDB Shell，原因：環境變數未設定。

設定步驟：

“開始"選單點選右鍵 -> 系統 -> 進階系統設定。
點選"進階” -> 環境變數。

系統變數的 Path，點擊"編輯"。
將 C:\Program Files\MongoDB\Server\6.0\bin 加入原本字串後方！

(新版的 Windows，C:\... 前面可以不用加分號 ;C:\...)

確定後即可在任意地方，啟動你的 MongoDB、MongoDB Shell。

Bonus(三)：移除 MongoDB 服務

有安裝服務，就也有移除服務，如果你決定要移除 MongoDB 服務，可以在終端機執行：

1
2
3


"C:\Program Files\MongoDB\Server\6.0\bin\mongod.exe" --remove
# or
# mongod --remove

執行啟動 MongoDB

MongoDB 預設資料庫存放位置是 ${安裝目錄}\data\db，所以我們可以建立這樣的資料庫路徑：

在 C:\ 以 Command pormpt 執行：

1

mkdir \MongoDB\data\mydb

接著執行：

1

cd "C:\Program Files\MongoDB\Server\6.0\bin"

目前，我們位在 C:\Program Files\MongoDB\Server\6.0\bin >

輸入：

1

mongod --dbpath c:\MongoDB\data\db

啟動同時，指定資料庫存放位置！

接著，出現像這樣的畫面，表示 MongoDB 已經正常啟動了！

你就可以開始使用了！

可以參考一些文件 Getting Started 來做測試。

Note：關於資料庫存放位置，其實可以自己設定好一個資料夾位置，指定過去就好囉！不限於一定得在 \data\db 之下！

使用 MongoDB Shell

連線資料庫

資料庫啟動以後，我們開啟另一個終端機執行：

1
2


mongosh
# .exe 可以不用

啟動 MongoDB Shell 環境，當我們看到如圖畫面，代表連線 MongoDB 成功：

查看與使用資料庫

我們可以做一些簡單的查詢，比方 show dbs 可以看到底下有哪些資料庫。

要使用資料庫 TestDB，可以用 use TestDB

如圖：

關閉資料庫

離開 MongoDB Shell，使用 exit
關閉 MongoDB 服務、關閉資料庫、中斷連線，在 admin 資料庫下，使用 db.shutdownServer()

觀看指令資料庫裡面的集合

1

show collections

新增一筆資料 `inserOne`

1
2
3


db.rooms.insertOne(
 { name: "單人房", price: 1000, rating: 4.5 }
)

新增多筆資料 `insertMany`

1
2
3
4
5
6


db.rooms.insertMany(
 [
 { name: "豪華單人房", price: 1500, rating: 4.3 },
 { name: "雙人房", price: 2000, rating: 4.8 },
 ]
)

尋找集合裡面的資料

1

db.collections.find()

一般搜尋：
- db.<集合名稱>.find()
- 尋找對應屬性：db.collections.find({屬性名稱:屬性值})
- 模糊搜尋：db.rooms.find({"name":/雙/})
- 數值區間：db.collections.find({屬性名稱:{$lte:400}})
- 複合條件：db.collections.find({屬性名稱:{$lte:400},rating:{$gte:4.8}})
常用語法：
- project 保護欄位：db.rooms.find({"name":/雙/},{"_id":0})
- 搜尋陣列裡面的值：db.rooms.find({"payment":{$in:["信用卡"]}}

運算子	說明
$eq	等於
$gt	大於
$lt	小於
$gte	大於等於
$lte	小於等於
$in	存在某個值
$nin	不存在某個值
or	或
and	與

舉個例子：

1
2
3
4
5
6
7
8


db.rooms.find(
 { $and:
 [
 { price: { $lte:1500 } },
 { rating: { $gte:4.5 } }
 ]
 }
)

修改(updateOne)

updateOne

replaceOne() 只能替換整個文件；updateOne() 允許更新欄位。

1
2
3
4
5
6
7
8


db.rooms.updateOne(
 {
 "_id": ObjectId("621edf99a20aa7506a116f9a")
 },
 {
 $set: { name: "修改雙人房" }
 }
)

修改多個值

修改多個值 updateMany(filter 篩選 > $set 更換設定)

1
2
3
4


db.rooms.updateMany(
 { rating: { $gt:4.5 } },
 { $set: { price:300 } }
)

替換整個文檔：`replaceOne`、`replaceMany`

1
2
3
4
5
6
7


db.collection.replaceOne(filter, replacement, options)

-- 舉個例子：
db.rooms.replaceOne(
 { "_id": ObjectId("621edf99a20aa7506a116f9a") },
 { name: "yes~" }
)

刪除多個文件：`deleteMany(filter)`

1
2
3


db.rooms.deleteMany(
 { rating: { $gte:4.3 } }
)

資料集結購

 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


[
 {
 "rating": 4.5,
 "price": 1000,
 "name": "標準單人房",
 "payment": ["信用卡","ATM"]
 },
 {
 "rating": 4.3,
 "price": 1500,
 "name": "豪華單人房",
 "payment": ["信用卡","ATM"]
 },
 {
 "rating": 4.8,
 "price": 2000,
 "name": "標準雙人房",
 "payment": ["信用卡","ATM"]
 },
 {
 "rating": 4.7,
 "price": 2500,
 "name": "豪華雙人房",
 "payment": ["ATM"]
 },
 {
 "rating": 4.0,
 "price": 3000,
 "name": "標準四人房",
 "payment": ["現金"]
 },
 {
 "rating": 3.5,
 "price": 10000,
 "name": "總統套房",
 "payment": ["現金"]
 }
]

查詢指令使用，好用的 `help`

配置 MongoDB 服務

如果，我們想要將操作 MongoDB 的記錄，寫進 log 裡。

我們先建立一個放置 log 的資料夾，為了有規律的放置檔案：

C:\MongoDB\data\db 放置 database
C:\MongoDB\data\log 放置 log

所以，建立一個資料夾 log

1
2


# 於 C:\MongoDB\data 下
mkdir log

接著，我們要建立一個 config 檔案，它是 MongoDB 的配置檔，內容可以配置 db 路徑(storage.dbPath)及 log 寫入檔案(systemLog.path)。

C:\MongoDB\data\log\mongod.cfg

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


storage:
 dbPath: C:\MongoDB\data
 journal:
 enabled: true

systemLog:
 destination: file
 logAppend: true
 path: C:\MongoDB\data\log\mongod.log

net:
 port: 27017
 bindIp: 127.0.0.1

接著，我們以系統管理員身份啟動終端機

1
2


# 安裝設定(cfg 檔位置必須為絕對路徑，否則會報錯)
mongod --config "C:\MongoDB\data\log\mongod.cfg" --install

接著，我們就可以直接在任意位置，以簡單的方式，啟用服務，而不用每次啟動，都要指向資料庫位置。

不再用 mongod –dbpath C:\MongoDB\data\db 這一長串東西。

啟用服務：

1

net start MongoDB

停用服務：

1

net stop MongoDB

如圖：

每執行服務，都會寫一次 log 檔，在我們當初配置的資料夾。

以上，我們已經完成了 MongoDB 的安裝與執行，再來說明使用 Node.js 串接 MongoDB 做 CRUD。

Node.js 串接 MongoDB 做 CRUD

這邊先著重 Node.js 概括的學習，閒有餘力，再深入 MongoDB。

關於 MongoDB 比較基礎且重要的，可以先參考：

MongoDB CRUD Operations

它裡面教你如何在 MongoDB 裡新增、讀取、更新、刪除的基本資料操作。

這邊我直接參考 access-mongodb-in-nodejs 完成此篇這一系列的 Node.js 學習。

那我們開始吧！

NPM 安裝 MongoDB driver

我們需要安裝 mongodb-driver，在終端機輸入：

1
2
3


npm install mongodb -g
cd myapp
npm install mongodb --save

我們打開 package.json 看，安裝了 mongodb: "5.0.0" (注意，這裡安裝的是 driver，不是 MongoDB 喔！)

啟動 MongoDB Server

接著，我們要啟動我們的 MongoDB Server，可在終端機輸入：

1
2
3


# 也可以直接在 myapp 裡建一個測試的數據資料庫存放位置
mkdir testdb
mongod --dbpath c:\myapp\testdb

或是，如果已經設定好 config 的 MongoDB service，那就直接使用：

1

net start mongodb

註：這邊可能要用系統管理員身份執行終端機才可以正確執行！

Node.js 連接 MongoDB

mockserver.js

1
2
3
4
5
6
7
8
9


let MongoClient = require('mongodb').MongoClient;

// Connect to the db
MongoClient.connect("mongodb://localhost:27017/mymondb", function(err, db) {
 if(err) throw err;
 // Write databse Insert/Update/Query code here..
 console.log('mongodb is running!');
 db.close(); // 關閉連線
});

這個例子裡，我們載入 MongoDB module，並且使用 MongoClient 物件。

接著，使用 MongoClient.connect() 方法，以取得 MongoDB 資料庫的引用。

其中，URL 的部份，"mongodb://localhost:27017/mymondb"，指向你之前指定的 MongoDB 資料夾位置 C:\myapp\testdb。

connect() 方法，會回應一個 database 參考，如果所描述的 database (這裡的例子叫做 mymondb) 存在，就連線；無就自動新增。

我們來看看，以上例子，如果有成功連線時的執行結果：

當我們建立了 Node.js 與 MongoDB 連線後，可以使用 connect() 裡的回呼函式其 DB 參數，開始做一些新增Insert(Create)、更新Update、查詢Query(Retrieve/Read)、刪除Delete 資料的動作。

新增(Insert/Create)資料

現在，我們來為我們的資料庫新增一些資料。

moncreate.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


let MongoClient = require('mongodb').MongoClient;

MongoClient.connect("mongodb://localhost:27017/mymondb", function(err, db) {

 if(err) throw err;
 //Write databse Insert/Update/Query code here..

 db.collection('Persons',function(err, collection) {
 collection.insert({ id:1, firstName:'Steve', lastName:'Jobs' });
 collection.insert({ id:2, firstName:'Bill', lastName:'Gates' });
 collection.insert({ id:3, firstName:'James', lastName:'Bond' });

 collection.count(function(err, count) {
 if(err) throw err;
 console.log('Total Rows:' + count);
 });
 });
 db.close(); // 關閉連線
});

在這個例子中，我們用 db.collection 方法去新增並且獲取 collections 的一些資訊，如總筆數。

別忘了，在介紹 MongoDB 與關聯式資料庫的關係時，我們知道 collection 其實就是 table。

而這個例子裡，我們在 mymondb 資料庫建立了一個 Persons - collection(資料表)，並且，為這 Persons 資料表新增了 3 筆資料，我們在這裡叫 documents (列)。

結果如圖：

我們也可以使用 Mongo Shell，查詢：

更新(Update)資料

做完了新增，如果我們想要更新其中 id == 1 的資料。

monupdate.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


let MongoClient = require('mongodb').MongoClient;

MongoClient.connect("mongodb://localhost:27017/mymondb", function(err, db) {
 db.collection('Persons',function(err, collection) {
 // collection.update
 // 第一個參數是要更新的條件
 // 第二個參數 $set:更新的欄位及內容
 // 第三個參數 writeConcern
 // 第四個參數執行 update 後的 callback 函式
 collection.update(
 { id: 1 },
 { $set: { firstName: 'James', lastName: 'Gosling'} },
 { w: 1 },
 function(err, result) {
 if(err) throw err;
 console.log('Document Updated Successfully');
 }
 );
 });
 db.close(); // 關閉連線
});

我們在終端機執行 node，並且在 Mongo Shell 可以看到更新前與更新後的資料，如圖：

關於第三個參數 - writeConcern

這個網站有詳細說明，可以去參考看看，我們這裡使用，常用的 {w:1} 即可，不用也沒差！

刪除(Delete)資料

現在，我們想要刪除 id == 2 的 Document(Row)。

mondelete.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


let MongoClient = require('mongodb').MongoClient;

MongoClient.connect("mongodb://localhost:27017/mymondb",function(err, db) {
 db.collection('Persons', function(err, collection) {
 collection.remove(
 { id: 2 },
 { w: 1 },
 function(err, result) {
 if(err) throw err;
 console.log('Document Removed Successfully!');
 }
 );
 });
 db.close(); // 關閉連線
});

我們在終端機執行 node，並且在 Mongo Shell 可以看到刪除前與刪除後的資料，如圖：

查詢(Query)資料

維持 Persons 新增後的狀態！即原本的3筆！現在，我們想要找 firstName == “Bill”。

monquery.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


let MongoClient = require('mongodb').MongoClient;

MongoClient.connect("mongodb://localhost:27017/mymondb", function(err, db) {
 db.collection("Persons", function(err, collection) {
 collection.find({ firstName: "Bill" }).toArray(function(err, items) {
 if(err) throw err;
 console.log(items);
 console.log("We found " + items.length + " results!");
 });
 });
 db.close(); // 關閉連線
});

我們在終端機執行 node，可以看到被擷取出來的結果，如圖：

!!重要!!
關於更多 Collection 的操作，可以參考：Collection Methods，特別在使用查詢 find，有不同於以往 SQL 的使用語法。

3 種使用 Regex 正則表達式對資料夾中的文字檔進行搜尋與取代的方法

Fri, 03 Feb 2023 00:00:00 +0000

參考網站
 參考網站
 參考網站
 參考網站
 參考網站

在整理開發環境的時候，經常會有批次調整檔案內容的需求，我今天特別整理了 3 種不同的解決方案，這些方法都可以看情況使用！

Linux / WSL

在 Linux 環境下使用 find 與 sed 幾乎是標準方案，這套組合拳確實快速又強大！👍

1

find src -name '*.ts' -type f -exec sed -i 's/pattern\([s]\)/replacement\1/g' '{}' \;

透過 sed 來取代內容的話，在 Regex 語法上稍微有點不同，左邊的小括弧要加上反斜線跳脫 ( $ 或 $ )，而 backreference 也要用反斜線來表達 ( \1、\2、… )

Windows (PowerShell)

在 Windows 上面使用 PowerShell 來寫腳本，可讀性會比較好！

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


Get-ChildItem -Path 'src' -Include '*.ts' -Recurse -Exclude reparsepoint | ForEach-Object {
 $current_file = "$($_.FullName)"
 $replace_file = "$($_.FullName).new"

 # 這裡 Get-Content 前後的小括弧很重要，一定要加上才能得到 String 的結果，指定 utf8 編碼也十分重要！
 (Get-Content -LiteralPath $current_file -Encoding utf8) -replace 'pattern([s])', 'replacement$1' |
 Out-File -Encoding utf8 -LiteralPath $replace_file

 Move-Item -LiteralPath $replace_file -Destination $current_file -Force
}

Node.js

如果我們要在前端專案中整合字串取代的工作，在 package.json 的 scripts 直接取代檔案，同時又要兼顧跨平台的話，採用既有的 npm 套件就會來的方便許多。這裡我找了個 replace-in-file 套件還不錯！👍

先安裝到專案中：

1

npm install -D replace-in-file

取代內容可以這樣寫，也可以使用超好用的 Glob 語法(e.g. src/**/*.ts)：

1

npx replace-in-file "/pattern([s])/g" "replacement$1" src/**/*.ts --isRegex --encoding=utf-8

用 Node.js 建立你的第一個 OpenAI LINE Bot 聊天機器人

Mon, 12 Dec 2022 00:00:00 +0000

參考網站
 參考網站

最近 OpenAI 的 ChatGPT 非常的火紅，剛好這個 ChatGPT 是有提供 API 可以串接的，也非常適合整合到 Line Bot 上，所以這一篇我就來介紹如何使用 Node.js 基於 OpenAI 的 ChatGPT API 來建立一個 Line 聊天機器人吧！

申請 OpenAI API

首先，請你先進入 OpenAI 的網站註冊會員，這邊你可以選擇第三方服務帳號(如：Google、Microsoft)或是 Email 帳號註冊。

註冊完後，你就可以開始申請 API 了！

如果你本身有帳號的話，那就直接登入 OpenAI 吧。

登入後，你應該會看到這個畫面

接著找到你的頭像點它，找到「View API keys」。

找到後你會看到「API keys」的申請畫面，點一下下方的「Create New Secret key」，這樣你就拿到串接 OpenAI 的 key，請先把它記下來，後面會用到。

API key generated 是非常重要的，因此請不要隨意提供給他人，以免造成不必要的損失。

那麼我們申請這個是 API Key 要幹嘛呢？主要是稍後後面會串接 OpenAI 所提供的 API 來使用 ChatGPT，如果你還不知道什麼是 ChatGPT 的話，你可以試著玩一下 ChatGPT，簡單來講 ChatGPT 是一個非常聰明且厲害的聊天機器人，它可以做到的事情非常多，例如像是…

請它規劃日本旅遊行程
寫一篇行銷文案
幫忙找出程式碼錯誤
程式碼解題

…等等，非常多

因此我們申請這個 API Key 就是用來串接 ChatGPT 的！

OpenAI 本身有提供免費的額度，三個月 18 美金，除此之外，OpenAI 的計算方式會因你使用的 model 不同而有不同的計算方式，例如像是「Davinci」的計算方式是 $0.0200(美金) / 1K tokens，如果你想要了解更多的話，可以參考這邊。

額外補充
什麼是 tokens？
tokens 是指你輸入的字數，例如：「我想要去日本旅遊」，這句話有 8 個字，因此 tokens 就是 8。

申請 Line Developer

接下來我們要來申請 Line Developer 帳號，你可以透過這個連結快速進入 Line Developer 網站，登入方式，基本上就是使用 LINE 帳號登入。

登入後，你可以透過這個連結，進入 LINE 的開發者後台。

接著，你會看到畫面上什麼都沒有，所以這邊你要點一下中間的「Create a new provider」，這個類似於一個公司帳號的概念，底下會有許多的專案，所以你可以把它想像成一個公司，而這個公司底下有許多的專案，例如：Line Bot、Line MUSIC 等等之類你的服務。

這邊的話，範例我們就叫做「Wayne’s OpenAI Bot」。

建立的過程是非常快的，因此當你點下「Create」之後，你就可以馬上看到 Wayne’s OpenAI Bot 的畫面。

接著，點一下畫面上的「Create a Messaging API channel」，因為我們要來申請一個聊天機器人，所以我們要使用「Messaging API」。

進入「Create a Messaging API channel」後，會有一些欄位要填寫：

Channel type：
- 保持預設 Messages API。
Provider：
- 保持預設「Wayne’s OpenAI Bot」即可。
Company or owner’s country or region：
- 依據你的公司所在地選擇，這邊我選擇台灣。
Channel icon：
- 你可以之後再上傳，所以這邊先不用管。
Channel name：
- 這邊我們就叫「Wayne’s AI」吧。
Channel description：
- 你可以簡單描述一下，這個聊天機器人的功能，例如：「用於串接 OpenAI 的偉恩 Line 機器人」。
Category：
- 就選擇…「其他媒體」。
Subcategory：
- 接著一樣選「媒體（其他）」。
Email address：
- 這是當你的聊天機器人有問題時，信箱聯絡你的方式。
Privacy policy URL 與 Terms of use URL：
- 這兩個就不用理它，因為我們目前用不到。。

最後再打勾兩個條管，你就可以點下「Create」建立你的聊天機器人了。

由於這個頁面圖片太大張了，所以就不額外截圖。

當你按下「Create」之後，它會出現一個視窗，主要是告知你一些資訊，所以你可以按下 OK 關閉它。

到目前為止，我們只是申請好了一個 Line Bot，接著要來取得一些資訊，首先在「Base settings」中找到以下資訊並複製起來。

Channel ID
Channel secret

接著切換到「Messaging API」，找到「Channel access token」。

接著按下「issue」，你會取得一串很長的 Token，請複製起來，後面我們會使用到。

到目前為止，我們已經準備好了 Line Bot 的申請以及 OpenAI API 的申請，接下來就是準備進入撰寫程式碼的部分囉。

建立一個專案

建立專案方式我就不多述了，相信大家應該都很熟悉怎麼建立專案以及安裝 Node.js，而這邊我稍微會有一點特別，我會使用 pnpm 來建立，如果你真的完全沒想法，你可以參考我以下指令來建立一個專案，當然你也可以使用 npm 或是 yarn 來建立。

提示：以下指令適用於 Mac 系統，若為 Mac 建議額外 Google 一下指令。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


# 若尚未安裝pnpm，可使用此指令先進行安裝
# npm install -g pnpm

# 建立一個資料夾
mkdir line-bot

# 進入資料夾
cd line-bot

# 初始化專案
pnpm init

基本上到這邊就算是初始化好一個專案了，接著就是準備要來安裝 Line Bot 的套件了。

安裝相關套件

接下來我們要安裝 @line/bot-sdk 這個套件，請在專案終端機下輸入以下：

1

pnpm i @line/bot-sdk express dotenv

安裝好之後，你可以先在專案底下建立一個 app.js 的檔案，稍後我們就會開始撰寫 LINE Bot 的程式碼囉。

撰寫 LINE Bot

前面我們已經準備好了 app.js 檔案，接著就是要撰寫程式碼，不外乎前面就是引入 @line/bot-sdk、express 與 dotenv 這三個套件。

app.js

1
2
3
4


require('dotenv').config();

const express = require('express');
const line = require('@line/bot-sdk');

接著呢？其實 Line 官方有提供範例程式碼，因此我們是可以直接嘗試挪過來測試看看。

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


require('dotenv').config();

const line = require('@line/bot-sdk');
const express = require('express');

// create LINE SDK config from env variables
const config = {
 channelAccessToken: process.env.CHANNEL_ACCESS_TOKEN,
 channelSecret: process.env.CHANNEL_SECRET,
};

// create LINE SDK client
const client = new line.Client(config);

// create Express app
// about Express itself: https://expressjs.com/
const app = express();

// register a webhook handler with middleware
// about the middleware, please refer to doc
app.post('/callback', line.middleware(config), (req, res) => {
 Promise
 .all(req.body.events.map(handleEvent))
 .then((result) => res.json(result))
 .catch((err) => {
 console.error(err);
 res.status(500).end();
 });
});

// event handler
function handleEvent(event) {
 if (event.type !== 'message' || event.message.type !== 'text') {
 // ignore non-text-message event
 return Promise.resolve(null);
 }

 // create a echoing text message
 const echo = { type: 'text', text: event.message.text };

 // use reply API
 return client.replyMessage(event.replyToken, echo);
}

// listen on port
const port = process.env.PORT || 3000;
app.listen(port, () => {
 console.log(`listening on ${port}`);
});

記得在專案底下建立一個 .env 並填寫以下資訊跟 Key。

1
2


CHANNEL_ACCESS_TOKEN=
CHANNEL_SECRET=

理論上來講，你目前專案應該是已經可以輸入 node app.js 啟動了，所以你可以嘗試啟動看看，如果無法啟動的話，會建議你往前面的步驟再檢查一下。

部屬到 Render

到目前為止我們要先嘗試將專案部署到 Render 上面，否則我們並不清楚專案是否可以正常運作，因為在使用 Render 之前，我們需要先建立一個 Render 的帳號，如果你還沒有的話，可以先到這邊註冊一個帳號。

建立好後，會建議你將專案程式碼上傳到 GitHub 上，因為 Render 有提供 GitHub 的整合，這樣可以讓我們更方便的部署專案，而上傳到 GitHub 這流程就不再贅述了，因此我這邊假使你已經完成了將程式碼上傳到 GitHub 這個動作後，接著就是直接進入到 Render 後台。

這邊請選擇「Web Services」。

接著你可以在這個畫面上選擇專案，如果你發現你的畫面上一個專案都沒有的話，可以點一下旁邊的「Configure account」。

接著你可以在這邊選擇專案，懶一點的話你可以乾脆給它全部的權限，因為我們只是要部署一個簡單的專案，所以我就選擇我要的單一專案即可。

接下來畫面上應該就可以看到你的專案了，接著點選你要部署的專案。

在這邊點一下「Connect」。

這邊會要求你填一些欄位，我就不多說明了，我直接附上我的設定。

接著往下滾，就選擇「Free」專案即可，然後再點一下下方的「Advanced」。

因為我們要在「Advanced」區塊填入環境變數。

接著點一下「Add Environment Variable」，依照欄位填入。

最後其他設定可以不用管，直接點一下最後的「Create Web Service」。

預設 Render 會去偵測 Commit 紀錄，所以如果有新的 Commit，Render 會自動重新部署，如果你不想要這個功能的話，可以在「Advanced」區塊裡面，將「Auto Deploy」關閉。

那麼由於為了方便示範，因此我這邊預設會採用「Yes」。

接著你就可以看到你的專案正在部署了。

這個過程稍微會比較久一點，因為 Render 會將它打包成一個 Docker Image，然後再部署到它的伺服器上，所以這個過程會稍微比較久一點，但是不用擔心，因為它會自動幫你做這些事情，你只要等待它完成即可。

部署完畢的話，你可以在畫面看到他提示你專案已經運行起來並且開始部署。

而你的專案的網址，就會在這邊：

不出意外的話，應該是無法開啟的，因為我們只有做一個 post 的 API，那麼到這邊我們專案就正式部署出去了，基本上都不用理會它了。

這邊請記住網址，因為後面我們會在使用到。

加入 Line Bot 好友

接下來我們就要來實際測試一下，我們的 Line Bot 是否可以正常運作，而取得這個 LINE Bot 的 ID 方式就在 Developer Console 的「Messaging API」裡面。

加入好友後，你應該就會立刻看到好友歡迎的訊息通知。

接著你可以試著發送訊息給它，例如「Test」，但是你會發現它沒有辦法正常回應你。

因此接下來，我們要做一點調整，讓它可以正常回應你。

調整 Line Bot

這邊請你回到 Line Bot 的後台，點一下「Messaging API」，然後找到「Webhook settings」。

接著點一下「Edit」，然後將「Webhook URL」填入你的專案網址，例如 https://example.com/callback

callback 是因為我們 Express 專案的路由是 /callback，如果你的路由不是這個的話，請自行修改。

app.js

按下儲存後，你可以點一下「Verify」，來驗證你的網址是否正確以及專案是否正常，只要能看到「Success」就代表你的網址以及專案是正確的。

接著將下方的「Use webhook」打開。

打開後，你再去試著發送訊息給你的 Line Bot，你就會發現它可以正常回應你了，而且是不論你打什麼，他都會回應你剛剛打的字。

恭喜你，截至為止，我們終於把 Line Bot 正式處理好了。

關掉預設回饋

接下來你可能會想要把那段該死的提示回饋：

1
2
3
4


感謝您的訊息！

很抱歉，本帳號無法個別回覆用戶的訊息。
敬請期待我們下次發送的內容喔(moon smile)

以及加入好友通知：

1
2
3
4
5
6


XXX您好！
我是Wayne\'s AI。
感謝您加入好友

此官方帳號將定期發放最新資訊給您
敬請期待

這兩個關掉，關掉方式很簡單，一樣回到 Line Bot 的後台，點一下「Messaging API」，然後找到「Auto-reply messages」。

你會跳到 LINE@ 管理介面，將「加入好友歡迎訊息」以及「自動回覆訊息」關掉就搞定囉！

串接 OpenAI API

終於到了我們的重頭戲了，前面你可以發現 LINE Bot 的流程與申請非常的多且繁瑣，因此前面花很多時間在介紹，主要是希望你可以順利建立好你的 LINE Bot，確保你接下來的步驟不會有問題。

安裝 OpenAI 套件

首先我們要先安裝 OpenAI 的套件，請在專案底下輸入以下指令：

1

pnpm i openai

接著 openai 本身有提供範例程式碼：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


const { Configuration, OpenAIApi } = require("openai");

const configuration = new Configuration({
 apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

const completion = await openai.createCompletion({
 model: "text-davinci-002",
 prompt: "Hello world",
});
console.log(completion.data.choices[0].text);

因此基於上方這一段，我們稍候可以來修改一下，讓它可以跟我們的 LINE Bot 串接。

openAI 有提供多個 model 可以選擇，分別是：

text-davinci-003

text-curie-001

text-babbage-001

text-ada-001

其中目前(2022年)最紅的就是 text-davinci-003，因此我們這邊也會使用這個 model，每一個 model 都有不同的特性，你可以在這裡找到它的介紹。

調整 app.js 的程式碼

首先我們要先在 app.js 中引入 OpenAI 的套件。

app.js

1

const { Configuration, OpenAIApi } = require("openai");

接下來我們要來實例化 OpenAI。

app.js

1
2
3
4


const configuration = new Configuration({
 apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

apiKey 就是我們最早前面所申請的 OpenAI API Key，而這一段一樣是放在 .env 的。

如果你沒申請的話你會無法往下繼續的，請務必申請 OpenAI API Key 唷。

目前來講，你的 .env 應該長這樣：

1
2
3
4


CHANNEL_ACCESS_TOKEN=
CHANNEL_SECRET=

OPENAI_API_KEY=

接下來呢？我們就要將原本 Line 官方所提供的範例程式碼稍微調整一下，主要調整的範圍是 handleEvent 的程式碼：

app.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


async function handleEvent(event) {
 if (event.type !== 'message' || event.message.type !== 'text') {
 // ignore non-text-message event
 return Promise.resolve(null);
 }

 const completion = await openai.createCompletion({
 model: "text-davinci-003",
 prompt: event.message.text ,
 });

 // create a echoing text message
 const echo = { type: 'text', text: completion.data.choices[0].text };

 // use reply API
 return client.replyMessage(event.replyToken, echo);
}

這邊我們將原本的 prompt 改成 event.message.text，也就是使用者輸入的訊息，而 completion.data.choices[0].text 就是 OpenAI 所回傳的訊息。

沒問題後就儲存檔案，並 commit push 出去到 GitHub 上，屆時 Render 就會自動幫你重新部署了。

記得要去 Render 上面增加 OPENAI_API_KEY 的環境變數，否則會出現錯誤唷。

當部署完畢後，你再去試著跟你的 LINE Bot 聊天，你會發現它已經會講話囉！

只是你會發現它好像沒辦法回你很多話，這原因是我們沒有告知它要使用多少 Tokens，因此這邊我們調整一下：

app.js

1
2
3
4
5


const completion = await openai.createCompletion({
 model: "text-davinci-003",
 prompt: event.message.text,
 max_tokens: 200,
});

這個 max_tokens 會影響到 OpenAI 所回傳的訊息長度，因此我們這邊設定為200，這樣就可以讓它回很多話了。

調整 OpenAI 的回傳訊息

那麼這邊也有一件很有趣的事情，也就是 OpenAI 的訊息都有一大推空白，這是因為 OpenAI 會將你的訊息分成一個個的段落，而每個段落之間都會有一個空白，因此我們也要來調整一下。

app.js

1
2
3
4
5
6
7


const completion = await openai.createCompletion({
 model: "text-davinci-003",
 prompt: event.message.text ,
 max_tokens: 200,
});

const echo = { type: 'text', text: completion.data.choices[0].text.trim() };

再重新上傳程式碼後，你就可以看到機器人正常的回你了。

恭喜你，完成了一個可以跟你聊天的機器人！而且是串接了 OpenAI 的機器人！

結語

相信你應該發現這個 Line Bot 的建立流程超級無敵的長，而且非常的多流程跟細節，但是你也可以因此認識到如何串接第三方服務，以及如何將你的程式碼部署到 Render 上面，所以我覺得是一個相當不錯的小練習，所以如果你想嘗試做一個聊天機器人，是可以考慮使用這個方法的。

但是要注意一件事情 OpenAI 的 GPT 有一個重點使用，如果你要讓你聰明一點的回覆你，那麼你就要將它的上下文（包含你的回覆）一起撈出來丟給它，否則你會發現它有點笨，可是 LINE 的聊天機器人不太適合這種方式，因為過程你可能會問很多事情，這樣子訊息量會非常龐大且沒辦法刪除，因此這邊我們就不做這件事情了，而是讓它針對你每個問題去回覆即可，而不包含前一個問題的回覆。

最後這邊我也附上範例程式碼，如果你想直接拉回去用也是可以的，因為這一份程式碼基本上都是以官方所提供的為主，很少有大幅度調整的部分，所以你可以直接拿來用。

希望這一篇可以讓你快快樂樂做出一個 LINE Bot。

如果你覺得部署到 Render 很難去除錯，其實是可以考慮使用 ngrok 的，ngrok 的使用方法可以參考這裡。

試用 RunKit

Mon, 14 Nov 2022 00:00:00 +0000

參考網站

試用RunKit

先來說說 RunKit 是什麼。

首先，Runkit 可以讓你在瀏覽器中運行 Node.js 的代碼。在 Runkit 中，可以很方便的調用眾多的 npm 模塊。這就有點像 Node.js 版的 Jupyter Notebook。同時，Runkit 還可以提供一個免費的 HTTP 服務器而無需任何的服務器安裝和配置。這在開發手機 APP 的服務器端，以及微服務的時候尤其有用。當然，實現無服務器的選擇很多，比如 AWS 的 Lambda + API Gateway，但 RunKit 的最大優勢就是完全免費的，這在開發軟件原型的時候就更為方便了。

下面分別來看看這兩項功能。

打開頁面： https://runkit.com/home

可以通過 Github 授權登錄：

登錄成功後可以看到：

點擊運行按鈕後就可以在頁面中看到執行結果：

在 Runkit 的頁面中可以像正常的 Node.js 環境一樣運行各種 JS 語句。比如，運行如下的簡單代碼獲取 Hive 中文區的最新文章：

1
2
3
4
5
6
7
8
9


const hive = require('@hiveio/hive-js');

// Read posts from Hive
hive.api.getDiscussionsByCreated({ tag: 'hive-105017', limit: 10 }, function(err, discussions) {
 for (let i = 0; i < discussions.length; i++) {
 let post = discussions[i]
 console.log(post.title)
 }
})

可以看到返回的结果：

API Endpoint

再來看看我最喜歡的 Runkit 功能：提供簡單的 API endpoint。

非常簡單的源碼：

1

exports.endpoint = function(request, response) { response.end("API endpoint test"); }

單擊 publish 進行發布：

發布後單擊 endpoint 就會打開對應的 API URL：

比如說，我這裡的就是：

https://api-jdcmj9qsmxmb.runkit.sh/

可以看到，無需配置/運行服務器，就可以有自己的 API 可用，又是 serverless，同時還免費，是不是很爽？

nvm - Nodejs 版本隨你切換

Thu, 27 Oct 2022 00:00:00 +0000

參考網站
 參考網站
 參考網站
 參考網站
 參考網站

nvm 是 Node.js 的版本管理器 (version manager)，可在同一台主機上安裝多個版本的 Node.js 環境，因為不同專案可能會使用不同的 Node.js 版本，那就需要透過一個版本管理器來切換不同的 Node.js 版本。

安裝 NVM

接下來到 NVM 的 GitHub 儲存庫下載，無論你是 Windows、MacOS、Unix 系統都有對應的安裝方式。

Windows

NVM for Windows 有提供安裝工具，下載後照著安裝精靈依序完成即可運作，下載連結。

請選擇 nvm-setup 下載並安裝

下載後依循著安裝精靈即可完成。

完成後，打開「命令提示字元」可以試著輸入 nvm，如果看到類似以下畫面就算是完成了。

MacOS

MacOS 則是使用指令進行安裝，打開「終端機」或自行安裝的「iTerm」等工具，輸入以下指令即可開始安裝，（更多版本連結）。

1

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

安裝後預期會顯示以下片段及算安裝完成，而此時如果你有安裝其它指令工具，有可能會發生輸入 nvm 無法呼叫的狀況（例如：zsh: command not found: nvm）。

接下來可以在你所使用的命令設定檔案加入以下片段程式碼，以下提供 bash、zsh 的說明，兩者依據環境選擇其一即可：

bash(預設)
zsh

bash

預設的情況下，MacOS 中可能沒有任何一個指令設定檔案，此時可以使用 touch ~/.bash_profile 新增一個文字檔案在根目錄上，接下來回到資料根目錄可以找到 .bash_profile，沒看到的話代表未開啟隱藏檔案顯示，可以按下 Command + Shift+ . 顯示。

接下來使用任何文字編輯器打開該檔案，並加入以下程式碼存檔即可。

1
2
3


export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion

zsh

可以打開 .zshrc 加入以下片段後重啟（注意：.zshrc 通常在使用者根目錄下並且為隱藏檔，找到後使用任何文字編輯器打開編輯）。

1
2
3


export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion

設定完成以後，按下 nvm 就會跳出如下圖就算完成了。

注意：

使用 nvm 時，不需要 sudo 即可使用 npm -g 全域安裝模組，所以與其執行 sudo npm i -g，不如執行 npm i -g

若你有 ~/.npmrc，請確保裡面不包含任何 prefix 的設定 (因為與 nvm 不相容)

你可以 (但不應該) 保留以前在 “系統” 安裝的 Node.js，但 nvm 只對你的使用者帳戶 (用於安裝 nvm 的使用者帳戶) 可用。可能會導致版本不 match，因為其他使用者會使用 /usr/local/lib/node_modules/*，而使用者帳戶會使用 ~/.nvm/versions/node/vX.X.X/lib/node_modules/*

常用的 NVM 指令

直接輸入 nvm 及可以看到所有的指令列表，在此僅列出最常見的幾個指令（基本上常用的只有兩三個，剩下幾個只要認識即可）

`version`：確認 NVM 是否安裝成功 (alias：`v`)

Usage：

1
2
3


nvm version
# or
nvm v

查看 NVM 的版本

1
2


$ nvm v
1.1.9

`install`：利用 NVM 安裝 Node.js

Usage：

1
2
3
4
5
6


nvm install
# or 

# {version} 欲安裝的 Node.js 版本
# {arch} 欲安裝的 system arch：32、64、"all" (預設為當前系統)
nvm install <version> [arch]

安裝 NVM 後，其實還沒安裝 Node 環境：

1
2


$ node
zsh: command not found: node

如果執行下面指令，會提醒你需要執行 install 指令才能安裝 Node.js：

1
2
3
4


$ nvm use node
N/A: version "node -> N/A" is not yet installed.

You need to run "nvm install node" to install it before using it.

安裝最新版的 Node.js：

1
2
3
4
5
6
7
8


$ nvm install node
Downloading and installing node v12.8.1...
Downloading https://nodejs.org/dist/v12.8.1/node-v12.8.1-linux-x64.tar.xz...
#################################################################################################### 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v12.8.1 (npm v6.10.2)
Creating default alias: default -> node (-> v12.8.1)

如果要指定安裝版本，可以直接指定版本號

1

$ nvm install 16.18.0

安裝的第一個版本的 Node.js 會成為 nvm 的預設版本，新的 shell 就會以預設版本的 Node.js 來使用 (例如：nvm alias default)。

查看目前安裝 Node.js 的版本：

1
2


$ node -v
v16.18.0

`uninstall`：利用 NVM 解除安裝指定的 Node.js 版本

Usage：

1

nvm uninstall <version>

`list`：查看可用的安裝版本 (alias：`ls`)

Usage：

1
2
3


nvm list
# or
nvm ls

nvm list：查看已安裝的版本
nvm list installed：查看已安裝的版本
nvm list available：查看遠端可安裝的版本

查看目前 Node.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


$ nvm ls available

| CURRENT | LTS | OLD STABLE | OLD UNSTABLE |
|--------------|--------------|--------------|--------------|
| 19.0.0 | 18.12.0 | 0.12.18 | 0.11.16 |
| 18.11.0 | 16.18.0 | 0.12.17 | 0.11.15 |
| 18.10.0 | 16.17.1 | 0.12.16 | 0.11.14 |
| 18.9.1 | 16.17.0 | 0.12.15 | 0.11.13 |
| 18.9.0 | 16.16.0 | 0.12.14 | 0.11.12 |
| 18.8.0 | 16.15.1 | 0.12.13 | 0.11.11 |
| 18.7.0 | 16.15.0 | 0.12.12 | 0.11.10 |
| 18.6.0 | 16.14.2 | 0.12.11 | 0.11.9 |
| 18.5.0 | 16.14.1 | 0.12.10 | 0.11.8 |
| 18.4.0 | 16.14.0 | 0.12.9 | 0.11.7 |
| 18.3.0 | 16.13.2 | 0.12.8 | 0.11.6 |
| 18.2.0 | 16.13.1 | 0.12.7 | 0.11.5 |
| 18.1.0 | 16.13.0 | 0.12.6 | 0.11.4 |
| 18.0.0 | 14.20.1 | 0.12.5 | 0.11.3 |
| 17.9.1 | 14.20.0 | 0.12.4 | 0.11.2 |
| 17.9.0 | 14.19.3 | 0.12.3 | 0.11.1 |
| 17.8.0 | 14.19.2 | 0.12.2 | 0.11.0 |
| 17.7.2 | 14.19.1 | 0.12.1 | 0.9.12 |
| 17.7.1 | 14.19.0 | 0.12.0 | 0.9.11 |
| 17.7.0 | 14.18.3 | 0.10.48 | 0.9.10 |

通常會選擇安裝 LTS (Long-term support，長期支援) 版

查看目前已安裝的版本

1
2
3


$ nvm ls
 * 16.18.0 (Currently using 64-bit executable)
 14.18.0

`use`：切換 Node.js 版本

Usage：

1
2
3
4
5
6


nvm use
# or 

# {version} 欲切換的 Node.js 版本
# {arch} 欲切換的 system arch：32、64、"all" (預設為當前系統)
nvm use <version> [arch]

如果要使用 `nvm` 切換正在使用的 Node.js 版本，可用 `use` 指令

1

nvm use v16.18.0

如果切換的目標版本還沒安裝，nvm 會提醒你要安裝：

1
2


$ nvm use v14.18.0
node v14.18.0 (64-bit) is not installed.

透過 nvm 安裝 Node.js 時，nvm 會將不同的 Node.js 版本儲存在 ~/.nvm/versions/node/vX.X.X，然後再修改 $PATH，將指定版本的 Node.js 路徑加入：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


$ nvm current
v10.16.3
$ echo $PATH
/home/titan/.nvm/versions/node/v10.16.3/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin

$ use v12.13.1
$ nvm current
v12.13.1
$ echo $PATH
/home/titan/.nvm/versions/node/v12.13.1/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin

在 nvm 的各個 Node.js 版本安裝的全域套件都會在各自版本的目錄內安裝，所以在切換至新安裝的 Node.js 版本後需要重新安裝，也因為如此，不同版本間的套件就不會有衝突問題。

`current`：查看目前使用的版本

Usage：

1

nvm current

如果忘記自己切換到哪個版本，可以用 `current` 指令

1
2


$ nvm current
v16.18.0

`run`：直接執行 Node.js (NVM 1.1.9版已拔除)

如果要直接執行 Node.js，可以使用下面指令

1
2
3
4
5


$ nvm run node
Running node v16.18.0 (npm v8.19.2)
Welcome to Node.js v16.18.0.
Type ".help" for more information.
>

`exec`：指定要執行的 Node.js 版本 (NVM 1.1.9版已拔除)

1
2
3
4
5


$ nvm exec 12.8.1 node
Running node v12.8.1 (npm v6.10.2)
Welcome to Node.js v12.8.1.
Type ".help" for more information.
>

`which`：察看 Node.js 的安裝路徑 (NVM 1.1.9版已拔除)

執行下面指令可以查看特定版本的 Node.js 的安裝路徑

1
2


$ nvm which 12.8.1
/home/titan/.nvm/versions/node/v12.8.1/bin/node

alias：查看別名、設定別名

Usage：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


$ nvm alias
default -> v10.16.3
node -> stable (-> v12.8.1) (default)
stable -> 12.8 (-> v12.8.1) (default)
iojs -> N/A (default)
unstable -> N/A (default)
lts/* -> lts/erbium (-> N/A)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.16.2 (-> N/A)
lts/dubnium -> v10.17.0 (-> N/A)
lts/erbium -> v12.13.0 (-> N/A)

如下圖有些版本的文字是紅色或是顯示 `N/A`，就代表該版本未在電腦安裝

預設 alias 可以取代版本號

node：安裝最新版的 Node.js
iojs：安裝最新版的 io.js
stable：此 alias 已棄用，僅適用於 v0.12 以及更舊版，目前改為 node alias
unstable：此 alias 為 v0.11，最後一個 “unstable” (不穩定) Node release，在 v1.0 之後的版本都是穩定版 (in SemVer, versions communicate breakage, not stability)

可在下面這些指令使用以上預設別名：

nvm install
nvm use
nvm run
nvm exec
nvm which
… 等

設定別名

1
2


$ nvm alias v16-test v16.18.0
v16-test -> v16.18.0

接著用 `nvm alias` 指令就會看到剛剛新增的別名所對應的 Node.js 版本

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


$ nvm alias
v16-test -> v10.15.3
default -> v10.16.3
node -> stable (-> v12.8.1) (default)
stable -> 12.8 (-> v12.8.1) (default)
iojs -> N/A (default)
unstable -> N/A (default)
lts/* -> lts/erbium (-> N/A)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.16.2 (-> N/A)
lts/dubnium -> v10.17.0 (-> N/A)
lts/erbium -> v12.13.0 (-> N/A)

常見錯誤原因

報錯 exit status 1(或 exit status 5) 問題

出現 exit status 1 存取被拒 或 exit status 5 存取被拒，需要用管理員身分打開 cmd 命令列工具，再執行 nvm use <version> 即可。

報錯 exit status 145 問題

這個問題可以在 github nvm-windows 下找到答案，nvm 安裝的時候有兩個安裝目錄，一個是 nvm 安裝目錄，一個是 nodejs 安裝目錄，這兩個安裝目錄名不能出現空格或中文，但是 nodejs 默認安裝目錄是 C:\Program Files\nodejs，這個目錄中間有空格，需要我們自定義一個安裝目錄，即可解決這個問題。

BONUS：永遠以系統管理者身份執行

每次都要使用「以系統管理者身份執行」來開啟終端機是真的滿麻煩的，所以你其實可以針對應用程式永遠「以系統管理者身份執行」，首先點你要永遠執行的程式右鍵選內容

點選下方進階

將「以系統管理員身份執行」打勾

搞定，之後使用捷徑打開 cmd 時，皆為「以系統管理員身份執行」

總結

nvm 指令整理

指令	功能
`nvm version` `nvm v`	查看 `nvm` 版本
`nvm install <version>`	安裝指定 `<version>` 版本的 Node.js (建議安裝 `LTS` 版本)
`nvm ls` `nvm ls installed`	查看目前已安裝的 Node.js 版本
`nvm ls available`	查看目前可安裝的 Node.js 版本
`nvm use <version>`	切換指定 `<version>` 版本的 Node.js
`nvm current`	查看當前使用的 Node.js 版本

Node v19 正式發布

Mon, 24 Oct 2022 00:00:00 +0000

參考網站
 參考網站

Node.js 19 在 2022-10-18 正式發布了，此次更新包括將 V8 JavaScript 引擎更新到 10.7，以及默認啟用 HTTP (s)/1.1 KeepAlive。
Node.js 18 在本月晚些時候將進入長期支持（LTS），Node.js 19 將取代 Node.js 18 成為 “Current” 版本。

官方文檔

node –watch (實驗性)

運行時，增加了一個令人興奮的功能，支持使用 node --watch，選項在 “watch” 模式下運行。在 “watch” 模式下運行，當導入的文件被改變時，會重新啟動進程。

1

node --watch index.js

此功能在 v19.0.0 和 v18.11.0+ 中可用。

默認啟用 HTTP(S)/1.1 KeepAlive

從這個版本開始，Node.js 默認將 keepAlive 設置為 true，這意味著任何出站的 HTTP (s) 連線將自動使用 HTTP 1.1 Keep-Alive。默認的 keep-alive 時間是 5 秒。
啟用 keep-alive 將提供更好的吞吐量，因為連接在默認情況下被重複使用。

穩定的 WebCrypto

WebCrypto API 現在已經穩定（以下算法除外：Ed25519、Ed448、X25519 和X448)
使用 globalThis.crypto 或 require('node:crypto').webcrypto 來訪問這個模塊。

自定義 ESM Resolution 調整

Node.js 已經刪除了 --experimental-specifier-resolution 標誌，其功能現在可以通過自定義加載器實現。

移除 DTrace/SystemTap/ETW 支持

對 DTrace/SystemTap/ETW 的支持在 v19.0.0 中被移除，主要原因是資源的優先級問題。

如果你有興趣幫助恢復 DTrace，可以查看該 issue：https://github.com/nodejs/node/issues/44550。

依賴

V8 10.7

V8 引擎已經更新到 10.7 版本，這是 Chromium 107 的一部分。這個版本包括了 JavaScript API 的一個新特性：Intl.NumberFormat。

Intl.NumberFormatv3 API 是一個新的 TC39 ECMA402 第三階段提案，擴展了先前存在的 Intl.NumberFormat。

llhttp

Node.js 19 搭載了 llhttp@8.1.0

npm

Node.js 19 搭載了 npm@8.19.2

Node.js 18 將進入 LTS

Node.js 18 系列將在下週過渡到長期支持版本。

生命週期

Node.js 14 將在 2023 年 4 月達到生命週期結束，因此建議用戶開始計劃升級到 Node.js 16（LTS）或 Node.js 18（LTS）。
Node.js 16 (LTS) 將在 2023 年 9 月達到生命週期結束，比原計劃 2024 年 4 月提前了。

補充： Nodejs 16 的新特性

原文網址：https://weekly.shanyue.tech/release/node-16/

Node 16 於四月二十日發布，山月在第一時間下載了Node16 體驗了以下新特性。偶數號的版本為LTS 版本，這將是既Node14 之後的下一個長期支持版本，Node14 在2020-10-27 已進入 Active LTS 階段，還沒有升級的同學要盡量更新呀。

從 Node 16 Release 官方文檔列出了此次它所有的新特性以及非常詳細的提交記錄。那它到底更新了哪些新特性，先讓我們一睹為快吧！

Timers Promise API

Timers Promise API 其實在 Node 15 就已存在，那時候是一個實驗特性，目前已進入了穩定階段，是一項令人興奮的特性。那它到底是幹什麼用的呢？

先別急，在此之前，先看一個問題：如何實現一個sleep/delay 函數？

答案也很簡單，使用 Promise 封裝一個 setTimeout 即可

1

const sleep = (t = 0) => new Promise(resolve => setTimeout(resolve, t));

那有了 Timers Promise 之後呢，使用 setTimeout 直接可替代 sleep 功能，驚不驚喜。

1
2
3


import { setTimeout } from 'timers/promises';

await setTimeout(100);

setTimeout 的第二個參數接收一個值，作為 Promise 成功後的返回值

1
2
3
4


const r = await setTimeout(100, 'hello, world');

//=> hello, world
console.log(r);

而當 setInterval 也變為 Promise 形式後，對於每間隔一分鐘便執行操作的定時任務而言，具有更大的可讀性

1
2
3
4
5
6
7


import { setInterval } from 'timers/promises';

for await (const startTime of setInterval(100, Date.now())) {
 const now = Date.now();
 if ((now - startTime) > 1000)
 break;
};

底層依賴升級

我們知道，Node 基於 v8、libuv、llhttp 等諸多依賴，這次它對諸多依賴進行了升級。如同我們的業務項目依賴於諸多軟件包，每一次依賴的升級也會對性能造成不少提升

v8 升級到 9.0，主要是 ECMAScript RegExp Match Indices
llhttp 升級到 6.0.0，用以解析 HTTP 報文
icu 升級到 69.1
npm 升級到 7.10.0

使用 process.versions 可看到相關依賴的版本號

1

> process.versions

export

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


{
 "node": "16.0.0",
 "v8": "9.0.257.17-node.10",
 "uv": "1.41.0",
 "zlib": "1.2.11",
 "brotli": "1.0.9",
 "ares": "1.17.1",
 "modules": "93",
 "nghttp2": "1.42.0",
 "napi": "8",
 "llhttp": "6.0.0",
 "openssl": "1.1.1k+quic",
 "cldr": "39.0",
 "icu": "69.1",
 "tz": "2021a",
 "unicode": "13.0",
 "ngtcp2": "0.1.0-DEV",
 "nghttp3": "0.1.0-DEV"
}

btoa 與 atob

關於 Base64 的轉化，Node 在以前使用了 Buffer.from，而現在支持 btoa/atob 與瀏覽器環境保持了一致。
而對於一個 SSR 項目而言，執行環境的區分將無關緊要，統一使用 btoa/atob 就好了

1
2
3
4
5
6
7
8


const base64 = {
 encode (v: string) {
 return isBrowser ? btoa(v) : Buffer.from(v).toString('base64');
 },
 decode (v: string) {
 return isBrowser ? atob(v) : Buffer.from(v, 'base64').toString();
 }
}

關於 Node16 升級的諸多小細節，可參閱版本發布獲取更多信息，可持續 Wayne’s Blog 對各軟件每一次重大版本升級的說明講解。

Node.js + Express + MySQL 搭建項目框架

Fri, 21 Oct 2022 00:00:00 +0000

參考網站
 參考網站

本文主要是展示使用 Express 和 MySQL 來搭建項目框架的步驟，展示瞭如何搭建項目並進行基本操作。

創建項目

Express 是基於 Node.js 平台，快速、開放、極簡的 Web 開發框架。

全局安裝 express-generator

express-generator 是 Express 應用程序生成器工具，我們可以使用它來快速創建應用程序框架。

1
2
3
4


npm install -g express-generator

# (expressFrame 是項目名)
express expressFrame

項目的目錄結構

bin/www 是啟動入口文件，在裡面可以設置端口號等

下載依賴

創建好項目之後，裡面有包含基本的項目文件，也有相關依賴

1

npm install

啟動項目

1
2
3
4


npm start

# 啟動命令還可以是：
# node ./bin/www

安裝 nodemon

可以安裝 nodemon 來監控 node.js 源代碼的任何變化和自動重啟你的服務器

全局安裝 nodemon：

1

npm install -g nodemon

啟動項目

1

nodemon bin/www

這就啟動成功啦

瀏覽器打開http://localhost:3000就能看到頁面啦

安裝 winston 添加打印日誌文件

這裡採用的是 winston 日誌

具體用法可看文檔：https://www.npmjs.com/package/winston

1

npm i winston

配置打印日誌格式

在項目的根目錄添加一個配置打印日誌格式的文件 logger.js （此文件在 github 上）

修改 app.js 的配置

修改項目默認的變量名：

將 const logger = require('morgan'); 改成：const morgan = require('morgan')
相應的也要把 app.use(logger('dev')); 改成：app.use(morgan('dev'));

1
2
3
4
5
6
7


// ...
- const logger = require('morgan');
+ const morgan = require('morgan');

- app.use(logger('dev'));
+ app.use(morgan('dev'));
// ...

引入 logger.js 文件

1

const logger = require('./logger')

修改錯誤處理

將錯誤打印到日誌上

測試日誌是否打印成功

請求一個不存在的路由，如：http://localhost:3000/hello

打開日誌文件，看到這條錯誤被打印出來就成功啦

MySQL

啟動數據庫

這裡使用的方法是用 Docker 安裝 MySQL

這裡是安裝的教程：https://www.runoob.com/docker/docker-install-mysql.html

docker 拉取 MySQL 鏡像

1

docker pull mysql:latest

查看本地鏡像

1

docker images

運行容器

1
2


# docker run -itd --name {容器名} -p 3306:3306 -e MYSQL_ROOT_PASSWORD={MySQL root 密碼} mysql
docker run -itd --name mysql-test -p 3306:3306 -e MYSQL_ROOT_PASSWORD=123456 mysql

參數說明：

-p 3306:3306：映射容器服務的3306端口到宿主機的3306端口，外部主機可以直接透過 宿主機ip:3306 訪問到 MySQL 的服務。
MYSQL_ROOT_PASSWORD=123456：設置 MySQL 服務 root 用戶的密碼。

安裝成功

透過 docker ps 命令查看是否安裝成功
本機可以通過 root / 123456 訪問 MySQL 服務。

安裝數據庫管理工具

Sequel Pro macOS 用戶安裝
navicat windows 用戶安裝

這裡選擇用 Sequel Pro 啟動好數據之後，就在 Sequel Pro 連接數據庫，密碼是啟動數據庫時自己設置的密碼

使用 `Navicat` 數據庫管理工具連線時，出現錯誤

若出現 1251 - Client does not support authentication protocol requested by server; consider upgrading MySQL client 錯誤，原因為：
mysql8 之前的版本，加密規則是 mysql_native_password，而 mysql8 之後的版本，加密規則是 caching_sha2_password

解決方法：

升級 navicat 驅動。
進到容器內，把 mysql 用戶登入密碼加密規則還原成 mysql_native_password

以下採用方法2解決，操作如下：

1. 打開 cmd，輸入以下指令以 bash 進入容器：

1
2


# docker exec -it {容器名} bash
docker exec -it mysql-test bash

2. 使用 `mysql` 指令連線資料庫：

1

mysql -u root -p

3. 使用 `mysql` 指令查詢用戶訊息：

1

select host, user, plugin, authentication_string from mysql.user;

host 為 % 表示不限制 ip、localhost 表示本機使用
plugin 非 mysql_native_password 則需要修改密碼

4. 使用 `mysql` 指令修改密碼：

更新 user 為 root， host 為 % 的密碼為 123456

1

ALTER USER 'root'@'%' IDENTIFIED WITH mysql_native_password BY '123456';

更新 user 為 root， host 為 localhost 的密碼為 123456

1

ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '123456';

5. 再次在 `Navicat` 中連接 mysql，連接成功

創建數據庫

使用數據庫管理工具新建數據庫 database 名稱為：expressFrame

進入 expressFrame 庫，新建用戶信息表為 user ，默認有 id 字段，需要再添加以下必要字段：

字段：id

1
2


Field:name Type:VARCHAR LENGTH:255 Comment:姓名
Field:phone Type:VARCHAR LENGTH:255 Comment:手機號

使用 `Knex.js` 增刪改查數據庫

Knex.js 是為 Postgres、MSSQL、MySQL、MariaDB、SQLite3、Oracle 和 Amazon Redshift 設計的 SQL 查詢構建器，其設計靈活，便於攜帶並且使用起來非常有趣。Knex 的主要目標環境是 Node.js，您需要安裝該 knex 庫，然後安裝適當的數據庫庫：pg 適用於 PostgreSQL、CockroachDB 和 Amazon Redshift，pg-native 對於具有本機 C++ libpq 綁定的 PostgreSQL（需要安裝 PostgresSQL 才能鏈接），mysql 適用於 MySQL 或 MariaDB，sqlite3 適用於 SQLite3，tedious 適用於 MSSQL。

Flag	Library
pg	`PostgreSQL`、`CockroachDB`、`Amazon Redshift`
pg-native	本機 C++ `libpq` 綁定的 `PostgreSQL`（需要安裝 PostgresSQL 才能鏈接）
mysql	`MySQL`、`MariaDB`
sqlite3	`SQLite3`
tedious	`MSSQL`

下載相關依賴

1

npm install -save knex mysql

添加配置信息

在項目根目錄下，新建配置信息 config.js，之後的配置信息涉及到數據庫和密碼，不上傳到 Github 等託管平台，所以需要單獨設置，使用 .gitignore 避免上傳。之後敏感的配置信息，都將在此配置。host 地址為數據庫的服務地址，本地為 127.0.0.1

config.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


const configs = {
 mysql: {
 host: '127.0.0.1',
 port: '3306',
 user: 'root',
 password: '123456', // 自己設置的密碼
 database: 'expressFrame' // 數據庫的名字
 },
 // 打印错误
 log: {
 error (message) {
 console.log('[knex error]', message)
 }
 }
}

module.exports = configs

新建 .gitignore

在項目根目錄下，新建 .gitignore 避免上傳 config.js 、log、 node_modules 等不需要被上傳到 Github 的文件。

.gitignore

1
2
3
4
5
6
7


.DS_Store
.idea
npm-debug.log
yarn-error.log
node_modules
log
config.js

數據庫配置

新建 models/knex.js，初始化配置 knex

models/knex.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


// 引用配置文件
const configs = require('../config');
// 把配置文件中的信息，設置在初始化配置中
module.exports = require('knex')({
 client: 'mysql',
 connection: {
 host: configs.mysql.host,
 port: configs.mysql.port,
 user: configs.mysql.user,
 password: configs.mysql.password,
 database: configs.mysql.database
 },
 // 打印錯誤
 log: {
 error (message) {
 console.log('[knex error]', message)
 }
 }
})

knex 增刪改查

在 models 下新建文件 base.js

models/base.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


const knex = require('../models/knex');

class Base{
 constructor(props){
 this.table = props;
 }

 // 查找
 all (){
 return knex(this.table).select();
 }

 // 新增
 insert (params){
 return knex(this.table).insert(params);
 }

 // 更改
 update (id, params){
 return knex(this.table).where('id', '=', id).update(params);
 }

 // 删除
 delete (id){
 return knex(this.table).where('id', '=', id).del();
 }

}

module.exports = Base;

新建用戶模型

在 models 下新建文件 user.js

models/user.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


const Base = require('./base');

class User extends Base {
 // 定義參數默認值為 user 表
 constructor(props = 'user'){
 super(props);
 }
}

module.exports = new User();

新建用戶控制器

在根目錄新建控制器文件夾 controllers，在 controllers 新建 user.js，並設置 showUser 方法

controllers/user.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


// 引用用户模版数据
const User = require('../models/user.js');

const userController = {
 // showUser 獲取用戶數據並返回到頁面
 showUser: async function(req,res,next){
 try{
 let userData = await User.all()
 res.json({
 code: 200,
 message: "操作成功",
 data: userData
 })
 }catch(e){
 res.json({ code: 0, message: "操作失敗", data: e })
 }
 },
}

module.exports = userController;

添加獲取用戶接口

修改路由 routes/index.js，添加獲取用戶信息的接口

routes/index.js

1
2
3
4


const userController = require('../controllers/user');

// 獲取用戶信息
router.get('/get_user', userController.showUser);

測試接口

訪問一下 http://localhost:3000/get_user

查看接口返回的數據

這就大功告成啦～

github地址：https://github.com/wjdesign/nodejsExpressMysqlDemo

走過路過點個贊唄～

NodeJS 防止 xss 攻擊

Fri, 21 Oct 2022 00:00:00 +0000

參考網站

簡介

xss 是常見的攻擊方式之一，不管是前端還是後端都要對此有所防範才行。
本文主要講解使用 NodeJS 開發的後端程序應該如何防範 xss 攻擊。

xss演示

xss 攻擊方式主要是在在頁面展示內容中摻雜 js代碼，以獲取網頁信息。

常見的攻擊地方有：

電商產品評價區：某用戶提交的評價帶有可執行的js代碼，其他用戶查看該評論時就會執行那段js代碼。
博客網站：某用戶在博客的標題或者內容中帶有可執行的js代碼，其他用戶查看該博客時那段 js代碼 就會被執行。

比如在輸入框輸入

1

<script>alert(1234)</script>

別的用戶在自己頁面要展示上面這段內容個，頁面有可能會彈出一個彈窗。

這個例子只是彈出一個對話框，如果人家有惡意，獲取cookie 等信息，然後傳給自己的服務器，那後果真的很嚴重。

xss防禦

預防措施：轉義特殊字符

特殊符號轉換

1
2
3
4
5
6


& -> &amp;
< -> &lt;
> -> &gt;
" -> &quot;
' -> &#x27;
/ -> &#x2F;

上面我羅列了幾個常見的特殊字符。從上面的例子可以看出，輸入了 <script> 標籤後，裡面的內容有可能會被執行。
如果我們把 <script> 改成 <script> 那麼瀏覽器就不把這段內容看成是可執行代碼。

在日常開發中，我們不需要自己編寫轉義功能的代碼，只需要下載 xss 的依賴包就行。

安裝 xss 依賴包

1

npm install xss --save

使用 xss。 xss 其實是一個方法，只需要把要轉義的內容傳入 xss 方法即可。

1
2
3
4


const xss = require('xss')

const content = xss('<script>alert(1234)</script>')
console.log(content)

最後輸出

1

&lt;script&gt;alert(1234)&lt;/script&gt;

以上就是 xss攻擊 在後端的防禦方法。

如果嚴謹一點的話，在前端也可以把文本域的內容裡的特殊字符轉義一遍再傳給後端。

後端傳給前端的內容有可能會在頁面展示成 <script>alert(1234)</script>，這部分需要前端自己去處理。

插則花邊新聞

之前看到有則新聞說 Vue 不安全，某些ZF項目中使用 Vue 受到了 xss 攻擊。後端甩鍋給前端，前端甩鍋給了 Vue。

後來聽說是前端胡亂使用 v-html 渲染內容導致的，而 v-html 這東西官方文檔也提示了有可能受到 xss 攻擊。

尤雨溪：很多人就是不看文檔

Nodejs on Wayne's blog | 偉恩的部落格 | 技術博客

【Javascript】Require 與 Import 的區別

遵循的模塊化規範不同

出現的時間不同

寫法與使用方式不同

CommonJS (require/exports)

ES6 Module (import/export)

動態載入（Dynamic Import）

說明

Node.js 支援情況

本質上的不同

範例比較

效能差異

【Node.js】用 Typescript 與 Express 建立一個 server

使用 typescript 的好處

建立 typescript 環境

進入初始化專案或現有專案的目錄

安裝 typescript 與 express

設定 typescript

初始化 tsc

可能遇到的錯誤

tsconfig.json

node.js 的設定

1. 新增入口檔案

src/app.ts

2. 安裝 nodemon 與 ts-node

3. 調整 package.json 的 scripts

package.json

4. 執行 npm start

BONUS： 使用自定義的 tsconfig.json

package.json

使用 http

src/tsconfig.json

src/app.ts

取得 request 中的資料

取得 request body

取得 request header

取得 request authorization

完整程式碼

src/app.ts

使用 Express

src/app.ts

加入 Route 與 Controller

Controller

src/controllers/api-controllers.ts

Route

src/routes/api-routes.ts

調整 src/app.ts

src/app.ts

將 routes 拆分成多個檔案

src/routes/route.ts

src/controllers/AuthController.ts

src/routes/auth.route.ts

src/controllers/ArticalController.ts

src/routes/article.route.ts

src/routes/router.ts

src/app.ts

前綴 Prefix

src/routes/route.ts

src/routes/auth.route.ts

src/routes/article.route.ts

src/app.ts

Middleware

src/middleware/AuthMiddleware.ts

套用在單一 url

src/routes/auth.route.ts

套用在單一 route 檔案

src/routes/auth.route.ts

全域使用

src/app.ts

Validator

src/requests/AuthRequest.ts

src/middleware/AuthMiddleware.ts

src/routes/auth.route.ts

簡單扼要的介紹什麼是 Node.js？

什麼是 Node.js？

Node.js 三個關鍵特徵

為了解決 Web 服務器高並發問題

Chrome V8 引擎

Javascript 運行時環境

CommonJS (`require/exports`)

ES6 Module (`import/export`)

BONUS：使用自定義的 tsconfig.json

Bonus(一)：下載 mongosh.exe

Bonus(三)：移除 MongoDB 服務

新增一筆資料 `inserOne`

新增多筆資料 `insertMany`

替換整個文檔：`replaceOne`、`replaceMany`

刪除多個文件：`deleteMany(filter)`

查詢指令使用，好用的 `help`