Express — 使用步驟

Express

Express

  • 介紹
  • 安裝
  • 搭建服務器的步驟
  • express提供的新方法
  • GET接口
    • 獲取GET中的請求參數
  • POST接口
    • 獲取POST請求提交的數據
  • 中間件原理
  • 中間件語法
  • 中間件初體驗（設置響應頭）
  • 中間件開放靜態資源
  • 中間件接收POST請求體
  • 中間件返回404頁面

express 介紹

  • Express 是一個第三方模塊，用于快速搭建服務器
  • Express 是一個基于 Node.js 平臺，快速、開放、極簡的 web 開發框架。
  • express保留了http模塊的基本API，使用express的時候，也能使用http的API
  • express還額外封裝了一些新方法，能讓我們更方便的搭建服務器
  • express提供了中間件功能，其他很多強大的第三方模塊都是基于express開發的
  • Express 官網
  • Express 中文文檔（非官方）
  • Express GitHub倉庫

安裝express

項目文件夾中，執行 npm i express。即可下載安裝express。

注意：express不能安裝在express文件夾中。否則安裝失敗。

使用Express構造Web服務器

使用Express構建Web服務器步驟：

  1. 加載 express 模塊

  2. 創建 express 服務器

  3. 開啟服務器

  4. 監聽瀏覽器請求并進行處理

// 使用express 搭建web服務器
// 1) 加載 express 模塊
const express = require('express');// 2) 創建 express 服務器
const app = express();// 3) 開啟服務器
app.listen(3006, () => console.log('express服務器開始工作了'));// 4) 監聽瀏覽器請求并進行處理app.get('GET請求的地址', 處理函數);app.post('POST請求的地址', 處理函數);

express封裝的新方法

express之所以能夠實現web服務器的搭建，是因為其內部對核心模塊http進行了封裝。

封裝之后，express提供了非常方便好用的方法。

  • express

    • express.static() – 開放靜態資源
    • express.urlencoded() – 獲取POST請求體
    • 其他…

  • app

    • app.get() – 處理客戶端的GET請求
    • app.post() – 處理客戶端的POST請求
    • app.use() – 設置應用級別的中間件
    • 其他…

  • req

    • req.body – 獲取POST請求體
    • req.params – 獲取GET請求動態參數
    • req.query – 獲取GET請求參數(獲取查詢字符串參數)
    • 其他…

  • res

    • res.sendFile(文件的絕對路徑) – 讀取文件，并將結果響應
    • res.set({name, value}) – 設置響應頭
    • res.status(200) – 設置響應狀態碼
    • res.send(字符串或對象) – 響應結果
    • res.json(對象) – 以JSON格式響應結果
    • res.jsonp() – 以JSONP格式響應結果
    • 其他…

請注意，在express中，我們仍然可以使用http模塊中的方法。

GET接口

// app.get('請求的URL', callback);
app.get('/api/getbooks', (req, res) => {// 處理GET方式的/api/getbooks接口
});app.get('/', (req, res) => {// 客戶端沒有指定請求的url，在這里處理。
});app.get('*', (req, res) => {// 處理所有的GET請求
})

app.get('*', (req, res) => {}) 他能夠匹配到所有的GET請求，所以把它放到所有接口的最后。

獲取GET方式請求的參數

獲取url?參數=值&參數=值

  • 這種方式的參數，比較常規，參數部分也叫做查詢字符串
  • 請求地址的寫法： http://localhost:3006/test?id=3&bookname=zxx&age=20
  • 獲取方式：req.query
// 寫接口
app.get('/test', (req, res) => {console.log(req.query); // { id: '3', bookname: 'zxx', age: '20' }});

獲取 url/:id/:name/:age

  • 這種方式的參數，叫做動態參數
  • 請求地址的寫法：http://localhost:3006/test/3/zs/30
  • 要求請求的url參數必填，否則不能和定義的接口匹配
// 1個參數
// 瀏覽器的請求  http://localhost/test/3
// 測試接口，獲取動態參數
app.get('/test/:id', (req, res) => {console.log(req.params); // 可以獲取所有的動態參數 { id: 3 }res.send('收到參數');
});// 多個參數
// 瀏覽器的請求  http://localhost/test2/3/zhangsan/20
// 測試接口，獲取多個動態參數
app.get('/test2/:id/:name/:age', (req, res) => {console.log(req.params); // 可以獲取所有的動態參數  // { id: '4', name: 'zhangsan', age: '20' }res.send('全部收到');
});

POST接口

// app.post('請求的URL', callback);
app.post('/api/addbook', (req, res) => {// 處理POST方式的/api/addbook接口
});app.post('*', (req, res) => {// 處理所有的POST請求
})

獲取POST請求體

  • GET方式沒有請求體，POST方式才有請求體。

  • 請求體，即客戶端提交的數據。

  • 我們仍然可以使用http模塊中的語法，獲取請求體。

  • POST請求體，有哪些格式

    • 查詢字符串 – 對應的Content-Type: application/x-www-form-urlencoded
    • FormData對象 – 對應的Content-Type: multipart/form-data; --XXADFsdfssf

請求體是查詢字符串


// 客戶端，需要發送POST請求，提交的數據隨便寫// 寫接口之前，配置
// 可以幫我們接收 content-type: application/x-www-form-urlencoded類型的請求體
app.use(express.urlencoded({extended: false}));// 后續，任何一個POST接口，都可以通過req.body獲取到請求體的內容
app.post('/test', (req, res) => {// 獲取請求體console.log(req.body);res.send('你的請求體收到了');
});

postman發送一個POST方式的請求，來配合測試：

在這里插入圖片描述

獲取FormData類型的請求體

比較麻煩，需要使用第三方模塊（multer）才能夠獲取到。這里不做演示。

中間件介紹

  • 中間件(Middleware )，特指業務流程的中間處理環節。

  • 中間件，是express最大的特色，也是最重要的一個設計

  • 很多第三方模塊，都可以當做express的中間件，配合express，開發更簡單。

  • 一個express應用，是由各種各樣的中間件組合完成的

  • 中間件，本質上就是一個 函數/方法

中間件原理

為了理解中間件，我們先來看一下我們現實生活中的自來水廠的凈水流程。

在這里插入圖片描述

  • 在上圖中，自來水廠從獲取水源到凈化處理交給用戶，中間經歷了一系列的處理環節
  • 我們稱其中的每一個處理環節就是一個中間件。
  • 這樣做的目的既提高了生產效率也保證了可維護性。

express中間件原理：

在這里插入圖片描述

中間件語法

  • 中間件就是一個函數

  • 中間件函數中有四個基本參數， err、req、res、next

    • 很多情況下，err都會省略
    • req就是請求相關的對象
    • res就是響應相關的對象
    • next：它是一個函數，某些時候，可以省略

  • 把寫好的中間件函數，傳遞給 app.get()、app.post()``或app.use()使用

示例代碼：

// app.get('/api/getbooks',  中間件函數);
app.get('/api/getbooks', (req, res) => {})app.post('/api/add', 中間件函數, 中間件函數, 中間件函數, ......);// app.use([path],  中間件函數);
app.use((req, res, next) => {});app.use('/my', (req, res, next) => {});

中間件的特點

  • 每個中間件函數，共享req對象、共享res對象
    • js代碼中，所有的req對象是一個對象；所有的res是一個對象
  • 不調用next()，則程序執行到當前中間件函數后，不再向后執行
    • 注意中間件的順序，因為有可能因為順序原因，你的中間件函數不會執行
    • 為了防止代碼邏輯混亂，調用 next() 函數后不要再寫額外的代碼
  • 客戶端發送過來的請求，可能連續調用多個中間件進行處理
  • 使用app.use()注冊的中間件，GET和POST請求都可以觸發

中間件初體驗

為所有的請求，統一設置響應頭

// 圖書管理案例中，為所有的接口解決跨域問題
// 自定義中間件函數，統一處理跨域
app.use((req, res, next) => {// 為后續所有的接口設置響應頭，解決跨域問題res.set({'Access-Control-Allow-Origin': '*'});next();
});

中間件詳細使用方法

app.use的第一個參數

// 匹配url開頭是 /my 的接口，比如 /my/aa  /my/bb ，但是不能匹配 /mynadsf
app.use('/my', (req, res, next) => {req.abc = '123';next();
});// 匹配url的開頭是 /my 的接口，比如 /my/aa  /my/bb  /mysadfa   /myasdfdd
app.use('/my*', (req, res, next) => {.....
});

app.get 和 app.post使用多個中間件

//
// app.get('/abcd', ()=>{},  ()=>{},  ()=>{}, ....);app.get('/abcd', (req, res, next) => {req.abc = 'a';next();
}, (req, res, next) => {req.abc += 'b';next();
}, (req, res) => {res.send(req.abc);
});// app.get('/abcd', [()=>{},  ()=>{}, ....],  ()=>{});
let a = (req, res, next) => {req.abc = 'a';next();
};let b = (req, res, next) => {req.abc += 'b';next();
}app.get('/abcd', [a, b], (req, res) => {res.send(req.abc);
});

中間件的分類

  • 應用級別中間件
    • 針對整個項目進行配置的中間件，叫做應用級別的中間件
  • 路由級別中間件
    • 寫到路由文件中的中間件（稍后介紹路由）
  • 錯誤處理中間件
    • 一般一個項目在最后，設置一個錯誤處理中間件即可。
    • 錯誤處理中間件，需要填4個參數（err, req, res, next）
  • 內置中間件
    • express自帶的中間件
      • express.urlencoded()
      • express.static()
  • 第三方中間件
    • 別人寫的模塊，發布到npm上，我們下載下來，可以當做express的中間件
      • multer – 接收FormData數據的模塊
      • cors - 解決跨域的
      • …

回顧獲取請求體的方法

統一獲取post請求體

app.use(express.urlencoded({extended: false}));
// app.use(方法);  --- 這是在配置中間件
// express.urlencoded()  --- 它是中間件函數，是express內置的中間件
// https://www.expressjs.com.cn/4x/api.html#express.urlencoded

express.urlencoded() 這也是一個函數，而且也是一個中間件函數。

它內部實現的原理是：

app.use((req, res, next) => {if (req.method === 'POST') {var str = '';req.on('data', chunk => {str += chunk;});req.on('end', () => {const querystring = require('querystring')req.body = querystring.parse(str);next();})} else {next();}
});

很多中間件，別人早已經寫好了。我們直接使用即可。

我們后面還會做很多事情，比如開放靜態資源、實現跨域資源共享（CORS）、身份認證、圖片上傳等等工作，別人早已經寫好中間件了。我們后面學習這些中間件如何使用即可。

中間件開放靜態資源

  • 什么叫做靜態資源
    • css文件
    • 圖片文件
    • js文件
    • 有時候也包括html文件
    • 等等
  • 什么叫做開放靜態資源
    • 開放，即允許客戶端來訪問
  • 具體做法
    • 比如，允許客戶端訪問public文件夾里面的文件
    • app.use(express.static('public'))

在這里插入圖片描述

中間件接收POST請求體

  • POST請求體的類型（Content-Type）

    • application/x-www-form-urlencoded 比如：id=1&name=zs&age=20
    • form-data 比如，提交的是FormData對象
    • application/json 比如，提交的是 {“id”: 1, “name”: “zs”, “age”: 20}
    • 其他…

  • 服務器端接收不同類型的請求體，使用的方式是不同的

    • urlencoded —> app.use(express.urlencoded({extended: false}));
    • application/json —> app.use(express.json()); – 沒有演示
    • form-data —> 服務器端使用第三方模塊處理（multer）

當初學習ajax的時候，如果是POST請求，為什么要加Content-Type

使用第三方的中間件，實現跨域資源共享

昨天，我們自己寫了中間件，實現了跨域資源共享（CORS）。但是是自己寫的中間件。

實際上，實現跨域資源共享，可以使用一個叫做 cors 的第三方模塊。推薦使用它來實現跨域資源共享。

使用方法：

  • 下載安裝cors npm i cors
  • const cors = require('cors'); — 加載模塊
  • app.use(cors()); – 注冊中間件即可

中間件返回404頁面

  • 服務器的代碼，你的接口要寫到前面
  • 當瀏覽器的請求到達服務器，優先使用你的接口
  • 如果請求的不是你的接口，則返回404頁面
  • 所以，處理404要放到代碼的最后。

在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/247998.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/247998.shtml
英文地址，請注明出處：http://en.pswp.cn/news/247998.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

大模型工具_Langchain-Chatchat

大模型工具_Langchain-Chatchat

https://github.com/chatchat-space/Langchain-Chatchat 原Langchain-ChatGLM 1 功能 整體功能，想解決什么問題 基于 Langchain 與 ChatGLM 等LLM模型，搭建一套針對中文場景與開源模型，界面友好、可離線運行的知識庫問答解決方案。 當前解決…
閱讀更多...
iOS 鍵盤風格詳解UIKeyboardType

iOS 鍵盤風格詳解UIKeyboardType

一、鍵盤風格 UIKit框架支持8種風格鍵盤。 [java] view plaincopy print?typedef enum { UIKeyboardTypeDefault, // 默認鍵盤：支持所有字符 UIKeyboardTypeASCIICapable, // 支持ASCII的默認鍵盤 UIKeyboardTypeNu…
閱讀更多...
MySQL Hardware--FIO壓測

MySQL Hardware--FIO壓測

FIO參數 filename/export/1.txt　支持文件系統或者裸設備，-filename/dev/sda2或-filename/dev/sdb direct1 測試過程繞過機器自帶的buffer，使測試結果更真實 rwrandwread 測試隨機讀的I/O rwrandwrite 測試隨機…
閱讀更多...
Node — 第四天（Promise與路由）

Node — 第四天（Promise與路由）

Promise - ES6新對象 Promise能夠處理異步程序。 回調地獄 JS中或node中，都大量的使用了回調函數進行異步操作，而異步操作什么時候返回結果是不可控的，如果我們希望幾個異步請求按照順序來執行，那么就需要將這些異步操作嵌套起來…
閱讀更多...
xcode8 升級后注釋快捷鍵不能使用的解決方法

xcode8 升級后注釋快捷鍵不能使用的解決方法

一種說法： 這個是因為蘋果解決xcode ghost。把插件屏蔽了。解決方法 命令運行： sudo /usr/libexec/xpccachectl 然后必須重啟電腦后生效 還有一種說法：不用指令直接重啟就可以了。
閱讀更多...
winform datagridview控件使用

winform datagridview控件使用

最近做項目時&#xff0c;顯示查詢結果總需要綁定到datagridview控件上顯示&#xff0c;總結了給datagridview綁定數據的方式&#xff0c;以及導出datagridview數據到excel表格&#xff0c;如有錯誤請多指教 1.直接綁定數據源&#xff0c;可以綁定的數據格式有List<T>,Da…
閱讀更多...
Node — 第五天

Node — 第五天

1. MySQL數據庫 phpstudy 數據庫服務器及圖形化軟件 軟件鏈接 鏈接&#xff1a;https://pan.baidu.com/s/1F8wdoMstHAJkINfDKDejsw 提取碼&#xff1a;xl3k 數據庫對于我們前端同學來說&#xff0c;就是一個了解。 對于不會變化的數據&#xff08;省、市、縣&#xff09;&…
閱讀更多...
iOS10 權限訪問崩潰

iOS10 權限訪問崩潰

手機升級了 iOS10 Beta&#xff0c;然后用正在開發的項目 裝了個ipa包&#xff0c;發現點擊有關 權限訪問 直接Crash了&#xff0c;并在控制臺輸出了一些信息&#xff1a; This app has crashed because it attempted to access privacy-sensitive data without a usage descr…
閱讀更多...
Node — 第六天（前后端分離）及（身份驗證）

Node — 第六天（前后端分離）及（身份驗證）

綜合應用服務端知識點搭建項目 下載安裝所需的第三方模塊 npm init -y npm i express cors mysql # express 用于搭建服務器 # cors 用于解決跨域 # mysql 用于操作數據庫# 后面用到什么&#xff0c;再下載創建app.js 之前&#xff0c;我們開啟一個服務器&#xff0c;js文件…
閱讀更多...
繼承上機作業

繼承上機作業

1、實現如下類之間的繼承關系&#xff0c;并編寫Music類來測試這些類 2、編寫一個Java應用程序&#xff0c;該程序包括3個類&#xff1a;Monkey類、People類和主類E。要求&#xff1a; (1) Monkey類中有個構造方法&#xff1a;Monkey (String s)&#xff0c;并且有個public voi…
閱讀更多...
ApplePay集成教程

ApplePay集成教程

Apple Pay運行環境&#xff1a;iPhone6以上設備&#xff0c;操作系統最低iOS9.0以上&#xff0c;部分信息設置需要iOS9.2以上。目前還不支持企業證書添加。 環境搭建好后可以在模擬器上面運行&#xff0c;xcode7.2.1iPhone6SP9.2系統下&#xff0c;系統會綁定幾種虛擬的銀行卡…
閱讀更多...
Node — 第七天 （大事件項目接口實現一）

Node — 第七天 （大事件項目接口實現一）

關于JS錯誤處理 node中和mysql中的錯誤處理 node和MySQL提供的方法&#xff0c;已經對錯誤信息進行了封裝&#xff0c;只需要使用 err.message 即可獲取到錯誤信息。 比如&#xff1a; const fs require(fs); // 讀取一個不存在的文件 fs.readFile(abcd.txt, (err, data) …
閱讀更多...
1.Consul 簡介和環境搭建

1.Consul 簡介和環境搭建

1.什么是 Consul Consul 是 service mesh(服務網格)的一個解決方案&#xff0c;它提供了諸如服務發現&#xff0c;配置和隔離等功能的一整套控制平面(control plane)。開發人員可以根據需要單獨使用這些功能點&#xff0c;也可以將他們整合成為一個完整的service mesh。Consul …
閱讀更多...
Node — 第八天 （大事件項目接口實現二）

Node — 第八天 （大事件項目接口實現二）

如何處理MySQL的錯誤 MySQL的錯誤信息&#xff0c;可以通過err來獲取。這是沒有問題的。 但是&#xff0c;我們加入了Promise&#xff0c;Promise中的錯誤&#xff0c;在外部是獲取不到的&#xff0c;只能使用Promise相關方法來獲取錯誤信息。 解決方法一 使用 JS原生的 tr…
閱讀更多...
在local模式下的spark程序打包到集群上運行

在local模式下的spark程序打包到集群上運行

一、前期準備 前期的環境準備&#xff0c;在Linux系統下要有Hadoop系統&#xff0c;spark偽分布式或者分布式&#xff0c;具體的教程可以查閱我的這兩篇博客&#xff1a; Hadoop2.0偽分布式平臺環境搭建 Spark2.4.0偽分布式環境搭建 然后在spark偽分布式的環境下必須出現如下八…
閱讀更多...
Effective Objective-C 2.0 初讀小結

Effective Objective-C 2.0 初讀小結

1.對于OC中的對象聲明例如NSObject *obj1 [NSObject new];, obj1這個指針變量是分配在棧上的, 他指向的是這一個分配在堆上面的實例對象, 如果進行下面的賦值操作NSObject *obj2 obj1;,那么并沒有新生成一個實例對象, 只是在棧上分配了一個新的指針變量obj2, 而obj2和obj1指向…
閱讀更多...
APS系統對制造企業到底有多重要？看完這5點你就明白了

APS系統對制造企業到底有多重要？看完這5點你就明白了

第一個問題&#xff1a;需要APS嗎&#xff1f; APS是否重要&#xff0c;不能從其所體現的軟件工具或系統角度來說&#xff0c;而應該從業務角度來說。對于制造工廠和車間的運行而言&#xff0c;計劃是核心的業務。就如同那句俗話說的&#xff0c;沒有規矩不成方圓&#xff0c;領…
閱讀更多...
Node — 第九天 （大事件項目接口實現三）

Node — 第九天 （大事件項目接口實現三）

文章管理接口 設計數據表 添加文章接口 編寫接口&#xff0c;使用postman模擬提交formdata類型的數據 在article.js 中&#xff0c;加入 /add 路由 postman模擬提交formdata類型的數據 multer處理文件上傳 下載安裝multer 加載模塊 const multer require(multer) 配置上…
閱讀更多...
Python之爬蟲-段子網

Python之爬蟲-段子網

Python之爬蟲-段子網 https://ishuo.cn #!/usr/bin/env python # -*- coding:utf-8 -*- import re import requestsresponse requests.get(https://ishuo.cn) data response.text print(data) r re.findall(<div class"content">(.*?)</div>,data) f…
閱讀更多...
Node — 第九天 (ES6降級 and 發布屬于自己的[第三方模塊]包)

Node — 第九天 (ES6降級 and 發布屬于自己的[第三方模塊]包)

ES6降級處理 因為 ES 6 有瀏覽器兼容性問題&#xff0c;可以使用一些工具進行降級處理&#xff0c;例如&#xff1a;babel 降級處理 babel 的使用步驟 安裝 Node.js命令行中安裝 babel配置文件 .babelrc運行命令&#xff0c;完成降級 項目初始化 (項目文件夾不能有中文) npm …
閱讀更多...
最新文章

Copyright @ 2022~2023