express模块
一、创建web服务器
先下载express模块:npm install express
然后引入express模块
//引入express模块
const express=require('express');
//创建web服务器
const app=express();
//设置端口
app.listen(8080,()=>{
console.log('服务器创建成功');
})
二、路由
路由根据请求的方法和请求的URL作出特定的响应,是一个独立的方法
路由三要素:请求的方法、请求的URL、回调函数
1、res 响应的对象
(1)res.send()
res.send()
设置响应的内容并发送
//引入express模块
const express=require('express');
console.log(express);
//创建web服务器
const app=express();
//设置端口
app.listen(8080,()=>{
console.log('服务器创建成功');
})
//添加路由
//请求的方法:get 请求的URL:/index
//res.send() 设置响应的内容并发送
app.get('/index',(req,res)=>{
//设置响应的的内容并发送
res.send('hello world');
})
(2)res.redirect()
res.redirect()
设置跳转的URL并发送
//引入express模块
const express=require('express');
console.log(express);
//创建web服务器
const app=express();
//设置端口
app.listen(8080,()=>{
console.log('服务器创建成功');
})
//添加路由
//请求的方法:get 请求的URL:/index
//res.redirect() 设置跳转的URL并发送
app.get('/index',(req,res)=>{
res.redirect('https://www.w3school.com.cn/');
})
(3)res.sendFile()
res.sendFile()
设置响应的文件并发送,文件必须使用绝对路径(__dirname)
//引入express模块
const express=require('express');
// console.log(express);
//创建web服务器
const app=express();
//设置端口
app.listen(8080,()=>{
console.log('服务器创建成功');
})
//添加路由
//请求的方法:get 请求的URL:/index
// res.sendFile() 设置响应的文件并发送,文件必须使用绝对路径(__dirname)
app.get('/index',(req,res)=>{
res.sendFile(__dirname+'/1.html');
})
2、req 请求的对象
(1)req.url ()
req.url()
获取请求的URL
(2)req.method()
req.method()
获取请求的方法
(3)req.query()
req.query()
获取get传递的数据(查询字符串),结果为对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!---
method: 请求的方法
action:请求的url
-->
<form action="/mysearch" method="get">
<h2>用户搜索</h2>
<!-- 这个name起名字,是获取保存用户输入的值,传入服务器端-->
<input type="text" name="keyword">
<input type="submit">
</form>
</body>
</html>
//引入express模块
const express=require('express');
//创建web服务器
const app=express();
//设置端口
app.listen(8080,()=>{
console.log('服务器创建成功');
})
//路由(get/search),响应文件search.html,添加search.html页面
app.get('/search',(req,res)=>{
//响应文件search.html
res.sendFile(__dirname+'/search.html');
})
//点击提交按钮添加对应search.html的路由(get/mysearch),响应'搜索成功'
app.get('/mysearch',(req,res)=>{
//通过name获取get传递的数据(格式为查询字符串)
//获取请求的url,获取请求的方法,请求对象下面的,拿到url,就相当于拿到了查询字符串
console.log(req.url,req.method);
//express框架里面就有了提供了query方法,内部把乱码解析为对象
console.log(req.query);
res.send('搜索成功');
})
//第一个路由:手动输入/search,获取/search.html页面
//第二个路由:点击按钮搜索发出请求/mysearch,目的是为了获取浏览器向服务器传递的关键字叫'查询字符串'
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LLa8m2wU-1635344489971)(C:\Users\23204\AppData\Roaming\Typora\typora-user-images\image-20211001170034470.png)]
三、路由中获取数据
1、get方法
格式为:http://127.0.0.1:8080/mysearch?keyword=笔记本
路由中获取,结果为对象:req.query()
,结果为{keyword=笔记本}
案例:添加路由(get /login),响应登录的网页login.html,点击提交向服务器发请求(get /mylogin),添加对应的路由,获取传递的数据,响应“登录成功,欢迎:xxx”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!---
method: 请求的方法
action:请求的url
-->
<form action="/mylogin" method="get">
<!-- 这个name起名字,是获取保存用户输入的值,传入服务器端-->
用户:<input type="text" name="userName"><br/>
密码:<input type="password" name="psw"><br/>
<input type="submit">
</form>
</body>
</html>
//引入express模块
const express=require('express');
//创建web服务器
const app=express();
//设置端口
app.listen(8080,()=>{
console.log('服务器创建成功');
})
//添加路由(get /login),响应登录的网页login.html
app.get('/login',(req,res)=>{
//通过输入/login,通过后端把login.html页面传入到前端
res.sendFile(__dirname+'/login.html');
})
//点击提交向服务器发请求(get /mylogin),添加对应的路由,获取传递的数据,响应“登陆成功,欢迎:XXX”
app.get('/mylogin',(req,res)=>{
//获取get传递的数据
//express框架里面就有了提供了query方法,内部把乱码解析为对象
// console.log(req.query);
var obj=req.query;
console.log(obj);
res.send(`登录成功,欢迎:${obj.userName}`)
})
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-azatT0JX-1635344489974)(C:\Users\23204\AppData\Roaming\Typora\typora-user-images\image-20211001174156632.png)]
2、post方法
格式:URL中不可见(在http协议的请求主体)
路由中获取,结果为对象:post传递的数据以流的方式,分为多段,需要通过事件获取
{user: 'tao', password: '123456'}
req.on('data', (chunk)=>{
//chunk获取的数据,转字符串后位查询字符串,需要解析为对象
querystring.parse( chunk.toString() )
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!---
method: 请求的方法
action:请求的url
-->
<form action="/mylogin2" method="post">
<!-- 这个name起名字,是获取保存用户输入的值,传入服务器端-->
用户:<input type="text" name="userName"><br/>
密码:<input type="password" name="psw"><br/>
<input type="submit">
</form>
</body>
</html>
//引入express模块
const express=require('express');
//引入查询字符串模块
const querystring=require('querystring');
//创建web服务器
const app=express();
//设置端口
app.listen(8080,()=>{
console.log('服务器创建成功');
})
//添加路由(post /login),响应登录的网页login2.html
app.get('/login2',(req,res)=>{
//通过输入/login,通过后端把login.html页面传入到前端
res.sendFile(__dirname+'/login2.html');
})
//点击提交向服务器发请求(post /mylogin2),添加对应的路由,获取传递的数据,响应“登陆成功,欢迎:XXX”
app.post('/mylogin2',(req,res)=>{
//post传递的数据以流的方式,分为多段,需要通过事件获取
//一旦有数据流入到内存,自动触发事件,通过回调函数获取
//获取请求的数据req.on(),data是数据名称
req.on('data',(chunk)=>{
//chunk就是获取的分段数据
console.log(chunk);
//转为字符串,格式为查询字符串
var str=chunk.toString();
console.log(str);
//借助查询字符串模块解析为对象
var obj=querystring.parse(str);
console.log(obj);
res.send(`登录成功,欢迎:${obj.userName}`);
})
})
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5ej9MlSt-1635344489976)(C:\Users\23204\AppData\Roaming\Typora\typora-user-images\image-20211001181800945.png)]
3、路由传参
格式:http://127.0.0.1:8080/package/mysql
路由中获取,结果为对象:需要设置形参 {pname: 'mysql'}
app.get('/package/:pname',(req,res)=>{
req.params //获取路由传参的数据,格式为对象
})
一个数据传入
//引入express模块
const express=require('express');
//创建web服务器
const app=express();
//设置端口号
app.listen(8080,()=>{
console.log('服务器创建成功');
})
//路由传参
//路由(get /package):获取包的详情,传递包的名称
// 形参:/:
app.get('/package/:pname',(req,res)=>{
//获取路由传参的数据:形参传入的
console.log(req.params);
res.send('这是包的详情');
})
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5B4VCvic-1635344489977)(C:\Users\23204\AppData\Roaming\Typora\typora-user-images\image-20211001195436390.png)]
多个数据传入
//引入express模块
const express=require('express');
//创建web服务器
const app=express();
//设置端口号
app.listen(8080,()=>{
console.log('服务器创建成功');
})
app.get('/shopping/:lid&:num',(req,res)=>{
//获取路由传参的数据
console.log(req.params);
res.send(`
商品的编号:${req.params.lid}<br/>
购买的数量:${req.params.num}
`)
})
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uUyvp1Bb-1635344489979)(C:\Users\23204\AppData\Roaming\Typora\typora-user-images\image-20211001200430299.png)]
四、对比get和post的区别
get请求会被浏览器缓存,post不会被缓存,post安全度相对高
get请求传递的数据最大不超过8k,post请求传递的数据大小没有限制
get请求速度相对post比较快,在对数据安全要求不高的情况下会使用get,例如搜索
案例
使用express创建WEB服务器,添加路由(get /reg),响应注册的网页reg.html,点击提交向服务器发请求(post /myreg),响应‘注册成功 当前用户名:xx’
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="/myreg" method="post">
用户:<input type="text" name="userName"><br/>
密码:<input type="password" name="psw"><br/>
邮箱:<input type="email" name="email"><br/>
手机:<input type="text" name="phone"><br/>
<input type="submit">
</form>
</body>
</html>
//引入express模块
const express=require('express');
//引入查询字符串的模块
const querystring=require('querystring');
//创建web服务器
const app=express();
//设置端口
app.listen(8080,()=>{
console.log('服务器创建成功');
})
//添加路由(get /reg),响应reg.html网页
app.get('/reg',(req,res)=>{
res.sendFile(__dirname+'/reg.html');
})
//点击提交向服务器发请求(post /myreg),响应“注册成功,当前用户名:xx”
app.post('/myreg',(req,res)=>{
//post传递的数据是以流的形式传递的
req.on('data',(chunk)=>{
// console.log(chunk);
//把chunk传入的数据转换为查询字符串
var str=chunk.toString();
//把查询字符串转化为对象
var obj=querystring.parse(str);
console.log(obj);
res.send(`注册成功,当前用户名为:${obj.userName}`)
})
})
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3UxmTNrq-1635344489980)(C:\Users\23204\AppData\Roaming\Typora\typora-user-images\image-20211001210220033.png)]
五、路由器
用来管理路由,将同一个功能模块下的所有的路由统一管理,最终路由器被WEB服务器使用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zRjf0Yuh-1635344489981)(C:\Users\23204\AppData\Roaming\Typora\typora-user-images\image-20211001210619765.png)]
1、创建web服务器(app.js)
//引入express模块
const express=require('express');
//创建web服务器
const app=express();
//设置端口
app.listen(8080,()=>{
console.log('服务器创建成功');
})
//引入商品路由器 (自定义模块)
const producrRouter=require('./pro');
//看看商品路由器是否引入成功
// console.log(producrRouter);
//使用商品路由器,将路由器中所以的路由挂载到web服务器(app.js)
//参数1:可以给路由添加前缀
//参数2:使用的路由器
//所有的路由都添加了前缀 /product
app.use('/product',producrRouter);
2、创建路由器
//路由器是express下的一个功能,需要先引入express
//引入express模块
const express=require('express');
//创建路由器对象,可以往这个路由器添加多个路由
const r=express.Router();
//往路由器下添加路由
//商品列表(get /list)
r.get('/list',(req,res)=>{
res.send('这是商品列表');
})
//添加商品(get /add)
r.get('/add',(re,res)=>{
res.send('这是添加商品列表');
})
//导出路由器对象
module.exports=r;
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OJE1bVTO-1635344489982)(C:\Users\23204\AppData\Roaming\Typora\typora-user-images\image-20211001215937597.png)]
六、中间件
用于拦截对服务器的请求
分为应用级中间件、路由级中间件、内置中间件、第三方中间件、错误处理中间件
1、应用级中间件
就是一个函数,一旦拦截到以后会自动调用这个函数
app.use( 要拦截的URL, 函数 )
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YRgSMOAx-1635344489982)(C:\Users\23204\AppData\Roaming\Typora\typora-user-images\image-20211001225938234.png)]
//引入express模块
const express=require('express');
//创建web服务器
const app=express();
//设置端口
app.listen(8080,()=>{
console.log('服务器创建成功');
})
function fn(req,res,next){
// console.log('拦截到了对/list的请求');
//获取传递的用户名
//获取get传递的数据
console.log(req.query);
//判断用户是否为管理员root
//如果不是用户root,响应“请提供管理员用户”
if(req.query.user!=='root'){
res.send('请提供管理员用户')
}else{
//next控制往下一步执行,如果有就往下一个中间件或路由执行,没有就直接到了路由
//否则是管理员,往后继续执行,可能是下一个中间件或者是路由
next();
}
}
//添加中间件,拦截对/list的请求
//第一个参数:对哪个路由拦截 第二个参数:函数
app.use('/list',fn);
//添加路由(get /list),响应“这是后台商品数据”
app.get('/list',(req,res)=>{
res.send('这是后台商品数据');
})
//添加中间件,拦截对/delete的请求
app.use('/delete',fn);
//添加路由(get /delete),用于删除用户
app.get('/delete',(req,res)=>{
res.send('用户删除成功');
});
function fn2(req,res,next){
//获取get传递的数据
console.log(req.query);
//打折
req.query.price*=0.9;
//往后继续执行
next();
}
//添加中间件,拦截对/shopping的请求
app.use('/shopping',fn2);
//路由(get /shopping)
app.get('/shopping',(req,res)=>{
//获取get传递的数据
console.log(req.query);
res.send('商品的价格:'+req.query.price);
});
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s2zQnILc-1635344489983)(C:\Users\23204\AppData\Roaming\Typora\typora-user-images\image-20211001231420619.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zoad00jS-1635344489984)(C:\Users\23204\AppData\Roaming\Typora\typora-user-images\image-20211001231743911.png)]
2、路由级中间件
就是路由器的使用
3、内置中间件
托管静态资源中间件:app.use( express.static(‘要托管的目录’) )
如果浏览器端请求静态资源(html,css,js,图像…),不需要通过路由去响应,而是自动的到某个目录下寻找。
//引入express模块
const express=require('express');
//创建web服务器
const app=express();
//设置端口
app.listen(8080,()=>{
console.log('服务器创建成功');
})
//托管给一个目录
//托管静态资源到public目录
//如果浏览器端请求静态资源会自动到public目录寻找
app.use(express.static('./public'));
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zLOJvsoL-1635344489984)(C:\Users\23204\AppData\Roaming\Typora\typora-user-images\image-20211002142445211.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YSvUHBuo-1635344489985)(C:\Users\23204\AppData\Roaming\Typora\typora-user-images\image-20211002142540470.png)]
案例:编写04_three.js文件,创建WEB服务器,托管静态资源到public目录,包含文件login.html,点击提交向服务器请求(post /mylogin),获取传递的数据,响应‘登录成功’
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="/mylogin" method="post">
用户:<input type="text" name="userName" id=""><br/>
密码:<input type="password" name="psw" id=""><br/>
<input type="submit" name="" id="">
</form>
</body>
</html>
//引入express模块
const express=require('express');
//引入查询字符串模块
const querystring=require('querystring');
//创建web服务器
const app=express();
//设置端口
app.listen(8080,()=>{
console.log('服务器创建成功');
})
//静态资源托管到public目录下
app.use(express.static('./public'));
//点击提交向服务器请求(post /mylogin),获取传递的数据,响应“登录成功”
app.post('/mylogin',(req,res)=>{
//post请求的数据是以流的形式传递
req.on('data',(chunk)=>{
//chunk数据流转为查询字符串
var str=chunk.toString();
//引入查询字符串模块把查询字符串转为对象
var obj=querystring.parse(str);
console.log(obj);
res.send(`登录成功,欢迎:${obj.userName}`);
})
// res.send('登录成功');
})
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lD96DPST-1635344489985)(C:\Users\23204\AppData\Roaming\Typora\typora-user-images\image-20211002150955062.png)]
4、第三方中间件
以第三方模块的形式存在,需要先下载安装
body-parser中间件:主体解析,将所有的数据直接解析为对象
下载安装 npm install body-parser
(1)引入body-parser:const bodyParser=require('body-parser');
(2)使用body-parser将所有post请求的数据解析为对象
app.use( express.urlencoded({
extended:false //是否使用第三方的qs模块解析为对象
}) );
(3)在路由中获取post请求的数据:req.body()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="/mylogin" method="post">
用户:<input type="text" name="userName" id=""><br/>
密码:<input type="password" name="psw" id=""><br/>
<input type="submit" name="" id="">
</form>
</body>
</html>
//引入express模块
const express=require('express');
//引入中间件body-parser模块
const bodyParser=require('body-parser');
//创建web服务器
const app=express();
//设置端口
app.listen(8080,()=>{
console.log('服务器创建成功');
})
//静态资源托管到public目录下
app.use(express.static('./public'));
//使用body-parser中间件,将所有post请求的数据解析为对象
app.use(express.urlencoded({
extended:false
}))
//点击提交向服务器请求(post /mylogin),获取传递的数据,响应“登录成功”
app.post('/mylogin',(req,res)=>{
console.log(req.body);
res.send(`登录成功,欢迎:${req.body.userName}`);
})