编程开源技术交流，分享技术与知识

网站首页 > 开源技术 正文

Node.js GET/POST请求-Web 模块-Express 框架-教程下载

wxchong 2024-10-22 17:54:18 开源技术 10 ℃ 0 评论

Node.js GET/POST请求

视频地址: https://pan.baidu.com/s/1nvop1nN 密码: s9iy

在很多场景中，我们的服务器都需要跟用户的浏览器打交道，如表单提交。

表单提交到服务器一般都使用 GET/POST 请求。

本章节我们将为大家介绍 Node.js GET/POS T请求。

获取GET请求内容

由于GET请求直接被嵌入在路径中，URL是完整的请求路径，包括了?后面的部分，因此你可以手动解析后面的内容作为GET请求的参数。

node.js 中 url 模块中的 parse 函数提供了这个功能。

实例

varhttp = require('http');varurl = require('url');varutil = require('util'); http.createServer(function(req, res){res.writeHead(200, {'Content-Type': 'text/plain; charset=utf-8'}); res.end(util.inspect(url.parse(req.url, true)));}).listen(3000);

在浏览器中访问 http://localhost:3000/user?name=编程改变未来&url=www.biancheng.com 然后查看返回结果:

获取 URL 的参数

我们可以使用 url.parse 方法来解析 URL 中的参数，代码如下：

实例

varhttp = require('http');varurl = require('url');varutil = require('util'); http.createServer(function(req, res){res.writeHead(200, {'Content-Type': 'text/plain'}); // 解析 url 参数varparams = url.parse(req.url, true).query; res.write("网站名：" + params.name); res.write("\n"); res.write("网站 URL：" + params.url); res.end(); }).listen(3000);

在浏览器中访问 http://localhost:3000/user?name=编程改变未来&url=www.biancheng.com 然后查看返回结果:

获取 POST 请求内容

POST 请求的内容全部的都在请求体中，http.ServerRequest 并没有一个属性内容为请求体，原因是等待请求体传输可能是一件耗时的工作。

比如上传文件，而很多时候我们可能并不需要理会请求体的内容，恶意的POST请求会大大消耗服务器的资源，所以 node.js 默认是不会解析请求体的，当你需要的时候，需要手动来做。

基本语法结构说明

varhttp = require('http');varquerystring = require('querystring'); http.createServer(function(req, res){// 定义了一个post变量，用于暂存请求体的信息varpost = ''; // 通过req的data事件监听函数，每当接受到请求体的数据，就累加到post变量中req.on('data', function(chunk){post += chunk; }); // 在end事件触发后，通过querystring.parse将post解析为真正的POST请求格式，然后向客户端返回。req.on('end', function(){post = querystring.parse(post); res.end(util.inspect(post)); });}).listen(3000);

以下实例表单通过 POST 提交并输出数据：

实例

varhttp = require('http');varquerystring = require('querystring'); varpostHTML = '<html><head><meta charset="utf-8"><title>编程改变未来Node.js 实例</title></head>' + '<body>' + '<form method="post">' + '网站名： <input name="name"><br>' + '网站 URL： <input name="url"><br>' + '<input type="submit">' + '</form>' + '</body></html>'; http.createServer(function(req, res){varbody = ""; req.on('data', function(chunk){body += chunk; }); req.on('end', function(){// 解析参数body = querystring.parse(body); // 设置响应头部信息及编码res.writeHead(200, {'Content-Type': 'text/html; charset=utf8'}); if(body.name && body.url){// 输出提交的数据res.write("网站名：" + body.name); res.write("<br>"); res.write("网站 URL：" + body.url); }else{// 输出表单res.write(postHTML); }res.end(); });}).listen(3000);

Node.js Web 模块

什么是 Web 服务器？

Web服务器一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，Web服务器的基本功能就是提供Web信息浏览服务。它只需支持HTTP协议、HTML文档格式及URL，与客户端的网络浏览器配合。

大多数 web 服务器都支持服务端的脚本语言（php、python、ruby）等，并通过脚本语言从数据库获取数据，将结果返回给客户端浏览器。

目前最主流的三个Web服务器是Apache、Nginx、IIS。

Web 应用架构

  • Client - 客户端，一般指浏览器，浏览器可以通过 HTTP 协议向服务器请求数据。

  • Server - 服务端，一般指 Web 服务器，可以接收客户端请求，并向客户端发送响应数据。

  • Business - 业务层， 通过 Web 服务器处理应用程序，如与数据库交互，逻辑运算，调用外部程序等。

  • Data - 数据层，一般由数据库组成。

使用 Node 创建 Web 服务器

Node.js 提供了 http 模块，http 模块主要用于搭建 HTTP 服务端和客户端，使用 HTTP 服务器或客户端功能必须调用 http 模块，代码如下：

var http = require('http');

以下是演示一个最基本的 HTTP 服务器架构(使用8081端口)，创建 server.js 文件，代码如下所示：

var http = require('http');
var fs = require('fs');
var url = require('url');
// 创建服务器
http.createServer( function (request, response) { 
// 解析请求，包括文件名
var pathname = url.parse(request.url).pathname;
// 输出请求的文件名
console.log("Request for " + pathname + " received.");
// 从文件系统中读取请求的文件内容
fs.readFile(pathname.substr(1), function (err, data) {
if (err) {
console.log(err);
// HTTP 状态码: 404 : NOT FOUND
// Content Type: text/plain
response.writeHead(404, {'Content-Type': 'text/html'});
}else{ 
// HTTP 状态码: 200 : OK
// Content Type: text/plain
response.writeHead(200, {'Content-Type': 'text/html'}); 
// 响应文件内容
response.write(data.toString()); 
}
// 发送响应数据
response.end();
}); 
}).listen(8081);
// 控制台会输出以下信息
console.log('Server running at http://127.0.0.1:8081/');

接下来我们在该目录下创建一个 index.htm 文件，代码如下：

<html>
<head>
<title>Sample Page</title>
</head>
<body>
Hello World!
</body>
</html>

执行 server.js 文件：

$ node server.js
Server running at http://127.0.0.1:8081/

接着我们在浏览器中打开地址：http://127.0.0.1:8081/index.htm，显示如下图所示:

执行 server.js 的控制台输出信息如下：

Server running at http://127.0.0.1:8081/
Request for /index.htm received. # 客户端请求信息

Gif 实例演示

使用 Node 创建 Web 客户端

Node 创建 Web 客户端需要引入 http 模块，创建 client.js 文件，代码如下所示：

var http = require('http');
// 用于请求的选项
var options = {
host: 'localhost',
port: '8081',
path: '/index.htm' 
};
// 处理响应的回调函数
var callback = function(response){
// 不断更新数据
var body = '';
response.on('data', function(data) {
body += data;
});
response.on('end', function() {
// 数据接收完成
console.log(body);
});
}
// 向服务端发送请求
var req = http.request(options, callback);
req.end();

新开一个终端，执行 client.js 文件，输出结果如下：

$ node client.js
<html>
<head>
<title>Sample Page</title>
</head>
<body>
Hello World!
</body>
</html>

执行 server.js 的控制台输出信息如下：

Server running at http://127.0.0.1:8081/
Request for /index.htm received. # 客户端请求信息

Gif 实例演示

Express 简介

Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。

使用 Express 可以快速地搭建一个完整功能的网站。

Express 框架核心特性：

  • 可以设置中间件来响应 HTTP 请求。

  • 定义了路由表用于执行不同的 HTTP 请求动作。

  • 可以通过向模板传递参数来动态渲染 HTML 页面。

安装 Express

安装 Express 并将其保存到依赖列表中：

$ cnpm 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编码）的表单数据。

$ cnpm install body-parser --save
$ cnpm install cookie-parser --save
$ cnpm install multer --save

安装完后，我们可以查看下 express 使用的版本号：

$ cnpm list express/data/www/node└── express@4.15.2 -> /Users/tianqixin/www/node/node_modules/.4.15.2@express

第一个 Express 框架实例

接下来我们使用 Express 框架来输出 "Hello World"。

以下实例中我们引入了 express 模块，并在客户端发起请求后，响应 "Hello World" 字符串。

创建 express_demo.js 文件，代码如下所示：

express_demo.js 文件代码：

//express_demo.js 文件varexpress = require('express');varapp = express(); app.get('/', function(req, res){res.send('Hello World');})varserver = app.listen(8081, function(){varhost = server.address().addressvarport = server.address().portconsole.log("应用实例，访问地址为 http://%s:%s", host, port)})

执行以上代码：

$ node express_demo.js
应用实例，访问地址为 http://0.0.0.0:8081

在浏览器中访问 http://127.0.0.1:8081，结果如下图所示：

请求和响应

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.send()：传送HTTP响应

  14. res.sendFile(path [，options] [，fn])：传送指定路径的文件 -会自动根据文件extension设定Content-Type

  15. res.set()：设置HTTP头，传入object可以一次设置多个头

  16. res.status()：设置HTTP状态码

  17. res.type()：设置Content-Type的MIME类型

路由

我们已经了解了 HTTP 请求的基本应用，而路由决定了由谁(指定脚本)去响应客户端请求。

在HTTP请求中，我们可以通过路由提取出请求的URL以及GET/POST参数。

接下来我们扩展 Hello World，添加一些功能来处理更多类型的 HTTP 请求。

创建 express_demo2.js 文件，代码如下所示：

express_demo2.js 文件代码：

varexpress = require('express');varapp = express(); // 主页输出 "Hello World"app.get('/', function(req, res){console.log("主页 GET 请求"); res.send('Hello GET');})// POST 请求app.post('/', function(req, res){console.log("主页 POST 请求"); res.send('Hello POST');})// /del_user 页面响应app.get('/del_user', function(req, res){console.log("/del_user 响应 DELETE 请求"); res.send('删除页面');})// /list_user 页面 GET 请求app.get('/list_user', function(req, res){console.log("/list_user GET 请求"); res.send('用户列表页面');})// 对页面 abcd, abxcd, ab123cd, 等响应 GET 请求app.get('/ab*cd', function(req, res){console.log("/ab*cd GET 请求"); res.send('正则匹配');})varserver = app.listen(8081, function(){varhost = server.address().addressvarport = server.address().portconsole.log("应用实例，访问地址为 http://%s:%s", host, port)})

执行以上代码：

$ node express_demo2.js
应用实例，访问地址为 http://0.0.0.0:8081

接下来你可以尝试访问 http://127.0.0.1:8081 不同的地址，查看效果。

在浏览器中访问 http://127.0.0.1:8081/list_user，结果如下图所示：

在浏览器中访问 http://127.0.0.1:8081/abcd，结果如下图所示：

在浏览器中访问 http://127.0.0.1:8081/abcdefg，结果如下图所示：

静态文件

Express 提供了内置的中间件 express.static 来设置静态文件如：图片， CSS, JavaScript 等。

你可以使用 express.static 中间件来设置静态文件路径。例如，如果你将图片， CSS, JavaScript 文件放在 public 目录下，你可以这么写：

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

我们可以到 public/images 目录下放些图片,如下所示：

node_modules
server.jspublic/public/imagespublic/images/logo.png

让我们再修改下 "Hello World" 应用添加处理静态文件的功能。

创建 express_demo3.js 文件，代码如下所示：

express_demo3.js 文件代码：

varexpress = require('express');varapp = express(); app.use(express.static('public')); app.get('/', function(req, res){res.send('Hello World');})varserver = app.listen(8081, function(){varhost = server.address().addressvarport = server.address().portconsole.log("应用实例，访问地址为 http://%s:%s", host, port)})

执行以上代码：

$ node express_demo3.js
应用实例，访问地址为 http://0.0.0.0:8081

执行以上代码：

GET 方法

以下实例演示了在表单中通过 GET 方法提交两个参数，我们可以使用 server.js 文件内的 process_get 路由器来处理输入：

index.htm 文件代码：

<html><body><formaction="http://127.0.0.1:8081/process_get"method="GET">First Name: <inputtype="text"name="first_name"><br> Last Name: <inputtype="text"name="last_name"><inputtype="submit"value="Submit"></form></body></html>

server.js 文件代码：

varexpress = require('express');varapp = express(); app.use(express.static('public')); app.get('/index.htm', function(req, res){res.sendFile(__dirname + "/" + "index.htm");})app.get('/process_get', function(req, res){// 输出 JSON 格式varresponse = {"first_name":req.query.first_name, "last_name":req.query.last_name}; console.log(response); res.end(JSON.stringify(response));})varserver = app.listen(8081, function(){varhost = server.address().addressvarport = server.address().portconsole.log("应用实例，访问地址为 http://%s:%s", host, port)})

执行以上代码：

node server.js
应用实例，访问地址为 http://0.0.0.0:8081

浏览器访问 http://127.0.0.1:8081/index.htm，如图所示：

现在你可以向表单输入数据，并提交，如下演示：

POST 方法

以下实例演示了在表单中通过 POST 方法提交两个参数，我们可以使用 server.js 文件内的 process_post 路由器来处理输入：

index.htm 文件代码：

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

server.js 文件代码：

varexpress = require('express');varapp = express();varbodyParser = require('body-parser'); // 创建 application/x-www-form-urlencoded 编码解析varurlencodedParser = bodyParser.urlencoded({extended: false})app.use(express.static('public')); app.get('/index.htm', function(req, res){res.sendFile(__dirname + "/" + "index.htm");})app.post('/process_post', urlencodedParser, function(req, res){// 输出 JSON 格式varresponse = {"first_name":req.body.first_name, "last_name":req.body.last_name}; console.log(response); res.end(JSON.stringify(response));})varserver = app.listen(8081, function(){varhost = server.address().addressvarport = server.address().portconsole.log("应用实例，访问地址为 http://%s:%s", host, port)})

执行以上代码：

$ node server.js应用实例，访问地址为 http://0.0.0.0:8081

浏览器访问 http://127.0.0.1:8081/index.htm，如图所示：

现在你可以向表单输入数据，并提交，如下演示：

文件上传

以下我们创建一个用于上传文件的表单，使用 POST 方法，表单 enctype 属性设置为 multipart/form-data。

index.htm 文件代码：

<html><head><title>文件上传表单</title></head><body><h3>文件上传：</h3>选择一个文件上传: <br/><formaction="/file_upload"method="post"enctype="multipart/form-data"><inputtype="file"name="image"size="50"/><br/><inputtype="submit"value="上传文件"/></form></body></html>

server.js 文件代码：

<pre>varexpress = require('express');varapp = express();varfs = require("fs"); varbodyParser = require('body-parser');varmulter = require('multer'); app.use(express.static('public'));app.use(bodyParser.urlencoded({extended: false}));app.use(multer({dest: '/tmp/'}).array('image')); app.get('/index.htm', function(req, res){res.sendFile(__dirname + "/" + "index.htm");})app.post('/file_upload', function(req, res){console.log(req.files[0]); // 上传的文件信息vardes_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)); }); });})varserver = app.listen(8081, function(){varhost = server.address().addressvarport = server.address().portconsole.log("应用实例，访问地址为 http://%s:%s", host, port)})

执行以上代码：

$ node server.js
应用实例，访问地址为 http://0.0.0.0:8081

浏览器访问 http://127.0.0.1:8081/index.htm，如图所示：

现在你可以向表单输入数据，并提交，如下演示：

Cookie 管理

我们可以使用中间件向 Node.js 服务器发送 cookie 信息，以下代码输出了客户端发送的 cookie 信息：

express_cookie.js 文件代码：

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

执行以上代码：

$ node express_cookie.js

现在你可以访问 http://127.0.0.1:8081 并查看终端信息的输出，如下演示：

相关资料

  • Express官网： http://expressjs.com/

  • Express4.x API 中文版： Express4.x API Chinese

  • Express4.x API：http://expressjs.com/zh-cn/4x/api.html

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表
赣ICP备2023011894号-2