美文网首页全栈开发
Node.js教程（04）｜使用 Express 框架

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

作者: 夏海峰 | 来源:发表于2019-07-19 15:33 被阅读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 框架

        本文链接：https://www.haomeiwen.com/subject/kaujlctx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        全栈开发

        关于我们|服务条款|联系我们|Node.js教程（04）｜使用 Express 框架|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！