博客

Express框架

优点

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

vscode命令行输入下载express


npm install express

	//引入express框架
	const express = require('express');
	//创建网站服务器
	const app = express();
	
	app.get('/',(req,res) =>{
	    //send()
	    //1.send方法内部会检测响应内容的类型
	    //2.send方法会自动设置http状态码
	    //3.send方法会帮我们自动设置响应的内容类型及编码
	    res.send('Hello Mr.lizeyan-victor');
	});
	app.get('/list',(req,res) =>{
	    res.send({name:'Mr.lizeyan-victor',age:22});
	});
	//监听端口
	app.listen(3000);
	console.log('Welcome to express，Mr.lizeyan-victor');

启动服务器，找到他的文件地址


node expressdemo.js

中间件

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

	app.get('/request',(req,res,next) =>{
	    req.name = 'Mr.lizeyan-victor';
	    //定义中间件会继续向下查找
	    next();
	});
	app.get('/request',(req,res,next) =>{
	    res.send(req.name);
	});

app.use


匹配所有的请求方式，可以直接传入请求处理函数，代表接收所有的请求，必须定义在其他中间件前面也可以对某一个进行请求；

	//接收所有请求的中间件
	app.use((req,res,next) =>{
	    console.log('请求走了app.use中间件');
	    next();
	});
	
	//当客户端访问/request请求的时候走当前中间件
	app.use('/request',(req,res,next) =>{
	    console.log('请求走了app.use / request中间件');
	    next();
	});
	
	app.get('/list',(req,res,next) =>{
	    res.send('/list');
	});

中间件应用

• 路由保护，可判断是否拦截请求；
• 网站维护公告，在所有路由的最上面定义接收所有请求的中间件，直接对客户端做出响应；
• 自定义404页面；
• 可以链式调用；

	//引入express框架
	const express = require('express');
	//创建网站服务器
	const app = express();
	
	app.use('/admin',(req,res) =>{
	    res.send('网站维护中...');
	})
	
	app.use('/admin',(req,res,next) =>{
	    //用户登录验证
	    let isLogin = false;
	    //判断
	    if(isLogin){
	        //继续向下执行
	        next();
	    }else{
	        //如果没有登录，为客户端做出响应
	        res.send('您还没登录，不能访问/admin页面');
	    }
	})
	
	app.get('/admin',( req, res) =>{
	    res.send('您已经登录，可以访问页面');
	})
	
	app.use((req,res,next) =>{
	    res.status(404).send('当前访问的页面不存在');
	})
	
	//监听端口
	app.listen(3000);
	console.log('Welcome to express，Mr.lizeyan-victor');

错误处理中间件


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

同步代码：

	app.get('/index',(req,res) =>{
	    throw new Error('程序发生了未知错误');
	    res.send('程序正常运行');
	})

异步代码：

	//引入express框架
	const express = require('express');
	//读取文件的模块
	const fs = require('fs');
	//创建网站服务器
	const app = express();
	
	app.get('/index',(req,res,next) =>{
	    // throw new Error('程序发生了未知错误');
	    fs.readFile('./read.txt','utf8',(err,result) =>{
	        if(err != null){
	            next(err);
	        }else{
	            res.send(result);
	        }
	    })
	    // res.send('程序正常运行');
	})
	
	//错误处理中间件
	app.use((err,req,res,next) =>{
	    res.status(500).send(err.message);
	})
	
	//监听端口
	app.listen(3000);
	console.log('Welcome to express，Mr.lizeyan-victor');

try catch


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

	//引入express框架
	const express = require('express');
	//读取文件的模块
	const fs = require('fs');
	//导入方法
	const promisity = require('util').promisify;
	//重新包装一个读取文件的方法
	const readFile = promisity(fs.readFile);
	//创建网站服务器
	const app = express();
	
	app.get('/index', async (req,res,next) =>{
	    try{
	        await readFile('./aaa.js');
	    }catch(ex){
	        next(ex);
	    }
	});
	
	//错误处理中间件
	app.use((err,req,res,next) =>{
	    res.status(500).send(err.message);
	})
	
	//监听端口
	app.listen(3000);
	console.log('Welcome to express，Mr.lizeyan-victor');

构建模块化路由

	//引入express框架
	const express = require('express');
	//创建网站服务器
	const app = express();
	
	//导入路由模块
	const home = require('./route/home.js');
	const admin = require('./route/admin.js');
	
	//路径匹配
	app.use('/home',home);
	app.use('/admin',admin);
	
	//端口监听
	app.listen(3000);

	const express = require('express');
	
	const home = express.Router();
	
	home.get('/index',(req,res) =>{
	    res.send('welcome to home,Mr.Victor');
	});
	//模块成员导出
	module.exports = home;

	const express = require('express');
	
	const admin = express.Router();
	
	admin.get('/index',(req,res) =>{
	    res.send('welcome to admin,Mr.Victor');
	});
	//模块成员导出
	module.exports = admin;

获取get请求参数

	//引入express框架
	const express = require('express');
	//创建网站服务器
	const app = express();
	
	app.get('/index',(req,res) =>{
	    //获取get请求参数
	    res.send(req.query);
	})
	
	//端口监听
	app.listen(3000);

获取POST参数


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

	<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>Document</title>
	</head>
	<body>
	    <form action="http://localhost:3000/add" method="post">
	    <input type="text" name="username">
	    <input type="password" name="password">
	    <input type="submit" name="">
	    </form>
	</body>
	</html>

	//引入express框架
	const express = require('express');
	//第三方模块
	const bodyParser = require('body-parser');
	//创建网站服务器
	const app = express();
	
	//extended:false 方法内部使用querystring模块处理请求参数的格式
	//extended:true 方法内部使用第三方模块qs处理请求参数的格式
	//拦截所有请求
	app.use(bodyParser.urlencoded({extended:false}));
	
	app.post('/add',(req,res) =>{
	    res.send(req.body);
	})
	//端口监听
	app.listen(3000);

Express路由参数

	//引入express框架
	const express = require('express');
	//第三方模块
	const bodyParser = require('body-parser');
	//创建网站服务器
	const app = express();
	
	app.get('/index/:id/:name/:age',(req,res) =>{
	    //接收post请求参数
	    res.send(req.params);
	})
	
	//端口监听
	app.listen(3000);

静态资源处理


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

	//引入express框架
	const express = require('express');
	const path = require('path'); 
	//创建网站服务器
	const app = express();
	
	//实现静态资源访问功能
	app.use('/static',express.static(path.join(__dirname,'public')));
	
	//端口监听
	app.listen(3000);

模板引擎

	const express = require('express');
	const path = require('path');
	const app = express();
	
	//1.告诉express使用什么模板引擎渲染什么后缀的模板文件
	//参数1是模板后缀 参数2使用的模板引擎
	app.engine('art',require('express-art-template'));
	//2.告诉express框架模板存放的位置是什么
	//参数1 views是固定的 参数2指定模板位置，使用绝对路径，文件夹一般叫views
	app.set('views',path.join(__dirname,'views'));
	//3.告诉express框架模板的默认后缀是什么
	app.set('view engine','art');
	//1.拼接模板路径
	//2.拼接模板后缀
	//3.哪一个模板和哪一个数据进行拼接
	//4.将拼接结果响应给了客户端
	app.get('/index',(req,res) =>{
	    res.render('index',{
	        msg: 'message'
	    })
	})
	
	app.get('/list',(req,res) =>{
	    res.render('list',{
	        msg: 'list page'
	    })
	})
	
	//端口监听
	app.listen(3000);

app.local对象

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

//模板配置
	app.engine('art',require('express-art-template'));
	app.set('views',path.join(__dirname,'views'));
	app.set('view engine','art');
	
	//所有模板都能拿到
	app.locals.users = [{
	    name: '李泽言',
	    rank: '倔强青铜',
	},{
	    name: '黑夜的猫不是喵',
	    rank: '百强大佬',
	}]
	
	app.get('/index',(req,res) =>{
	    res.render('index',{
	        msg:'首页'
	    });
	});
	
	app.get('/list',(req,res) =>{
	    res.render('list',{
	        msg:'列表页'
	    })
	})
	
	//端口监听
	app.listen(3000);

	{{msg}}
	
	<ul>
	    {{each users}}
	    <li>
	        {{$value.name}}
	        {{$value.rank}}
	    </li>
	    {{/each}}
	</ul>