Express 笔记

简介

Express 框架是什么

Express 是一个基于 Node 平台的web应用开发框架，它提供了一系列的强大特性，帮助你创建各种 Web 应用。
我们可以使用 npm install express 命令进行下载

Express 框架特性

1. 提供了方便简洁的路由定义方式
2. 对获取 HTTP 请求参数进行了简化处理
3. 对模板引擎支持程度高，方便渲染动态 HTML 页面
4. 提供了中间件机制有效控制 HTTP 请求
5. 拥有大量第三方中间件对功能进行扩展

基本使用

基本操作

安装 npm install express 
启动项目 node 文件名.js
停止 ctrl + c

js文件中基本用法

// 引入 express 框架
const express = require('express');
// 创建网站服务器
const app = express();

//创建路由，接收各种请求......
//例如：
app.use('/', (request, response) => {
    // send()
    // 1. send 方法内部会检测响应内容的类型
    // 2. send 方法会自动设置 http 状态码
    // 3. send 方法会帮我们自动设置响应的内容类型及编码
    response.send('Hello Express!!!');
});

// 监听端口 3000 端口
app.listen(3000);
console.log('网站服务器启动成功！！！ - http://localhost:3000');

中间件

什么是中间件

中间件就是一堆方法，可以接受客户端发来的请求、可以对请求做出响应，也可以将请求继续交给下一个中间件继续处理。

中间件主要由两部分构成，中间件方法以及请求处理函数。
中间件方法由Express提供，负责拦截请求，请求处理函数由开发人员提供，负责处理请求。

可以针对同一个请求设置多个中间件，对同一个请求进行对此处理。
默认情况下，请求从上到下依次匹配中间件，一旦匹配成功，终止匹配。
可以调用next方法将请求的控制权交给下一个中间件，直到遇到结束请求的中间件。

// 示例
app.get('/', (request, response, next) => {
    request.name = '略略略';
    next();
});

app.get('/', (request, response) => {
    response.send(request.name);
});

app.use 中间件用法

app.use 匹配所有的请求方式，可以直接传入请求处理函数，代表接收所有的请求。
//例如
function fn() {
    return function (request, response, next) {
        console.log(request.method);
        next();
    };
}

app.use(fn());

// 接收请求
app.get('/', (request, response) => {
    response.send('Hello!!!');
});


//参数的选择
// 例如
app.use((request, response, next) => {
    console.log(request.url);
})

//app.use 第一个参数也可以传入请求地址，代表不论什么请求方式，只要是这个请求地址就接收这个请求。
app.use('/', (request, response, next) => {
    console.log(request.url);
})

中间件应用场景

1. 路由保护，客户端在访问需要登录的页面时，可以使用中间件判断用户登录状态，用户如果未登录，则拦截请求，直接响应，禁止用户需要登录的页面。
2. 网站维护公告，在所有路由的最上面定义接收所有请求的中间件，直接为客户端做出响应，网站正在维护中。
3. 自定义404页面

// 示例
app.use((request, response, next) => {
    // 用户没有登录
    let isLogin = true;
    // 判断
    if (isLogin) {
        //请求继续向下执行
        next();
    }
    else {
        response.send('还没有登录，不能访问！！！');
    }
})

app.get('/', (request, response, next) => {
    request.name = '略略略';
    next();
});

app.get('/', (request, response) => {
    response.send(request.name);
});

错误处理中间件

在程序执行的过程中，不可避免的会出现一些无法预料的错误，比如文件读取失败，数据库连接失败。错误处理中间件是一个集中处理错误的地方。

// 示例
app.get('/', (request, response, next) => {
    throw new Error('程序发生了未知错误！！！');
});

app.use((error, request, response, next) => {
    response.status(500).send(error.message);
})

如果是异步错误，需要手动处理
当程序出现错误时，调用next()方法，并且将错误信息通过参数的形式传递给next()方法，即可触发错误处理中间件。
// 比如说：next(err)

捕获错误

在node.js中，异步API的错误信息都是通过回调函数获取的，支持Promise对象的异步API发生错误可以通过catch方法捕获。异步函数执行如果发生错误要如何捕获错误呢？

try catch 可以捕获异步函数以及其他同步代码在执行过程中发生的错误，但是不能捕获其他类型的API发生的错误。

Express 请求处理

构建模块化路由

app.js

// 引入 express 框架
const express = require('express');
// 创建网站服务器
const app = express();

// 引入路由
const home = require('./home');
const about = require('./about');

// 将路由和请求路径进行匹配
app.use('/', home);
app.use('/', about);

// 监听端口 3000 端口
app.listen(3000);
console.log('网站服务器启动成功！！！ - http://localhost:3000');

home.js

// 引入 express 框架
const express = require('express');
// 创建路由对象
const home = express.Router();

home.get('/home', (request, response) => {
    response.send('我是home');
})

module.exports = home;

about.js

// 引入 express 框架
const express = require('express');
// 创建路由对象
const about = express.Router();

about.get('/about', (request, response) => {
    response.send('我是about');
})

module.exports = about;

GET参数的获取

Express框架中使用request.query即可获取GET参数，框架内部会将GET参数转换为对象并返回。

//例如：http://localhost:3000/?name='略略略'&age=20
app.get('/', (request, response) => {
    response.send(request.query);
});

POST参数的获取

Express中接收post请求参数需要借助第三方包 body-parser
安装：npm i body-parser

// 引入 body-parser模块
const bodyParser = require('body-parser');
// 配置 body-parser 模块
// extended: 为false时在方法内部会用querystring对参数格式进行处理
// extended: 为ture时在会使用第三方模块qs，对参数格式进行处理
app.use(bodyParser.urlencoded({extended: false}));
// 接收请求
app.post('/', (request, response) => {
    response.send(request.body);
});

/** html代码 */
<form action="http://localhost:3000" method="POST">
    <input type="text" name="username" />
    <input type="password" name="password" />
    <input type="submit" />
</form>

Express路由参数

app.get('/:id/:name',(request, response) => {
    response.send(request.params);
});
//在url中：localhost:3000/123456/略略略

静态资源的处理

通过Express内置的express.static可以方便地托管静态文件，例如img、CSS、JavaScript文件等。

//示例
const path = require('path');
app.use(express.static(path.join(__dirname, 'public')));


现在，public目录下面的文件就可以访问了。
例如：
http://localhost:3000/images/index.jpg
http://localhost:3000/html/index.html
http://localhost:3000/css/index.css
http://localhost:3000/js/index.js
......