Express框架

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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值