无涯教程-Node.js - Express框架

原创

无涯教程 2024-01-21 15:23:30 博主文章分类：无涯教程网 ©著作权

©著作权归作者所有：来自51CTO博客作者无涯教程的原创作品，请联系作者获取转载授权，否则将追究法律责任

Express是一个最小且灵活的Node.js Web应用程序框架，它提供了一组强大的功能来开发Web和移动应用程序，它促进了基于节点的Web应用程序的快速开发，以下是Express框架的一些核心功能-

允许设置中间件以响应HTTP请求。
定义一个路由表，该路由表用于根据HTTP方法和URL执行不同的操作。
允许基于将参数传递给模板来动态呈现HTML页面。

安装Express

首先，使用NPM在全球范围内安装Express框架，以便可以使用它在节点终端上创建Web应用程序。

$npm install express --save

上面的命令将安装本地保存在 node_modules 目录中，并在node_modules内部创建一个目录，您应该安装以下重要模块以及express-

body-parser - 这是一个node.js中间件，用于处理JSON，Raw，Text和URL编码的表单数据。
cookie-parser - 解析Cookie标头，并使用以cookie名称为键的对象填充req.cookie。
multer - 这是用于处理multipart/form-data的node.js中间件。

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

Hello Would 示例

以下是一个非常基本的Express应用程序，该应用程序启动服务器并在端口8081上监听连接，此应用程序以 Hello World!响应，以请求首页。对于其他所有路径，它都会返回 404 Not Found。。

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().address
   var port=server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

将上面的代码保存在名为server.js的文件中，并使用以下命令运行它。

$node server.js

您将看到以下输出-

Example app listening at http://0.0.0.0:8081

在任何浏览器中打开http://127.0.0.1:8081/以查看以下输出。

Request & Response

Express应用程序使用一个回调函数，其参数为 request 和 response 对象。

app.get('/', function (req, res) {
   //--
})

Request Object - 请求对象代表HTTP请求,并具有请求查询字符串,参数,正文,HTTP标头和等等。
Response Object - 响应对象代表Express应用程序在收到HTTP请求时发送的HTTP响应。

您可以打印 req 和 res 对象，这些对象提供了许多与HTTP请求和响应有关的信息，包括cookie，会话，URL等。

基本路由

无涯教程已经看到了一个为主页提供HTTP请求的基本应用程序，路由是指确定应用程序如何响应对特定端点的客户端请求，该特定端点是URI和特定的HTTP请求方法(GET，POST等)。

无涯教程将扩展Hello World程序，以处理更多类型的HTTP请求。

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

//这会在主页上响应“Hello World”
app.get('/', function (req, res) {
   console.log("Got a GET request for the homepage");
   res.send('Hello GET');
})

//这会响应主页的 POST 请求
app.post('/', function (req, res) {
   console.log("Got a POST request for the homepage");
   res.send('Hello POST');
})

//这会响应 /del_user 页面的 DELETE 请求。
app.delete('/del_user', function (req, res) {
   console.log("Got a DELETE request for /del_user");
   res.send('Hello DELETE');
})

//这会响应 /list_user 页面的 GET 请求。
app.get('/list_user', function (req, res) {
   console.log("Got a GET request for /list_user");
   res.send('Page Listing');
})

//这会响应 abcd、abxcd、ab123cd 等的 GET 请求
app.get('/ab*cd', function(req, res) {   
   console.log("Got a GET request for /ab*cd");
   res.send('Page Pattern Match');
})

var server=app.listen(8081, function () {
   var host=server.address().address
   var port=server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

将上面的代码保存在名为server.js的文件中，并使用以下命令运行它。

$node server.js

您将看到以下输出-

Example app listening at http://0.0.0.0:8081

现在，您可以在http://127.0.0.1:8081尝试不同的请求，以查看server.js生成的输出。以下是一些截屏，它们显示了对不同URL的不同响应。

屏幕再次显示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等。

如，如果将图像，CSS和JavaScript文件保存在名为public的目录中，则可以执行以下操作-

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

无涯教程将在 public/images 子目录中保留一些图像，如下所示-

node_modules
server.js
public/
public/images
public/images/logo.png

让无涯教程修改" Hello Word"应用程序，以添加处理静态文件的功能。

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

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

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

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

   console.log("Example app listening at http://%s:%s", host, port)
})

将上面的代码保存在名为server.js的文件中，并使用以下命令运行它。

$node server.js

现在，在任何浏览器中打开http://127.0.0.1:8081/images/logo.png。

GET方法

这是一个简单的示例，该示例使用HTML FORM GET方法传递两个值。无涯教程将在server.js中使用 process_get 路由器来处理此输入。

<html>
   <body>
      
      <form action="http://127.0.0.1:8081/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>

让无涯教程将上面的代码保存在index.htm中，并修改server.js以处理主页请求以及HTML表单发送的输入。

var express=require('express');
var app=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 格式准备输出
   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().address
   var port=server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

使用 http://127.0.0.1:8081/index.htm 访问HTML文档将生成以下形式-

{"first_name":"Learnfk","last_name":"Paul"}

POST方法

这是一个简单的示例，该示例使用HTML FORM POST方法传递两个值，无涯教程将在server.js中使用 process_get 路由器来处理此输入。

<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>

让无涯教程将上面的代码保存在index.htm中，并修改server.js以处理主页请求以及HTML表单发送的输入。

var express=require('express');
var app=express();
var bodyParser=require('body-parser');

//Create application/x-www-form-urlencoded parser
var urlencodedParser=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 格式准备输出
   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().address
   var port=server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

使用 http://127.0.0.1:8081/index.htm 访问HTML文档将生成以下形式-

{"first_name":"Learnfk","last_name":"Paul"}

File Upload

以下HTML代码创建一个文件上传器表单，此表单的方法属性设置为 POST ，而enctype属性设置为 multipart/form-data

<html>
   <head>
      <title>上传文件ing Form</title>
   </head>

   <body>
      <h3>上传文件:</h3>
      Select a file to upload: <br />
      
      <form action="http://127.0.0.1:8081/file_upload" method="POST" 
         enctype="multipart/form-data">
         <input type="file" name="file" size="50" />
         <br />
         <input type="submit" value="Upload File" />
      </form>
      
   </body>
</html>

让无涯教程将上面的代码保存在index.htm中，并修改server.js以处理主页请求以及文件上传。

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

var bodyParser=require('body-parser');
var multer =require('multer');

app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(multer({ dest: '/tmp/'}));

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

app.post('/file_upload', function (req, res) {
   console.log(req.files.file.name);
   console.log(req.files.file.path);
   console.log(req.files.file.type);
   var file=__dirname + "/" + req.files.file.name;
   
   fs.readFile( req.files.file.path, function (err, data) {
      fs.writeFile(file, data, function (err) {
         if( err ) {
            console.log( err );
            } else {
               response={
                  message:'File uploaded successfully',
                  filename:req.files.file.name
               };
            }
         
         console.log( response );
         res.end( JSON.stringify( response ) );
      });
   });
})

var server=app.listen(8081, function () {
   var host=server.address().address
   var port=server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

使用 http://127.0.0.1:8081/index.htm 访问HTML文档将生成以下形式-

上传文件:
Select a file to upload: 


NOTE: This is just dummy form and would not work, but it must work at your server.

Cookies管理

您可以使用以下中间件选项将cookie发送到可以处理该cookie的Node.js服务器。以下是一个简单示例，用于打印客户端发送的所有cookie。

var express     =require('express')
var cookieParser=require('cookie-parser')

var app=express()
app.use(cookieParser())

app.get('/', function(req, res) {
   console.log("Cookies: ", req.cookies)
})
app.listen(8081)