Node.js教程（04）｜使用 Express 框架

2019-07-19 本文已影响50人夏海峰

Express 简介

Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。使用 Express 可以快速地搭建一个完整功能的网站。Express 框架核心特性如下：

可以设置中间件来响应 HTTP 请求。
定义了路由表用于执行不同的 HTTP 请求动作。
可以通过向模板传递参数来动态渲染 HTML 页面。

Express 安装

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

body-parser - node.js 中间件，用于处理 JSON, Raw, Text 和 URL 编码的数据。
cookie-parser - 这就是一个解析Cookie的工具。通过req.cookies可以取到传过来的cookie，并把它们转成对象。
multer - node.js 中间件，用于处理 enctype="multipart/form-data"（设置表单的MIME编码）的表单数据。

# 查看依赖库的版本号：
npm list express

第一个 Express 应用

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

// 路由
app.get('/', function(req, res) {
    res.end('hello world')
})

var server = app.listen('8989', '127.0.0.1', function() {
    var host = server.address().address
    var port = server.address().port
    console.log('server is running on http://%s:%s', host, port)
})

请求对象与响应对象

Express 应用使用回调函数的参数： request 和 response 对象来处理请求和响应的数据。

Request 对象 - request 对象表示 HTTP 请求，包含了请求查询字符串，参数，内容，HTTP 头部等属性。
Response 对象 - response 对象表示 HTTP 响应，即在接收到请求时向客户端发送的 HTTP 响应数据。

相差API，请参见Express官方手册。

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

Express 路由

路由决定了由谁(指定脚本)去响应客户端的请求。在HTTP请求中，我们可以通过路由提取出请求的 URL以及 GET/POST 参数。

使用curl命令模拟 GET/POST 等请求，详情参见：curl 命令。

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

// 路由
app.get('/', function(req, res) {
    console.log('/ GET请求')
    res.end('Hello GET')
})
app.post('/', function(req, res) {
    console.log('/ POST请求')
    res.send('Hello POST')
})

app.get('/add_user', function(req, res) {
    console.log('/add_user 响应 INSERT 请求')
    res.send('添加用户成功')
})
app.get('/list_user', function(req, res) {
    console.log('/list_user 查询所有用户')
    res.send('用户查询成功')
})
app.get('/ab*cd', function(req, res) {
    console.log('/ab*cd 正则匹配路由')
    res.send('正则匹配成功')
})

var server = app.listen('8989', '127.0.0.1', function() {
    var host = server.address().address
    var port = server.address().port
    console.log('server is running on http://%s:%s', host, port)
})

Express 静态资源

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

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

// 静态资源
app.use('/cdn', express.static('public'))

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

var server = app.listen('8989', '127.0.0.1', function() {
    var host = server.address().address
    var port = server.address().port
    console.log('server is running on http://%s:%s', host, port)
})

GET / POST 处理

（1）第1步：前端开发./public/index.html 表单结构设计

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>静态资源文件-表单</title>
</head>
<body>

    <form action="http://127.0.0.1:8989/test_get" method="GET">
        <div>
            <span>First Name：</span>
            <input type="text" name="first_name">
        </div>
        <div>
            <span>Last Name：</span>
            <input type="text" name="last_name">
        </div>
        <div>
            <input type="submit" value="GET 提交">
        </div>
    </form>

    <form action="http://127.0.0.1:8989/test_post" method="POST">
        <div>
            <span>First Name：</span>
            <input type="text" name="first_name">
        </div>
        <div>
            <span>Last Name：</span>
            <input type="text" name="last_name">
        </div>
        <div>
            <input type="submit" value="POST 提交">
        </div>
    </form>
    
</body>
</html>

表单

（2）第2步：服务端开发，处理前端的 GET/POST 请求

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

// 使用body-parser解析body请求体
var bodyParser = require('body-parser')
// 创建 application/x-www-form-urlencoded 编码解析
var urlencodeParser = bodyParser.urlencoded({ extended: false })

// 静态资源
app.use('/cdn', express.static('public'))

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

// GET 处理
app.get('/test_get', function(req, res) {
    // 响应数据
    var resData = {
        code: 0,
        success: true,
        data: {
            first_name: req.query.first_name,
            last_name: req.query.last_name
        }
    }
    res.end(JSON.stringify(resData))
})

// POST 处理
app.post('/test_post', urlencodeParser, function(req, res) {
    // 响应数据
    var resData = {
        code: 0,
        success: true,
        data: {
            first_name: req.body.first_name,
            last_name: req.body.last_name
        }
    }
    res.end(JSON.stringify(resData))
})

var server = app.listen('8989', '127.0.0.1', function() {
    var host = server.address().address
    var port = server.address().port
    console.log('server is running on http://%s:%s', host, port)
})

测试结果

实现文件上传

（1）第1步：前端开发，./public/upload.html 使用form表单进行文件上传时，enctype属性要设置成 multipart/form-data。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文件上传</title>
</head>
<body>    
    <h5>文件上传表单：</h5>
    <form 
        action="/file_upload" 
        method="POST" 
        enctype="multipart/form-data">
        <div>
            <span>请选择文件：</span>
            <input type="file" name="file" size="100">
        </div>
        <div>
            <input type="submit" value="文件上传">
        </div>
    </form>
</body>
</html>

（2）第2步：服务端开发，使用fs模块执行文件的读写操作；使用multer模块处理 enctype="multipart/form-data"的表单数据。

var express = require('express')
var multer = require('multer')
var fs = require('fs')

var app = express()

// 用于处理 enctype="multipart/form-data" 表单数据
app.use(multer({dest: '/tmp/'}).array('file'))

// 静态资源
app.use('/cdn', express.static('public'))

// 文件上传接口
app.post('/file_upload', function(req, res) {
    console.log(req.files[0])
    // 路径
    var des_file = __dirname + '/file/' + req.files[0].originalname
    fs.readFile(req.files[0].path, function(err, data) {
        if (err) {
            return console.log(err)
        }
        fs.writeFile(des_file, data, function(err) {
            if (err) {                
                return console.log(err)
            } else {
                var retData = {
                    code: 0,
                    succuss: true
                }
                res.end(JSON.stringify(retData))
            }
        })
    })
})

var server = app.listen('8989', '127.0.0.1', function() {
    var host = server.address().address
    var port = server.address().port
    console.log('server is running on http://%s:%s', host, port)
})

测试结果

Cookie 会话管理

使用cookie-parser解析后，我们通过req.cookies就可以取到客户端传过来的cookie，并把它们转成对象。下代码读取了由客户端发送来的 cookie 信息：

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

var app = express()

// 使用cookie-parser中间件
app.use(cookieParser())

// Cookie管理
app.get('/', function(req, res) {
    // 读取请求对象中的cookie数据
    var cookie = util.inspect(req.cookies)
    console.log('Cookies: ' + cookie)
    res.end(cookie.toString())
})

var server = app.listen('8989', '127.0.0.1', function() {
    var host = server.address().address
    var port = server.address().port
    console.log('server is running on http://%s:%s', host, port)
})

测试结果

Node.js完整教程第04篇结束！

Node.js教程（04）｜使用 Express 框架

Express 简介

Express 安装

第一个 Express 应用

请求对象与响应对象

Express 路由

Express 静态资源

GET / POST 处理

实现文件上传

Cookie 会话管理

猜你喜欢

热点阅读

Node.js教程（04）｜使用 Express 框架

Express 简介

Express 安装

第一个 Express 应用

请求对象 与 响应对象

Express 路由

Express 静态资源

GET / POST 处理

实现 文件上传

Cookie 会话管理

猜你喜欢

热点阅读

请求对象与响应对象

实现文件上传