Express框架的介绍

Author： jinxiaoliang
发布时间：April 14, 2020
1644views
No comments
6751 words
Categories： Node

1.Express框架简介

1.1 Express框架是什么

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

1.2 Express

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

1.3 入门代码

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

//get请求
app.get('/', (req,res) => {
    //send()
    //1.send方法内部会检测响应内容的类型
    //2.send方法会自动设置http状态码
    //3.send方法会帮我们自动设置响应的内容类型及编码

    res.send('hello express');
});
app.get('/list', (req,res) => {
    //send()
    //1.send方法内部会检测响应内容的类型
    //2.send方法会自动设置http状态码
    //3.send方法会帮我们自动设置响应的内容类型及编码

    res.send({name: 'zhangsan', age: 20});
});

//监听端口
app.listen(3000);
console.log('success');

2.中间件

2.1 什么是中间件

中间件就是一堆方法，可以接收客户端发来的请求，可以对请求做出响应，也可以将请求继续交给下一个中间件继续处理
中间件主要由两部分组成，中间件方法以及请求处理函数
中间件方法由express提供，父子拦截请求，请求处理函数由开发人员提供，负责处理请求
可以针对同一请求设置多个中间件，对同一个请求进行多次处理
默认情况下，请求从上到下一次匹配中间件，一旦匹配成功，终止匹配
可以调用next方法将请求的控制权交给下一个中间件，直到遇到结束请求的中间件

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

//get请求
app.get('/list', (req,res,next) => {
    req.name = 'zhangsan';
    next();
});

app.get('/list', (req,res) => {
    res.end(req.name)
});

//监听端口
app.listen(3000);
console.log('success');

2.2 app.use中间件用法

app.use匹配所有的请求方式，可以直接请求处理函数，代表接收所有的请求

app.use((req,res,next) => {
    console.log(req.url);
    next();
});

app.use第一个参数也可以传入请求地址，代表不论什么请求方式，只要是这个请求地址就接收这个请求

app.use('/admin',(req,res,next) => {
    console.log(req.url);
    next();
})

2.3 中间件应用

路由保护，客户端在访问需要登录的页面时，可以先使用中间件判断用户登录状态，用户如果未登录，则拦截请求，直接响应，禁止用户进入需要登录的页面

const express = require('express');

const app = express();
app.use('/admin',(req,res,next) => {
    res.writeHead(200,{'Content-Type':'text/html;charset=utf-8'});
    let isLogin = true;
    if(isLogin) {
        next();
    } else {
        res.send('你还没有登录，不能访问/admin页面');
    }
});

app.get('/admin', (req, res) => {
    res.send('你已经登录，可以访问当前页面');
});

app.listen(3000);
console.log('success')

网站的维护公告，在所有路由的最上面定义接收所有请求的中间件，直接为客户端做出响应，网站正在维护中

app.use((req,res,next) => {
    res.send('网站正在维护中...');
});

自定义404页面

app.use((req,res) => {
    res.send('当前访问的页面不存在...');
});

2.4 错误处理中间件

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

const express = require('express');

const app = express();
app.use((req,res,next) => {
    console.log('zhangsan');
    next();
});

app.use('/list',(req,res,next) => {
    console.log('list');
});


app.listen(3000);
console.log('success')

当程序出现错误时，调用next方法，并且将错误信息通过参数的形式传递给next()方法，即可触发错误处理中间件

app.get('/index',(req, res, next) => {
    /*throw new Error('程序发生了错误');*/
    fs.readFile('./1.txt','utf8',(err, result) => {
        if(err != null) {
            next(err);
        } else {
            res.send(result);
        }
    });
});
//错误

2.5 捕获错误

在node.js中，异步API的错误信息都是通过回调函数获取的，支持promise对象的异步API发生错误可以通过catch方法捕获，异步函数执行如果发生错误要如何捕获呢？
try catch 可以捕获异步函数以及其他同步代码在执行过程中发生的错误，但是不能捕获其他类型API发生的错误

const express = require('express');
const fs = require('fs');
const promisify = require('util').promisify;
const readFile = promisify(fs.readFile);

const app = express();

app.get('/index',async (req, res, next) => {
    try{
        await readFile('/aaa');
    }
    catch(ex){
        next(ex);
    }
});
//错误处理中间件
app.use((err, req, res, next) => {
    res.status(500).send(err.message);
});

app.listen(3000);
console.log('success');

3.Express请求处理

3.1 构建模块化路由

基本代码

const express = require('express');
const app = express();
//创建路由对象
const home = express.Router();
//为路由对象匹配请求路径
app.use('/home',home);
//创建二级路由
home.get('/index',(req, res) => {
    res.send('welcome index');
});
app.listen(3000);
console.log('open successully!!')

//app.js
const express = require('express');
const app = express();

const home = require('./root/home');
const admin = require('./root/admin');

app.use('/home',home);
app.use('/admin',admin);

app.listen(3000);
console.log('open successully!!')

//home.js
const express = require('express');
const home = express.Router();
home.get('/index',(req,res) => {
    res.send('welcome index');
});

module.exports = home;

//admin.js
const express = require('express');
const admin = express.Router();
admin.get('/index',(req,res) => {
    res.send('welcome admin');
});

module.exports = admin;

3.2 GET参数获取

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

//接收地址栏中？后面的参数
例如http://localhost:3000/?name=zhangsan&age=30
app.get('/',(req, res) => {
    console.log(req.query);//{"name":"zhangsan","age":"30"}
});

3.3 POST参数获取

Express框架中接收post请求参数需要借助第三方包body-parser

//引入body-parser模块
const bodyParser = require('body-parser');
//配置body-parser模块
app.use(bodyParser.urlencoded({ extended: false }));
//接收请求
app.post('/add',(req, res) => {
    console.log(req.body);
});

3.4 Express路由参数

app.get('/find/:id',(req,res) => {
    console.log(req.params);//{id:123}
});

localhost:3000/find/123;

3.5 静态资源的处理

通过Express内置的express.static可以方便地托管静态文件

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

const express = require('express');
const app = express();
const path = require('path')；

app.use(express.static(path.join(__dirname,'public')));

app.listen(3000);
console.log('open successully!!')

3.6 express-art-template模板引擎

使用npm install art-template express-art-template命令进行安装

//当渲染后缀为art的模板时，使用express-art-template
app.engine('art',require('express-art-template'));
//设置模板存放目录
app.set('views',path.join(__dirname,'views'));
//渲染模板时不写后缀，默认拼接art后缀
app.set('views engine','art');
app.get('/',(req,res) => {
    //渲染模板
    res.render('index');
});

const express = require('express');
const path = require('path');
const app = express();

//1.告诉express框架使用什么模板引擎渲染什么后缀的模板文件
app.engine('art',require('express-art-template'));

//2.告诉express框架模板存放的位置是什么
app.set('views',path.join(__dirname,'views'));

//3.告诉express框架的模板后缀是什么
app.set('view engine','art');

app.get('/index',(req, res) => {
    //1.拼接模板路径
    //2.拼接模板后缀
    //3.哪一个模板和哪一个数据进行拼接
    //4.将拼接结果响应给了客户端
    res.render('index',{
        msg: 'message'
    });
})
app.listen(3000);
console.log('success');

3.6 app.locals对象

在app.locals对象下面设置的变量，这个数据在所有的模板中都能获取到

app.locals.users = [{
    name: 'zhangsan',
    age: 20
},{
    name: 'zhangsan',
    age: 20
}]

Last modification：April 14th, 2020 at 10:30 pm

如果觉得我的文章对你有用，请随意赞赏

Express框架的介绍

jinxiaoliang • 2020 年 04 月 14 日

1.Express框架简介

1.1 Express框架是什么

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

1.2 Express

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

1.3 入门代码

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

//get请求
app.get('/', (req,res) => {
    //send()
    //1.send方法内部会检测响应内容的类型
    //2.send方法会自动设置http状态码
    //3.send方法会帮我们自动设置响应的内容类型及编码

    res.send('hello express');
});
app.get('/list', (req,res) => {
    //send()
    //1.send方法内部会检测响应内容的类型
    //2.send方法会自动设置http状态码
    //3.send方法会帮我们自动设置响应的内容类型及编码

    res.send({name: 'zhangsan', age: 20});
});

//监听端口
app.listen(3000);
console.log('success');

2.中间件

2.1 什么是中间件

中间件就是一堆方法，可以接收客户端发来的请求，可以对请求做出响应，也可以将请求继续交给下一个中间件继续处理
中间件主要由两部分组成，中间件方法以及请求处理函数
中间件方法由express提供，父子拦截请求，请求处理函数由开发人员提供，负责处理请求
可以针对同一请求设置多个中间件，对同一个请求进行多次处理
默认情况下，请求从上到下一次匹配中间件，一旦匹配成功，终止匹配
可以调用next方法将请求的控制权交给下一个中间件，直到遇到结束请求的中间件

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

//get请求
app.get('/list', (req,res,next) => {
    req.name = 'zhangsan';
    next();
});

app.get('/list', (req,res) => {
    res.end(req.name)
});

//监听端口
app.listen(3000);
console.log('success');

2.2 app.use中间件用法

app.use匹配所有的请求方式，可以直接请求处理函数，代表接收所有的请求

app.use((req,res,next) => {
    console.log(req.url);
    next();
});

app.use第一个参数也可以传入请求地址，代表不论什么请求方式，只要是这个请求地址就接收这个请求

app.use('/admin',(req,res,next) => {
    console.log(req.url);
    next();
})

2.3 中间件应用

路由保护，客户端在访问需要登录的页面时，可以先使用中间件判断用户登录状态，用户如果未登录，则拦截请求，直接响应，禁止用户进入需要登录的页面

const express = require('express');

const app = express();
app.use('/admin',(req,res,next) => {
    res.writeHead(200,{'Content-Type':'text/html;charset=utf-8'});
    let isLogin = true;
    if(isLogin) {
        next();
    } else {
        res.send('你还没有登录，不能访问/admin页面');
    }
});

app.get('/admin', (req, res) => {
    res.send('你已经登录，可以访问当前页面');
});

app.listen(3000);
console.log('success')

网站的维护公告，在所有路由的最上面定义接收所有请求的中间件，直接为客户端做出响应，网站正在维护中

app.use((req,res,next) => {
    res.send('网站正在维护中...');
});

自定义404页面

app.use((req,res) => {
    res.send('当前访问的页面不存在...');
});

2.4 错误处理中间件

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

const express = require('express');

const app = express();
app.use((req,res,next) => {
    console.log('zhangsan');
    next();
});

app.use('/list',(req,res,next) => {
    console.log('list');
});


app.listen(3000);
console.log('success')

当程序出现错误时，调用next方法，并且将错误信息通过参数的形式传递给next()方法，即可触发错误处理中间件

app.get('/index',(req, res, next) => {
    /*throw new Error('程序发生了错误');*/
    fs.readFile('./1.txt','utf8',(err, result) => {
        if(err != null) {
            next(err);
        } else {
            res.send(result);
        }
    });
});
//错误

2.5 捕获错误

const express = require('express');
const fs = require('fs');
const promisify = require('util').promisify;
const readFile = promisify(fs.readFile);

const app = express();

app.get('/index',async (req, res, next) => {
    try{
        await readFile('/aaa');
    }
    catch(ex){
        next(ex);
    }
});
//错误处理中间件
app.use((err, req, res, next) => {
    res.status(500).send(err.message);
});

app.listen(3000);
console.log('success');

3.Express请求处理

3.1 构建模块化路由

基本代码

const express = require('express');
const app = express();
//创建路由对象
const home = express.Router();
//为路由对象匹配请求路径
app.use('/home',home);
//创建二级路由
home.get('/index',(req, res) => {
    res.send('welcome index');
});
app.listen(3000);
console.log('open successully!!')

//app.js
const express = require('express');
const app = express();

const home = require('./root/home');
const admin = require('./root/admin');

app.use('/home',home);
app.use('/admin',admin);

app.listen(3000);
console.log('open successully!!')

//home.js
const express = require('express');
const home = express.Router();
home.get('/index',(req,res) => {
    res.send('welcome index');
});

module.exports = home;

//admin.js
const express = require('express');
const admin = express.Router();
admin.get('/index',(req,res) => {
    res.send('welcome admin');
});

module.exports = admin;

3.2 GET参数获取

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

//接收地址栏中？后面的参数
例如http://localhost:3000/?name=zhangsan&age=30
app.get('/',(req, res) => {
    console.log(req.query);//{"name":"zhangsan","age":"30"}
});

3.3 POST参数获取

Express框架中接收post请求参数需要借助第三方包body-parser

//引入body-parser模块
const bodyParser = require('body-parser');
//配置body-parser模块
app.use(bodyParser.urlencoded({ extended: false }));
//接收请求
app.post('/add',(req, res) => {
    console.log(req.body);
});

3.4 Express路由参数

app.get('/find/:id',(req,res) => {
    console.log(req.params);//{id:123}
});

localhost:3000/find/123;

3.5 静态资源的处理

通过Express内置的express.static可以方便地托管静态文件

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

const express = require('express');
const app = express();
const path = require('path')；

app.use(express.static(path.join(__dirname,'public')));

app.listen(3000);
console.log('open successully!!')

3.6 express-art-template模板引擎

使用npm install art-template express-art-template命令进行安装

//当渲染后缀为art的模板时，使用express-art-template
app.engine('art',require('express-art-template'));
//设置模板存放目录
app.set('views',path.join(__dirname,'views'));
//渲染模板时不写后缀，默认拼接art后缀
app.set('views engine','art');
app.get('/',(req,res) => {
    //渲染模板
    res.render('index');
});

const express = require('express');
const path = require('path');
const app = express();

//1.告诉express框架使用什么模板引擎渲染什么后缀的模板文件
app.engine('art',require('express-art-template'));

//2.告诉express框架模板存放的位置是什么
app.set('views',path.join(__dirname,'views'));

//3.告诉express框架的模板后缀是什么
app.set('view engine','art');

app.get('/index',(req, res) => {
    //1.拼接模板路径
    //2.拼接模板后缀
    //3.哪一个模板和哪一个数据进行拼接
    //4.将拼接结果响应给了客户端
    res.render('index',{
        msg: 'message'
    });
})
app.listen(3000);
console.log('success');

3.6 app.locals对象

在app.locals对象下面设置的变量，这个数据在所有的模板中都能获取到

app.locals.users = [{
    name: 'zhangsan',
    age: 20
},{
    name: 'zhangsan',
    age: 20
}]

1.Express框架简介

1.1 Express框架是什么

1.2 Express

1.3 入门代码

2.中间件

2.1 什么是中间件

2.2 app.use中间件用法

2.3 中间件应用

2.4 错误处理中间件

2.5 捕获错误

3.Express请求处理

3.1 构建模块化路由

3.2 GET参数获取

3.3 POST参数获取

3.4 Express路由参数

3.5 静态资源的处理

3.6 express-art-template模板引擎

3.6 app.locals对象