Node.js自學筆記 (1/12)

Web開發 Node.js
1

Nodejs環境建置

  1. 安裝node.js
  2. 安裝vscode
  3. 介紹npm
  4. 安裝es-checker
    npm install -g es-checker
    4.1 全域安裝：-g
    4.2 列出全域已安裝的套件：npm ls -g
    4.3 列出區域已安裝的套件：npm ls
  5. 移除es-cjecker套件：npm uninstall -g es-checker
  6. node.js是Chrome的JavaScript引擎，其沒有DOM，因為node.js沒有頁面，沒有外觀，故沒有DOM
  7. 建立src資料夾，之後自己寫的程式會放到這個src資料夾中，至於其他套件則是放到其他的資料夾中
  8. nodejs可以直接執行箭頭函式(Arrow Functions)：
let func = a => a*a; // 單行
let func2 = () => {
let r = 0;
for(let i=1; i<=10; i++){
r += i;
}
return r;
};
console.log( func(5) );
console.log( func2() );
  1. 執行箭頭函式，說明路徑的使用
  2. 每一個資料夾可以想像成一個小房間
  3. 提醒：jQuery的事件處理器不要使用箭頭函式。箭頭函式會去綁定義處的context，就是this。jQuery的call back function不要用箭頭函式。
  4. vscode搭配github的教學使用

CommonJS的模組引入和匯出

// src/person.js
class Person {
    // 定義建構函式或稱為建構子
    constructor(name ='noname', age = 20) {
        this.name = name;
        this.age = age;
    }
    // 定義方法
    toJSON() {
        const obj = {
            name: this.name,
            age: this.age
        };
        return JSON.stringify(obj);
    }
}
module.exports = Person; // node 匯出類別
  1. class：類別；funcction, array, variable等，都可以成為module.exports匯出的對象
  2. 匯入就要使用require這個function
// src/person_test.js
const Person = require('./person');
const p1 = new Person('Bill', 25);
const p2 = new Person;
console.log(p1.toJSON());
console.log(p2.toJSON());

constructor：建構函式
3. class：規格書；this：實體
4. name：區域變數；this.name：屬性，ES6的屬性可以不用宣告，可以動態增加屬性。相較於其他程式語言，屬性必須宣告。
5. toJSON是自己定義的方法，這個方法是定義在class Person的類別裡面。目的是做輸出，轉換成JSON的字串。
6. 匯入的時候，.js附檔名可以省略。實際上.js與.json這兩種副檔名可以省略，javasceipt會先搜尋.js檔案，再搜尋.json檔案。
7. 在定義function的時候，要加上function關鍵字或是使用箭頭函式。唯獨在類別裡面定義function可以不用加上function關鍵字。

簡易Web Server

// http_server.js
const http = require('http');
const server = http.createServer((request, response) => {
    response.writeHead(200, {
        'Content-Type': 'text/html'
    });
    response.end(`<div>Hello<br>
${request.url}
</div>`);
});
server.listen(3000);

說明文件：Index | Node.js v21.4.0 Documentation
執行方式：> node src/http_server.js
Ctrl-C 停止 server

其中，下面的程式區塊是call-back function，

(request, response) => {
    response.writeHead(200, {
        'Content-Type': 'text/html'
    });
    response.end(`<div>Hello<br>
${request.url}
</div>`);
}

使用Express建立Web路由

// 1. 引入 express
var express = require('express');
// 2. 建立 web server 物件
var app = express();
// 3. 路由

app.get('/', function (req, res) {
    res.send('Hello World!');
});
app.use(express.static('public'));
app.use((req, res) => {
    res.type('text/html');
    res.status(404);
    res.send("<h2>404 - 找不到網頁</h2>");
});
// 4. Server 偵聽
app.listen(3000, function () {
    console.log('啟動 server 偵聽埠號 3000');
});
  1. 建立 public 資料夾，然後建立靜態路由
app.use(express.static('public'));
  1. 若搜尋不到路由，而且在靜態路由也找不到網頁或資料時，顯示404回應與頁面。
app.use((req, res) => {
    res.type('text/html');
    res.status(404);
    res.send("<h2>404 - 找不到網頁</h2>");
});

Express.js

官網：Express - Node.js Web 應用程式架構

Express 可以說是 Node.js 中最流行的 Web 開發框架/模組，不但有著簡潔靈活的特性、還有豐富完整的 API 文件(Express 4.x - API 參照)，讓你可以快速地搭建一個網站。

Express.js的核心概念就是middleware(中介軟體)，可以參考：使用 Express 中介軟體 ，有詳細說明

舉例來說像是top-level的middleware：

// top-level middleware
app.use(express.urlencoded({ extended: false }));  // 如果檔頭是urlencoded，就做這一行
app.use(express.json());  // 如果檔頭是json encoded，就做這一行

資料一進來就會找request裡面的content type，判斷是不是要解析的，如果是就進行處理，如果不是就略過。

Middleware圖解概念：
image

安裝express

npm install express --save

--save 會將這個 package 設定為本次專案的依賴，依賴會新增至 package.json 檔中的 dependencies 清單。「Dependency」(依賴模組)是一個非常重要的概念，專案轉移的時候很好。使用 npm install 可自動安裝 package.json 檔中的所有依賴模組。

express目錄結構

一般express專案主要會有這三個資料夾：

  1. Public 主要放置靜態檔案如css、images以及js
  2. Routes 主要放置網站router function
  3. Views 主要放置要給前端的視圖(Views)

app.set("views", __dirname + '/../views') ：指定views資料夾為視圖(view)所在地，(選擇性設定，預設是 __dirname + '/../views' )
app.set("view engine", "ejs"); ：指定 ejs 為樣版引擎

app.use( ) 意味著express會將該方法所運行的函式，當作一個application級別的middleware，所有請求都會經過它。

next( ) 非常重要，如果沒有在middleware function裡給定 next( ) ，程式就不會執行下一個middleware function。

route.use( ) 屬於Route級別的middleware，意即所有訪問該Route的請求都會經過該middleware function。

router的callback function都是 req、 res、 next 這三個參數，分別代表Request物件、Response物件、next( )。

MVC是一套成熟的開發架構，分層管理，Model負責資料層、Controller負責程式流程、邏輯，View負責資料呈現。

Router路由設計

router.get( )
router.get(“/”)
router.get(“/”, callback)
router的 callback函式 都是req、res、next 這三個參數，分別代表:
Request物件
Response物件
next( )

設定靜態路由

app.use(express.static('public')); // use，表示不管get, post, put, delete各種方法都會進來

模組path

文件：Path | Node.js v21.4.0 Documentation

const path = require('path');

path.join( ) ：會把函式裡所有path參數字串串連起來並回傳
path.resolve( ) ：函式的路徑解析會由第一個參數開始解析最後再回傳，可以理解成函式中的所有參數，都依序執行一次 cd 指令，最後，再回傳 pwd 顯示的絕對路徑

1個讚