Express 快速創建 Web 伺服器

express 的基本使用

先安裝express包

npm i [email protected]

1.導入 express

const express = require('express');

2.創建 web 伺服器

const app = express();

3.啟動 Web 伺服器

app.listen(80, () => {
    console.log("express server running at http://127.0.0.1");
});

4.監聽客戶端的 GET 和 POST 請求，並向客戶端響應具體內容

app.get('/user',(req,res ) => {
    // 調用 express 提供的 res.send() 方法，向客戶端響應一個 JSON 對象
    res.send({name: 'zs', age: 20, gender: '男'});
});

app.post('/user', (req, res) => {
    // 調用 express 提供的 res.send() 方法，向客戶端響應一個 文本字元串
    res.send('請求成功')
});

6. req.query對象 獲取 URL 攜帶的查詢參數

通過 req.query 對象，可以訪問到客戶端通過查詢字元串形式發送到伺服器的參數

app.get('/', (req, res) => {
    //通過 req.query 可以獲取到客戶端發送過來的 查詢參數
    //註意：預設情況下，req.query 是一個空對象
    console.log(req.query);  // 輸出 ： {}
    res.send(req.query)    // => 返回空對象 {}
})

req.params 對象，獲取 URL 中的動態參數

通過 req.params 對象，可以訪問到 URL 中，通過 : 匹配到的動態參數
URL 地址中，可以通過 :參數名 的形式，匹配動態參數值

app.get('/user/:id', (req, res) => {
    // 這裡的 id 可以任意命名
    //預設情況下，req.params 是一個空對象
    // 裡面存放著通過 ：動態匹配到的參數值
    console.log(req.params);
})
// get http://127.0.0.1/user/1 ,則輸出為{ "id: 1"}
// get http://127.0.0.1/user/2 ,則輸出為 {"id: 2"}

總體結構

//1.    導入 express
const express = require('express');
//2.    創建 web 伺服器
const app = express();

//4.監聽客戶端的 GET 和 POST 請求，並向客戶端響應具體內容
app.get('/user',(req,res ) => {
    // 調用 express 提供的 res.send() 方法，向客戶端響應一個 JSON 對象
    res.send({name: 'zs', age: 20, gender: '男'});
});
app.post('/user', (req, res) => {
    // 調用 express 提供的 res.send() 方法，向客戶端響應一個 文本字元串
    res.send('請求成功')
});
// 6. req.query對象  獲取 URL 攜帶的查詢參數
// 通過 req.query 對象，可以訪問到客戶端通過查詢字元串形式發送到伺服器的參數
app.get('/', (req, res) => {
    //通過 req.query 可以獲取到客戶端發送過來的 查詢參數
    //註意：預設情況下，req.query 是一個空對象
    console.log(req.query);  // 輸出 ： {}
    res.send(req.query)    // => 返回空對象 {}
})
// req.params 對象，獲取 URL 中的動態參數
// 通過 req.params 對象，可以訪問到 URL 中，通過 : 匹配到的動態參數
// URL 地址中，可以通過 :參數名 的形式，匹配動態參數值
app.get('/user/:id', (req, res) => {
    // 這裡的 id 可以任意命名
    //預設情況下，req.params 是一個空對象
    // 裡面存放著通過 ：動態匹配到的參數值
    console.log(req.params);
})
// get http://127.0.0.1/user/1 ,則輸出為{ "id: 1"}
// get http://127.0.0.1/user/2 ,則輸出為 {"id: 2"}
//3.    啟動 Web 伺服器
app.listen(80, () => {
    console.log("express server running at http://127.0.0.1");
});

Express 托管靜態資源

1.express.static()

在這裡，調用 express.static() 方法，快速對外提供靜態資源
如下代碼可以將 clock 目錄下的 html 文件，css 文件 ，js 文件對外開放訪問

app.use(express.static('./clock'));
//可以在瀏覽器中 http://127.0.0.1/index.css來訪問 clock 目錄下的index.css文件

2. express 托管多個靜態資源目錄

托管多個靜態資源目錄，只需要多次調用 express.static() 函數即可
express.static() 函數會根據添加順序查找所需文件

app.use(express.static('./clock'));
app.use(express.static('./files'));

3.掛載路徑首碼

在靜態資源訪問路徑之前，掛在首碼
此時http://127.0.0.1/index.html 訪問的是files目錄下的 index.html 文件
http://127.0.0.1/clock/index.html 加首碼 /clock 之後，訪問的才是 clock 目錄下的 index.html 文件

app.use('/clock',express.static('./clock'));
app.use(express.static('./files'));

nodemon 安裝

自動重啟項目，代碼進行修改後，不需要手動重啟

npm install -g nodemon

nodemon 使用

傳統方式啟動項目: node 項目文件(例如 node 01.js)，代碼進行修改後，需要手動重啟
使用 nodemon 項目文件,代碼進行修改後，不需要手動重啟

nodemon 01.js
npx nodemon 01.js

express 路由

1. express 中的路由

路由指的客戶端的請求與伺服器處理函數之間的映射關係
METHOD 請求的類型， PATH 請求的URL地址，HANDER 處理函數

 app.METHOD(PATH, HANDER)
                    ```