Node.js Express 框架

  • Express 框架

    Express是一个最小且灵活的Node.js Web应用程序框架,它提供了一组强大的功能来开发Web和移动应用程序。它促进了基于Node的Web应用程序的快速开发。以下是Express框架的一些核心功能-
    • 允许设置中间件以响应HTTP请求。
    • 定义一个路由表,该路由表用于根据HTTP方法和URL执行不同的操作。
    • 允许基于将参数传递给模板来动态呈现HTML页面。
  • 安装 Express

    先在本地目录生成package.json
    
    $ npm init
    
    首先,使用NPM在全局范围内安装Express框架,以便可以使用它在node终端上创建Web应用程序。
    
    $ npm install express --save
    
    上面的命令将安装本地保存在node_modules目录中,并在node_modules内部创建一个express目录。您应该安装以下重要模块以及express-
    • body-parser -这是一个node.js中间件,用于处理JSON,Raw,Text和URL编码的表单数据。
    • cookie - parser-解析Cookie头,并使用由cookie名称作为键的对象填充req.cookies。
    • multer -这是一个用于处理多部分/表单数据的node.js中间件。
    
    $ npm install body-parser --save
    $ npm install cookie-parser --save
    $ npm install multer --save
    
  • Hello World 示例

    以下是一个非常基本的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://:::8081
    
    在任何浏览器中打开http://127.0.0.1:8081/以查看以下结果。
  • 请求与响应

    Express应用程序使用回调函数,其参数为req和res对象。
    
    app.get('/', function (req, res) {
       // --
    })
    
    • req对象 -请求对象代表HTTP请求,并具有请求查询字符串,参数,正文,HTTP标头等的属性。
    • res对象 -响应对象表示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("获得了对首页的GET请求");
       res.send('Hello GET');
    })
    
    // 这会响应对主页的POST请求
    app.post('/', function (req, res) {
       console.log("获得了对首页的POST请求");
       res.send('Hello POST');
    })
    
    // 这将响应对/del_user页面的DELETE请求。
    app.delete('/del_user', function (req, res) {
       console.log("获得了对/del_user的DELETE请求");
       res.send('Hello DELETE');
    })
    
    // 这将响应/list_user页面的GET请求。
    app.get('/list_user', function (req, res) {
       console.log("获得了针对/list_user的GET请求");
       res.send('Page Listing');
    })
    
    // 这响应对abcd,abxcd,ab123cd等的GET请求
    app.get('/ab*cd', function(req, res) {   
       console.log("获得了对/ab*cd的GET请求");
       res.send('页面模式匹配');
    })
    
    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://:::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等。您只需要将保存静态资产的目录的名称传递给express.static中间件,即可开始直接提供文件。例如,如果将图像,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 表单 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.html中,并修改server.js以处理主页请求以及HTML表单发送的输入。
    
    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('/process_get', function (req, res) {
       // Prepare output in JSON format
       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.html访问HTML文档将生成以下形式-
    现在,您可以输入名字和姓氏,然后单击提交按钮以查看结果,它应该返回以下结果:
  • POST方法

    这是一个简单的示例,该示例使用HTML 表单 POST方法传递两个值。我们将在server.js中使用process_post路由器来处理此输入。
    
    <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.html中,并修改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.html" );
    })
    
    app.post('/process_post', urlencodedParser, function (req, res) {
       // Prepare output in JSON format
       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.html访问HTML文档将生成以下形式-
    现在,您可以输入名字和姓氏,然后单击提交按钮以查看结果,它应该返回以下结果:
  • 上传文件

    以下HTML代码创建一个文件上传器表单。此表单的方法属性设置为POST,而enctype属性设置为multipart/form-data
    
    <html>
       <head>
          <title>文件上传</title>
       </head>
    
       <body>
          <h3>文件上传:</h3>
          选择文件: <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 = "文件上传" />
          </form>
          
       </body>
    </html>
    
    让我们将上面的代码保存在index.html中,并修改server.js以处理主页请求以及HTML表单发送的输入。
    
    var express = require('express');
    var app = express();
    var fs = require("fs");
    
    var bodyParser = require('body-parser');
    var multer  = require('multer');
    var upload = multer({ dest: './upload_tmp' });
    console.log(upload);
    app.use(express.static('public'));
    app.use(bodyParser.urlencoded({ extended: false })); 
    
    
    
    app.get('/index.html', function (req, res) {
       res.sendFile( __dirname + "/" + "index.html" );
    })
    
    app.post('/file_upload',upload.any(), function (req, res,next) {
       console.log(req.files[0]);  // 上传的文件信息
    
        var des_file = "./upload/" + 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:'文件上传成功!',
                        filename:req.files[0].originalname
                    };
                    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)
    })
    
  • 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)
       res.end("响应完毕");
    }) 
    
    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)
    })