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
如果觉得我的文章对你有用,请随意赞赏