11_Node.js Express 框架

2019-01-28 本文已影响2人 e20a12f8855d

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

Express 除了为 http 模块提供了更高层的接口外，还实现了
许多功能，其中包括：

路由控制；
模板解析支持；
动态视图；
用户会话；
CSRF 保护；
静态文件服务；
错误控制器；
访问日志；
缓存；
插件支持。

需要指出的是，Express 不是一个无所不包的全能框架，像 Rails 或 Django 那样实现了
模板引擎甚至 ORM （Object Relation Model，对象关系模型），它只是一个轻量级的 Web架，多数功能只是对 HTTP 协议中常用操作的封装，更多的功能需要插件或者整合其他模块来完成。

一、安装 Express

执行：

npm install express -s

此外还需要安装几个模块：

npm install body-parse -s
npm install cookie-parser -s
cnpm install multer -s

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

二、Express 框架实例

express02.js

const express = require('express');
let app = express();
app.get('/', (request, response) => {
    response.send('Express 模块。');
    response.end();
});
const server = app.listen(3000, '127.0.0.1', () => {
    const host = server.address().address;
    const port = server.address().port;
    console.log(`服务器运行在 http://${host}:${port}`);
});

执行 node express02.js，访问 127.0.0.1:3000/。

三、路由

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

express03.js

const express = require('express');
console.log(express);
let app = express();
// GET 请求
app.get('/', (request, response) => {
    console.log("主页 GET 请求。");
    response.send('主页 GET 请求。');
    response.end();
});

// POST 请求
app.post('/', (request, response) => {
    console.log("主页 POST 请求。");
    response.send('主页 POST 请求。');
    response.end();
});
// /del_user 页面 GET 请求
app.get('/del_user', (request, response) => {
    console.log("删除用户页面GET 请求。");
    response.send('删除用户页面。');
    response.end();
});
// /list_user 页面 GET 请求
app.get('/list_user', (request, response) => {
    console.log("用户列表页面 GET 请求。");
    response.send('用户列表页面。');
    response.end();
});
// 对页面 abcd,abxcd,ab123cd，等响应 GET　请求。
app.get('/ab*cd', (request, response) => {
    console.log("/ab*cd GET 请求。");
    response.send('/ab*cd GET 页面。');
    response.end();
});

const server = app.listen(3000, '127.0.0.1', () => {
    const host = server.address().address;
    const port = server.address().port;
    console.log(`服务器运行在 http://${host}:${port}`);
});

执行 node express03.js，访问以下地址：

四、静态文件

Express 提供了内置的中间件 express.static 来设置静态文件如：图片，CSS，JavaScript 等，你可以使用 express.static 中间件来设置静态文件路径。

例如，如果你将图片，CSS，JavaScript 等文件放在 public 目录下，你可以这么写：

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

express04.js

const express = require('express');
let app = express();
app.use(express.static('public'));
app.get('/', (request, response) => {
    response.send('express.static 静态文件。');
    response.end();
});
const server = app.listen(3000, '127.0.0.1', () => {
    const host = server.address().address;
    const port = server.address().port;
    console.log(`服务器运行在 http://${host}:${port}`);
});

执行 node express04.js，在浏览器访问 127.0.0.1:3000/images/user.jpg。

五、GET 方法

以下实例演示了在表单中通过 GET 方法提交两个参数，我们可以使用 server.js 文件内的 process_get 路由器来处理输入。

public/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>GET 方法</title>
</head>

<body>
    <form action="http://127.0.0.1:3000/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="提交">
    </form>
</body>

</html>

express05get.js

const express = require('express');
let app = express();
app.use(express.static('public'));
app.get('/process_get', (request, response) => {
    // 输出 JSON 格式
    let result = {
        'first_name': request.query.first_name,
        'last_name': request.query.last_name
    };
    console.log(result);
    response.end(JSON.stringify(result));
});
const server = app.listen(3000, '127.0.0.1', () => {
    const host = server.address().address;
    const port = server.address().port;
    console.log(`服务器运行在 http://${host}:${port}`);
});

执行 node express05get.js，在浏览器访问 127.0.0.1:3000/index.html，向表单输入数据并提交。

六、GET 方法

以下实例演示了在表单中通过 POST 方法提交两个参数，我们可以使用 server.js 文件内的 process_post 路由器来处理输入。

public/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>GET 方法</title>
</head>

<body>
    <form action="http://127.0.0.1:3000/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="提交">
    </form>
</body>

</html>

express06post.js

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

// 创建 application/x-www-form-urlencoded 编码解析
let urlencodedParser = bodyParser.urlencoded({
    extended: false
});

app.use(express.static('public'));
app.get('/process_post', urlencodedParser, (request, response) => {
    // 输出 JSON 格式
    let result = {
        'first_name': request.query.first_name,
        'last_name': request.query.last_name
    };
    console.log(result);
    response.end(JSON.stringify(result));
});
const server = app.listen(3000, '127.0.0.1', () => {
    const host = server.address().address;
    const port = server.address().port;
    console.log(`服务器运行在 http://${host}:${port}`);
});

执行 node express06post.js，在浏览器访问 127.0.0.1:3000/index.html，向表单输入数据并提交。

七、文件上传

以下实例我们创建一个用于上传文件的表单，使用 POST 方法，表单 enctype 属性设置为 multipart/form-data。

public/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
</head>

<body>
    <form action="/file_upload" method="post" enctype="multipart/form-data">
        选择一个文件上传：<input type="file" name="image" size="50">
        <input type="submit" value="上传">
    </form>
</body>

</html>

express07file_upload.js

const express = require('express');
let app = express();
const fs = require('fs');
const bodyParser = require('body-parser');
const multer = require('multer');

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

app.post('/file_upload', (request, response) => {
    console.log(request.files[0]); // 上传文件的信息
    let des_file = __dirname + '/' + request.files[0].originalname;
    fs.readFile(request.files[0].path, (err, data) => {
        fs.writeFile(des_file, data, (err) => {
            if (err) {
                console.log(err);
                return false;
            } else {
                result = {
                    message: "File uploaded successfully!",
                    filename: request.files[0].originalname
                };
            };
            console.log(result);
            response.end(JSON.stringify(result));
        });
    });
});
const server = app.listen(3000, '127.0.0.1', () => {
    const host = server.address().address;
    const port = server.address().port;
    console.log(`服务器运行在 http://${host}:${port}`);
});

执行 node express07file_upload.js，在浏览器访问 127.0.0.1:3000/index.html，上传一张图片，成功上传后会出现在当前目录下。

八、Cookie 管理

我们可以使用中间件向 Node.js 服务器发送 cookie 信息，以下代码输出了客户端发送的 cookie 信息。

express08Cookie.js

const express = require('express');
const cookieParser = require('cookie-parser');
const util = require('util');

let app = express();
app.use(cookieParser());
app.get('/', (request, response) => {
    console.log("Cookies:" + util.inspect(request.cookies));
    response.end();
});
const server = app.listen(3000, '127.0.0.1', () => {
    const host = server.address().address;
    const port = server.address().port;
    console.log(`服务器运行在 http://${host}:${port}`);
});

执行 node express08Cookie.js，在浏览器访问 127.0.0.1:3000/。

11_Node.js Express 框架

一、安装 Express

二、Express 框架实例

三、路由

四、静态文件

五、GET 方法

六、GET 方法

七、文件上传

八、Cookie 管理

期待您的关注！

猜你喜欢

热点阅读