Nodejs Express框架

參考:Node.js Express 框架 | 菜鳥教程

第一個 Express 框架實例

接下來我們使用 Express 框架來輸出 "Hello World"。

以下實例中我們引入了 express 模塊,并在客戶端發起請求后,響應 "Hello World" 字符串。

創建 express_demo.js 文件,代碼如下所示:

//express_demo.js 文件
var express = require('express');
var app = express();app.get('/', function (req, res) {res.send('Hello World');
})var server = app.listen(8081, function () {var host = server.address().addressvar port = server.address().portconsole.log("應用實例,訪問地址為 http://%s:%s", host, port)})

執行以上代碼:

在瀏覽器中訪問 http://127.0.0.1:8081,結果如下圖所示:

靜態文件

Express 提供了內置的中間件?express.static?來設置靜態文件如:圖片, CSS, JavaScript 等。

你可以使用?express.static?中間件來設置靜態文件路徑。例如,如果你將圖片, CSS, JavaScript 文件放在 public 目錄下,你可以這么寫:

app.use('/public', express.static('public'));

我們可以到 public/images 目錄下放些圖片,如下所示:

讓我們再修改下 "Hello World" 應用添加處理靜態文件的功能。

創建 express_demo3.js 文件,代碼如下所示:

var express = require('express');
var app = express();app.use('/public', express.static('public'));app.get('/', function (req, res) {res.send('Hello World');
})var server = app.listen(8081, function () {var host = server.address().addressvar port = server.address().portconsole.log("應用實例,訪問地址為 http://%s:%s", host, port)})

執行以上代碼:

在瀏覽器中訪問 http://127.0.0.1:8081/public/1.jpg,結果如下圖所示:

GET 方法

以下實例演示了在表單中通過 GET 方法提交兩個參數,我們可以使用 server.js 文件內的?process_get?路由器來處理輸入:

index.html 文件代碼:

<html>
<body>
<form action="/process_get" method="GET">
First Name: <input type="text" name="first_name">  <br>Last Name: <input type="text" name="last_name">
<input type="submit" value="Submit">
</form>
</body>
</html>

server.js 文件代碼:

var express = require('express');
var app = express();app.use('/public', express.static('public'));app.get('/index.html', function (req, res) {res.sendFile( __dirname + "/" + "index.html" );
})app.get('/process_get', function (req, res) {// 輸出 JSON 格式var response = {"first_name":req.query.first_name,"last_name":req.query.last_name};console.log(response);res.end(JSON.stringify(response));
})var server = app.listen(8081, function () {var host = server.address().addressvar port = server.address().portconsole.log("應用實例,訪問地址為 http://%s:%s", host, port)})

執行以上代碼:

瀏覽器訪問 http://127.0.0.1:8081/index.html,如圖所示:

現在你可以向表單輸入數據,并提交,如下演示:

POST 方法

以下實例演示了在表單中通過 POST 方法提交兩個參數,我們可以使用 server.js 文件內的?process_post?路由器來處理輸入:

index.html 文件代碼:

<html>
<body>
<form action="http://127.0.0.1:8081/process_post" method="POST">
First Name: <input type="text" name="first_name">  <br>Last Name: <input type="text" name="last_name">
<input type="submit" value="Submit">
</form>
</body>
</html>

server.js 文件代碼:

var express = require('express');
var app = express();
var bodyParser = require('body-parser');// 創建 application/x-www-form-urlencoded 編碼解析
var urlencodedParser = bodyParser.urlencoded({ extended: false })app.use('/public', express.static('public'));app.get('/index.html', function (req, res) {res.sendFile( __dirname + "/" + "index.html" );
})app.post('/process_post', urlencodedParser, function (req, res) {// 輸出 JSON 格式var response = {"first_name":req.body.first_name,"last_name":req.body.last_name};console.log(response);res.end(JSON.stringify(response));
})var server = app.listen(8081, function () {var host = server.address().addressvar port = server.address().portconsole.log("應用實例,訪問地址為 http://%s:%s", host, port)})

執行以上代碼:

瀏覽器訪問 http://127.0.0.1:8081/index.html,如圖所示:

現在你可以向表單輸入數據,并提交,如下演示:

文件上傳

以下我們創建一個用于上傳文件的表單,使用 POST 方法,表單 enctype 屬性設置為 multipart/form-data。

index.html 文件代碼:

<html>
<head>
<title>文件上傳表單</title>
</head>
<body>
<h3>文件上傳:</h3>
選擇一個文件上傳: <br />
<form action="/file_upload" method="post" enctype="multipart/form-data">
<input type="file" name="image" size="50" />
<br />
<input type="submit" value="上傳文件" />
</form>
</body>
</html>

server.js 文件代碼:

var express = require('express');
var app = express();
var fs = require("fs");var bodyParser = require('body-parser');
var multer  = require('multer');app.use('/public', express.static('public'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(multer({ dest: '/tmp/'}).array('image'));app.get('/index.html', function (req, res) {res.sendFile( __dirname + "/" + "index.html" );
})app.post('/file_upload', function (req, res) {console.log(req.files[0]);  // 上傳的文件信息var des_file = __dirname + "/" + req.files[0].originalname;fs.readFile( req.files[0].path, function (err, data) {fs.writeFile(des_file, data, function (err) {if( err ){console.log( err );}else{response = {message:'File uploaded successfully', filename:req.files[0].originalname};}console.log( response );res.end( JSON.stringify( response ) );});});
})var server = app.listen(8081, function () {var host = server.address().addressvar port = server.address().portconsole.log("應用實例,訪問地址為 http://%s:%s", host, port)})

執行以上代碼:

要執行如下命令安裝multer:

npm install multer

然后發現package.json文件里多了一個依賴,啟動:

瀏覽器訪問 http://127.0.0.1:8081/index.html,如圖所示:

現在你可以向表單輸入數據,并提交,如下演示:

然后,發現在項目目錄下多了一個pdf文件

Cookie 管理

我們可以使用中間件向 Node.js 服務器發送 cookie 信息,以下代碼輸出了客戶端發送的 cookie 信息:

express_cookie.js 文件代碼:

// express_cookie.js 文件
var express      = require('express')
var cookieParser = require('cookie-parser')
var util = require('util');var app = express()
app.use(cookieParser())app.get('/', function(req, res) {console.log("Cookies: " + util.inspect(req.cookies));
})app.listen(8081)

執行以上代碼:

要執行

npm install cookie-parser

現在你可以訪問 http://127.0.0.1:8081 并查看終端信息的輸出,如下演示:

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

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

相關文章

Docker Swarm 集群

Docker Swarm 集群 本文檔介紹了 Docker Swarm 集群的基本概念、工作原理以及相關命令使用示例&#xff0c;包括如何在服務調度中使用自定義標簽。本文檔適用于需要管理和擴展 Docker 容器化應用程序的生產環境場景。 1. 什么是 Docker Swarm Docker Swarm 是用于管理 Docker…

充電寶項目中的MQTT(輕量高效的物聯網通信協議)

文章目錄 補充&#xff1a;HTTP協議MQTT協議MQTT的核心特性MQTT vs HTTP&#xff1a;關鍵對比 EMQX項目集成EMQX集成配置客戶端和回調方法具體接口和方法處理處理類 補充&#xff1a;HTTP協議 HTTP是一種應用層協議&#xff0c;使用TCP作為傳輸層協議&#xff0c;默認端口是80…

【iOS】UIPageViewController學習

UIPageViewController學習 前言創建一個UIPageViewController最簡單的使用 UIPageViewController的方法說明&#xff1a;效果展示 UIPageViewController的協議方法 前言 筆者最近在寫項目時想實現一個翻書效果&#xff0c;上網學習到了UIPageViewController今天寫本篇博客總結…

Linux搭建環境:從零開始掌握基礎操作(四)

? ? 您好&#xff0c;我是程序員小羊&#xff01; 前言 軟件測試第一步就是搭建測試環境&#xff0c;如何搭建好測試環境&#xff0c;需要具備兩項的基礎知識&#xff1a; 1、Linux 命令: 軟件測試第一個任務, 一般都需要進行環境搭建, 一部分&#xff0c;環境搭建內容是在服…

一天一個java知識點----Tomcat與Servlet

認識BS架構 靜態資源&#xff1a;服務器上存儲的不會改變的數據&#xff0c;通常不會根據用戶的請求而變化。比如&#xff1a;HTML、CSS、JS、圖片、視頻等(負責頁面展示) 動態資源&#xff1a;服務器端根據用戶請求和其他數據動態生成的&#xff0c;內容可能會在每次請求時都…

YOLOV8 OBB 海思3516訓練流程

YOLOV8 OBB 海思3516訓練流程 目錄 1、 下載帶GPU版本的torch(可選) 1 2、 安裝 ultralytics 2 3、 下載pycharm 社區版 2 4、安裝pycharm 3 5、新建pycharm 工程 3 6、 添加conda 環境 4 7、 訓練代碼 5 9、配置Ymal 文件 6 10、修改網絡結構 9 11、運行train.py 開始訓練模…

【深度學習】花書第18章——配分函數

直面配分函數 許多概率模型&#xff08;通常是無向圖模型&#xff09;由一個未歸一化的概率分布 p ~ ( x , θ ) \tilde p(\mathbf x,\theta) p~?(x,θ)定義。我們必須通過除以配分函數 Z ( θ ) Z(\pmb{ \theta}) Z(θ)來歸一化 p ~ \tilde p p~?。以獲得一個有效的概率分…

工作記錄1

日常總結、靈感記錄、學習要點。持續記錄 學海無涯,再好的記性也比不過爛筆頭,記錄一下學習日常、靈感、要點。 前言:最近看見一個博文,很有感觸,是某個大佬自己運營的網站,分享了他的各種經驗文章和自身的一些筆記。本人還沒有他這么屌,所以還是先在CSDN上小試牛刀吧…

Spring Boot(二十一):RedisTemplate的String和Hash類型操作

RedisTemplate和StringRedisTemplate的系列文章詳見&#xff1a; Spring Boot&#xff08;十七&#xff09;&#xff1a;集成和使用Redis Spring Boot&#xff08;十八&#xff09;&#xff1a;RedisTemplate和StringRedisTemplate Spring Boot&#xff08;十九&#xff09;…

智能指針之設計模式1

本文探討一下智能指針和GOF設計模式的關系&#xff0c;如果按照設計模式的背后思想來分析&#xff0c;可以發現圍繞智能指針的設計和實現有設計模式的一些思想體現。當然&#xff0c;它們也不是嚴格意義上面向對象的設計模式&#xff0c;畢竟它們沒有那么分明的類層次體系&…

中間件--ClickHouse-1--基礎介紹(列式存儲,MPP架構,分布式計算,SQL支持,向量化執行,億萬級數據秒級查詢)

1、概述 ClickHouse是一個用于聯機分析(OLAP)的列式數據庫管理系統(DBMS)。它由俄羅斯的互聯網巨頭Yandex為解決其內部數據分析需求而開發&#xff0c;并于2016年開源。專為大規模數據分析&#xff0c;實時數據分析和復雜查詢設計&#xff0c;具有高性能、實時數據和可擴展性等…

Go之Slice和數組:深入理解底層設計與最佳實踐

在Go語言中&#xff0c;數組&#xff08;Array&#xff09;和切片&#xff08;Slice&#xff09;是兩種看似相似卻本質不同的數據結構。本文將深入剖析它們的底層實現機制&#xff0c;并結合實際代碼示例&#xff0c;幫助開發者掌握核心差異和使用場景。 一、基礎概念&#xff…

力扣熱題100——普通數組(不普通)

普通數組但一點不普通&#xff01; 最大子數組和合并區間輪轉數組除自身以外數組的乘積缺失的第一個正數 最大子數組和 這道題是非常經典的適用動態規劃解決題目&#xff0c;但同時這里給出兩種解法 動態規劃、分治法 那么動態規劃方法大家可以在我的另外一篇博客總結中看到&am…

矩陣基礎+矩陣轉置+矩陣乘法+行列式與逆矩陣

GPU渲染過程 矩陣 什么是矩陣&#xff08;Matrix&#xff09; 向量 &#xff08;3&#xff0c;9&#xff0c;88&#xff09; 點乘&#xff1a;計算向量夾角 叉乘&#xff1a;計算兩個向量構成平面的法向量。 矩陣 矩陣有3行&#xff0c;2列&#xff0c;所以表示為M32 獲取固…

MySQL之text字段詳細分類說明

在 MySQL 中&#xff0c;TEXT 是用來存儲大量文本數據的數據類型。TEXT 類型可以存儲非常長的字符串&#xff0c;比 VARCHAR 類型更適合存儲大塊的文本數據。TEXT 數據類型分為以下幾個子類型&#xff0c;每個子類型用于存儲不同大小范圍的文本數據&#xff1a; TINYTEXT: 可以…

超詳細!Android 面試題大匯總與深度解析

一、Java 與 Kotlin 基礎 1. Java 的多態是如何實現的&#xff1f; 多態是指在 Java 中&#xff0c;同一個行為具有多個不同表現形式或形態的能力。它主要通過方法重載&#xff08;Overloading&#xff09;和方法重寫&#xff08;Overriding&#xff09;來實現。 方法重載&a…

如何提高webrtc操作跟手時間,降低延遲

第一次做webrtc項目&#xff0c;操作延遲&#xff0c;一直是個問題&#xff0c;多次調試都不能達到理想效果。偶爾發現提高jitterBuffer時間可以解決此問題。關鍵代碼 const _setJitter (values: number) > { const receives peerConnection.getReceivers();receives.f…

語音合成(TTS)從零搭建一個完整的TTS系統-第一節-效果演示

一、概述 語音合成又叫文字轉語音&#xff08;TTS-text to speech &#xff09;&#xff0c;本專題我們記錄從零搭建一個完整的語音合成系統&#xff0c;包括文本前端、聲學模型和聲碼器&#xff0c;從模型訓練到系統的工程化實現&#xff0c;模型可以部署在手機等嵌入式設備上…

實驗三 I/O地址譯碼

一、實驗目的 掌握I/O地址譯碼電路的工作原理。 二、實驗電路 實驗電路如圖1所示&#xff0c;其中74LS74為D觸發器&#xff0c;可直接使用實驗臺上數字電路實驗區的D觸發器&#xff0c;74LS138為地址譯碼器&#xff0c; Y0&#xff1a;280H&#xff5e;287H&…

Linux 使用Nginx搭建簡易網站模塊

網站需求&#xff1a; 一、基于域名[www.openlab.com](http://www.openlab.com)可以訪問網站內容為 welcome to openlab ? 二、給該公司創建三個子界面分別顯示學生信息&#xff0c;教學資料和繳費網站&#xff0c;基于[www.openlab.com/student](http://www.openlab.com/stud…