Node.js——Express框架入门(get/post处理请求)

最新推荐文章于 2024-09-19 14:15:05 发布

xclhs

最新推荐文章于 2024-09-19 14:15:05 发布

阅读量2.2k

点赞数

分类专栏：学习 nodejs 文章标签： get post 处理表单 node.js Expre

本文链接：https://blog.csdn.net/xxtnt/article/details/83387990

版权

学习同时被 2 个专栏收录

117 篇文章 2 订阅

订阅专栏

nodejs

15 篇文章 0 订阅

订阅专栏

简介

Express是node.js Web应用框架，提供了一系列工具

特点：

--可以设置中间件相应请求

--定义路由表

--向模块传参渲染HTML页面

实例：

var express = require('express');
var app = express();

app.get('/',function (req,res) {
   res.end('Hello World');
});

var server = app.listen(6600,function () {
   var host = server.address().address;
   var port = server.address().port;

   console.log("地址为：http://%s:%s",host,port );
});

App.get(path,callback);

Path:路径

Callback;回调函数，两个参数：1.客户端的请求 2:服务器端的返回请求

Path=’/’表示本地

如果将Path改为如下：

app.get('/index',function (req,res) {
   res.end('Hello World');
});

打开路径：localhost:6000/index,可以看到如下

因此，大家可以大概明白path参数的作用

-------

App.listen()确定监听端口号

App.address().address以及app.port().port()就是获取相应的参数

-------

Request和response对象

Request对象：

常见属性

req.app	当callback为外部文件时，用req.app访问express的实例
req.baseUrl	获取路由当前安装的URL路径
req.body / req.cookies	获得「请求主体」/ Cookies
req.fresh / req.stale	判断请求是否还「新鲜」
req.params	获取路由的parameters
req.hostname / req.ip	获取主机名和IP地址
req.originalUrl	获取原始请求URL
req.path	获取请求路径
req.protocol	获取协议类型
req.query	获取URL的查询参数串
req.route	获取当前匹配的路由
req.subdomains	获取子域名
req.accepts()	检查可接受的请求的文档类型
req.acceptsCharsets / req.acceptsEncodings / req.acceptsLanguages	返回指定字符集的第一个可接受字符编码
req.get()	获取指定的HTTP请求头
req.is()	判断请求头Content-Type的MIME类型

Response 对象 - response 对象表示 HTTP 响应，即在接收到请求时向客户端发送的 HTTP 响应数据。常见属性有：

res.app	同req.app一样
res.append()	追加指定HTTP头
res.set()	在res.append()后将重置之前设置的头
res.cookie(name，value [，option]) opition: domain / expires / httpOnly / maxAge / path / secure / signed	设置Cookie
res.clearCookie()	清除Cookie
res.download()	传送指定路径的文件
res.get()	返回指定的HTTP头
res.json()	传送JSON响应
res.jsonp()	传送JSONP响应
res.location()	只设置响应的Location HTTP头，不设置状态码或者close response
res.redirect()	设置响应的Location HTTP头，并且设置状态码302
res.render(view,[locals],callback)	渲染一个view，同时向callback传递渲染后的字符串，如果在渲染过程中有错误发生next(err)将会被自动调用。callback将会被传入一个可能发生的错误以及渲染后的页面，这样就不会自动输出了。
res.send()	传送HTTP响应
res.sendFile(path [，options] [，fn])	传送指定路径的文件 -会自动根据文件extension设定Content-Type
res.set()	设置HTTP头，传入object可以一次设置多个头
res.status()	设置HTTP状态码
res.type()	设置Content-Type的MIME类型

静态文件

express.static(图片、Css、javascript等)

express.static中间件来设置镜头文件路径


app.use(express.static(‘目录’));

实例

var express = require('express');
var app = express();
app.use(express.static('public'));

app.get('/index',function (req,res) {
   res.send('我认为最深沉的爱 \n' +
       '莫过于你离开以后 \n' +
       '我活成了你的样子。');
});


app.post('/index',function (req,res) {
   res.send("Is life always this hard,or is it just when you are a kid? \n" +
       "人生总是那么痛苦吗？还是只有小时候是这样？ \n" +
       "Always like this. \n" +
       "总是如此。\n");
});


var server = app.listen(6600,function () {
   var host = server.address().address;
   var port = server.address().port;

   console.log("地址为：http://%s:%s",host,port );
});

访问地址：http://localhost:6600/images/4.png

解析

注意到Express框架里面有一个public文件夹，文件夹下面分别是三个文件夹（images\javascripts\stylesheets）,我们可以分别在这些文件夹里面放入照片、javascript文件和css文件。

app.use(‘public’);

这个函数，让用户可以访问public文件夹里面的文件，我在images文件夹里面放入一个名为4.png的照片，，通过访问路径：port/images/照片名即可看到这张照片

Get方法

实例

var express = require('express');
var app = express();
app.use(express.static('public'));

app.get('/index.html', function (req, res) {
    res.sendFile( __dirname + "/" + "index.html" );
});

app.get('/deal',function (req,res) {
   res.send("赛区："+req.query.area+"\n\n战队名"+req.query.teamname);

});


app.post('/index2',function (req,res) {
   res.send("Is life always this hard,or is it just when you are a kid? \n" +
       "人生总是那么痛苦吗？还是只有小时候是这样？ \n" +
       "Always like this. \n" +
       "总是如此。\n");
});


var server = app.listen(6600,function () {
   var host = server.address().address;
   var port = server.address().port;

   console.log("地址为：http://%s:%s",host,port );
});

在这里，我新建了一个名为index.html的文件

在项目文件夹下面想新建一个名为index.html的文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>填写表格</title>
</head>
<body>
<h1 style="vertical-align: middle;text-align: center">s9英雄联盟总决赛冠军竞猜</h1>
<form action="http://127.0.0.1:6600/deal" method="get">
    <p style="vertical-align: middle;text-align: center"><label>赛区</label><input type="text" name="area"></p>
    <p style="vertical-align: middle;text-align: center"><label>战队名</label><input type="text" name="teamname"></p>
    <p style="vertical-align: middle;text-align: center"><input type="submit" value="提交"></p>
</form>
</body>
</html>

可以看到，这个html文件是get方式提交表格，<form>标签写的跳转路径为http://127.0.0.1:6600/deal

在express_test.js文件中，我写了两个app.get()，一个是index.html路径，另外一个为处理index.html提交的表格/deal路径

在第一个get方法中，我通过req.query.teamname和req.query.area方法分别获得用户提交的结果，然后通过res.send()返回一个结果

这是一个简单处理一次客户端的请求

提交表单

Post方法

将index.html中的method改为post，用post来处理用户提交的数据。

实例

var express = require('express');
var bodyParser = require('body-parser');
var app = express();
var urlencodedParser = bodyParser.urlencoded({ extended: false });

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

app.get('/index.html', function (req, res) {
    res.sendFile( __dirname + "/" + "index.html" );
});

app.get('/deal2',function (req,res) {
   res.send("赛区："+req.query.area+"\n\n战队名"+req.query.teamname);

});


app.post('/deal',urlencodedParser,function (req,res) {
   res.send("赛区："+req.body.area+"\n\n战队名"+req.body.teamname);
});


var server = app.listen(6600,function () {
   var host = server.address().address;
   var port = server.address().port;

   console.log("地址为：http://%s:%s",host,port );
});

为了区别get和post处理方法，我把get的路由改为‘/deal2’，post的路由改为‘/deal’

这个运行的效果和上面get的几乎一样，除了一点，那就是数据传输的方式，get方法是通过url来传输数据的，而Post是将表单中的数据放在form的数据体中，按照变量和值相对应的方式，传递到action所指向URL。因此get传输的数据量相比较post方法而言更短，更不安全。

谈到Express处理post方法传来的数据也和处理get方法不一样，通过json解析来获取值，这就需要json数据解析的中间件body-parser

我们从req.body获取post传来的世界，然后通过json解析获得用户传来的结果。

第一种方式，直接对post方法设置解析

第二种方式，app.use（）来设置json解析

两者皆可