xpress框架是Node.js基金會的一個項目,官方網址為http://expressjs.com。(中文網站為http://expressjs.com/zh-cn)。它提供了對Node.js原生API比較好的封裝,從而使開發者更容易的使用Node.js,并用來開發強壯的Web、移動應用,以及API的一些其他功能。開發人員還能夠方便的為它開發插件和擴展,從而增加Express的能力。
簡言之,Express 是一個簡潔而靈活的 node.js Web應用框架, 提供了一系列強大特性幫助你創建各種 Web 應用,和豐富的 HTTP 工具。使用 Express 可以快速地搭建一個完整功能的網站。
通過使用Node Express,可以使用更少的代碼來實現功能。至少通過使用Node Express可以實現中間件來響應http請求,可以定義路由表來定義不同請求的響應函數,還可以使用模板引擎來輸出html頁面。其實這也是Express的核心特點。
Express 框架核心特性:
可以設置中間件來響應 HTTP 請求。
定義了路由表用于執行不同的 HTTP 請求動作。
可以通過向模板傳遞參數來動態渲染 HTML 頁面。
好,接下來我們進行Express的安裝,我們通過以下命令就可以安裝 Express 并將其保存到依賴列表中:
npm install express --save
上命令會將 Express 框架安裝在當前目錄的 node_modules 目錄中, node_modules 目錄下會自動創建 express 目錄。以下幾個重要的模塊是需要與 express 框架一起安裝的:
body-parser - node.js 中間件,用于處理 JSON, Raw, Text 和 URL 編碼的數據。
cookie-parser - 這就是一個解析Cookie的工具。通過req.cookies可以取到傳過來的cookie,并把它們轉成對象。
multer - node.js 中間件,用于處理 enctype="multipart/form-data"(設置表單的MIME編碼)的表單數據。
npm install body-parser --save
npm install cookie-parser --save
npm install multer --save
安裝完后,我們可以通過以下npm命令查看 express 使用的版本號:
npm list express
如果小伙伴們進行到了上一步驟,說明我們已經把Express安裝成功了。接下來,我們就可以學習Express和使用它進行一個實例的開發。哈哈,廢話不多說,第一個實例想都不用想,就是用Express框架來輸出Hello World。
以下實例的需求呢就是,我們新建一個demo.js文件,在文件我們需要引入express模塊,并在客戶端發起請求后,響應“Hello World”字符串。
創建demo.js文件,代碼如下所示:
上面代碼寫完之后,我們開始運行,程序運行起來,通過訪問http://localhost:3000/
就可以看到字符串“Hello World”
接下來,我們看看Express是如何處理請求和響應的。
Express 應用使用回調函數的參數: request 和 response 對象來處理請求和響應的數據。
app.get('/', function (req, res) {
// --})
request 和 response 對象的具體介紹:
Request 對象 - request 對象表示 HTTP 請求,包含了請求查詢字符串,參數,內容,HTTP 頭部等屬性。常見屬性有:
1.req.app:當callback為外部文件時,用req.app訪問express的實例
2.req.baseUrl:獲取路由當前安裝的URL路徑
3.req.body / req.cookies:獲得「請求主體」/ Cookies
4.req.fresh / req.stale:判斷請求是否還「新鮮」
5.req.hostname / req.ip:獲取主機名和IP地址
6.req.originalUrl:獲取原始請求URL
7.req.params:獲取路由的parameters
8.req.path:獲取請求路徑
9.req.protocol:獲取協議類型
10.req.query:獲取URL的查詢參數串
11.req.route:獲取當前匹配的路由
12.req.subdomains:獲取子域名
13.req.accepts():檢查可接受的請求的文檔類型
14.req.acceptsCharsets / req.acceptsEncodings / req.acceptsLanguages:返回指定字符集的第一個可接受字符編碼
15.req.get():獲取指定的HTTP請求頭
16.req.is():判斷請求頭Content-Type的MIME類型
Response 對象 - response 對象表示 HTTP 響應,即在接收到請求時向客戶端發送的 HTTP 響應數據。常見屬性有:
1.res.app:同req.app一樣
2.res.append():追加指定HTTP頭
3.res.set()在res.append()后將重置之前設置的頭
4.res.cookie(name,value [,option]):設置Cookie
5.opition: domain / expires / httpOnly / maxAge / path / secure / signed
6.res.clearCookie():清除Cookie
7.res.download():傳送指定路徑的文件
8.res.get():返回指定的HTTP頭
9.res.json():傳送JSON響應
10.res.jsonp():傳送JSONP響應
11.res.location():只設置響應的Location HTTP頭,不設置狀態碼或者close response
12.res.redirect():設置響應的Location HTTP頭,并且設置狀態碼302
13.res.render(view,[locals],callback):渲染一個view,同時向callback傳遞渲染后的字符串,如果在渲染過程中有錯誤發生next(err)將會被自動調用。callback將會被傳入一個可能發生的錯誤以及渲染后的頁面,這樣就不會自動輸出了。
14.res.send():傳送HTTP響應
15.res.sendFile(path [,options] [,fn]):傳送指定路徑的文件 -會自動根據文件extension設定Content-Type
16.res.set():設置HTTP頭,傳入object可以一次設置多個頭
17.res.status():設置HTTP狀態碼
18.res.type():設置Content-Type的MIME類型
今天小編就把Express框架先介紹到這里吧。其實呢,Express框架還有很多核心功能,例如其中的路由、處理靜態文件、處理get請求、post請求等等功能,這寫功能的使用,我們將會在下期在一一介紹,我們下期再見。
擊上方藍字關注“小鄭搞碼事”,每天都能學到知識,搞懂一個問題!
Web頁面有一個相當重要的部分,就是CSS。而寫CSS的人都知道,它沒有變量,也沒有條件語句,只是一行行單純的描述,寫起來是相當費事。所以,自然而然人們迫切希望能像寫JS一樣來寫CSS,但是運行環境又只認識CSS呀,所以這時就出現了CSS預處理器的東西。像sass,less,stylus等。
然而,這些樣式文件放在前端,你可以通過預處理命令或可視化工具又或者構建工具來將它們編譯成CSS文件。但是今天,我們來看一下在服務端,使用Express如何處理這些需要編譯成CSS的文件。
在前面我們總結過,Express的重點就是中間件,是的,處理這些文件同樣只需要引入三個對應的中間件就行了。下面來實例一下:
實例目錄:
中間件作用后會自動在預編譯文件目錄下生成一個對應名稱的樣式文件,所以在public下的index.html文件里,直接引入對應名稱的樣式文件(這里是style.css)。
index.html:
下面看一下這三個中間件是如何處理。
style.styl中間件處理:
style.scss中間件處理:
style.less中間件處理:
啟動服務:
node index.js
訪問:
http://localhost:1234/index.html
這樣就能看到對應的每一個對應的樣式效果。
以上內容可以看出,這里沒有將各種樣式預處理文件的內容給出來,是因為其內容比較簡單,加上其語法也不是這篇要說的內容。感興趣的同學可以向我要完整碼,或者自己加點代碼運行試試。
當今的前端開發中,了解后端技術對于全棧工程師來說至關重要。Express.js,作為Node.js的一個輕量級框架,以其簡單、快速和靈活的特性受到了廣大開發者的青睞。本文旨在通過15分鐘的閱讀,幫助你快速理解Express.js,掌握其基本用法,為全棧之路打下堅實基礎。
一、Express.js簡介
Express.js是一個基于Node.js平臺的極簡、靈活的web開發框架,它提供了一系列強大的特性,幫助開發者快速構建Web和移動應用程序。通過Express.js,我們可以輕松創建Web服務器,處理HTTP請求和響應,以及構建RESTful API等。
二、安裝與設置
首先,確保你已經安裝了Node.js。然后,通過npm(Node.js的包管理器)安裝Express.js:
接下來,創建一個新的JavaScript文件(例如app.js),并引入Express模塊:
三、基本路由
路由是Express.js的核心功能之一。它允許我們定義應用程序如何響應客戶端發送的HTTP請求。下面是一個簡單的路由示例:
上述代碼定義了一個GET請求路由,當訪問應用程序的根路徑(/)時,服務器將返回"Hello World!"。
四、中間件
Express.js中的中間件是一種函數,它可以處理請求和響應,或者終止請求-響應周期。中間件在Express.js中扮演著非常重要的角色,用于執行各種任務,如日志記錄、身份驗證、錯誤處理等。
以下是一個簡單的中間件示例,用于記錄每個請求的URL:
app.use((req, res, next) => {
console.log(`Request URL: ${req.url}`);
next();
});
五、靜態文件服務
Express.js還提供了靜態文件服務功能,可以方便地為用戶提供圖片、CSS和JavaScript等靜態資源。例如,以下代碼將設置一個靜態文件目錄:
app.use(express.static('public'));
在上述設置中,Express.js將自動為public目錄下的文件提供路由。
六、啟動服務器
最后,我們需要監聽一個端口以啟動服務器。以下代碼將啟動一個監聽3000端口的服務器:
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
七、總結
通過本文的介紹,你應該已經對Express.js有了一個初步的了解。當然,Express.js的功能遠不止于此,還有更多高級特性和用法等待你去探索。不過,通過這15分鐘的閱讀,你已經邁出了全棧開發的重要一步。現在,你可以嘗試使用Express.js構建一個簡單的Web應用程序,將所學知識付諸實踐。記住,全棧之路雖然充滿挑戰,但只要勇敢邁出第一步,就會發現其實并沒有那么難。加油!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。