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

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);

說明文件:https://nodejs.org/en/docs/
執行方式:> 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

官網:https://expressjs.com/zh-tw/

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

Express.js的核心概念就是middleware(中介軟體),可以參考:https://expressjs.com/zh-tw/guide/using-middleware.html ,有詳細說明

舉例來說像是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都是 reqresnext 這三個參數,分別代表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

文件:https://nodejs.org/api/path.html

const path = require('path');

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

1個讚