Web前端105天-day33-Node.js_托管静态资源public目录,包含文件login.html;-CSDN博客

本文链接：https://blog.csdn.net/qq_52810836/article/details/128164354

node.jsday05

前言

node.jsday05学习开始。

一、复习

二、路由器

用来管理路由，包含多个路由

1.路由器
//(1)引入express模块
//(2)创建路由器对象
const router = express.Router()
//(3)往路由器对象添加路由
//(4)暴露路由器对象
module.exports = router

2.WEB服务器
//(1)引入路由器模块
//(2)挂载引入的路由器
app.use( URL前缀, 路由器  )

练习：创建用户路由器模块user.js，创建路由器对象，添加用户列表的路由(get /list)，暴露路由器对象；在WEB服务器app.js下，引入用户路由器，挂载路由器，添加URL前缀 /user

// user.js

// 引入express模块
const express = require('express')
// 创建路由器的对象
const router = express.Router()
// 添加路由
// 用户列表(get /list)
router.get('/list',(req,res)=>{
	res.send('这是用户列表')
})
// 暴露路由器对象
module.exports = router

// app.js

// 引入express模块
const express = require('express')
// 引入商品路由器模块
const pr = require('./product')
// 引入用户路由器模块
const ur = require('./user')
// 创建WEB服务器
const app = express()
// 设置端口
app.listen(3000)
// 挂载路由器在WEB服务器
// 还可以给所有所有的路由添加前缀 /product
//  /product/list
app.use( '/product',pr )
// 挂载用户路由器，添加前缀/user
// /user/list
app.use( '/user',ur )


// 添加路由
// 商品列表(get /list)
app.get('/list',(req,res)=>{
	res.send('这是商品列表')
})
// 用户列表(get /list)
app.get('/list',(req,res)=>{
	res.send('这是用户列表')
})

// product.js

// 引入express模块
const express = require('express')
// 创建路由器对象
const router=express.Router()
// 往路由器下添加路由
// 商品列表（get /list）
router.get('/list',(req,res)=>{
	res.send('这是商品列表')
})
// 将暴露路由器对象出去
module.exports = router

三、中间件(插件)

用来拦截对WEB服务器的请求，中间件分为应用级中间件、路由级中间件、内置中间件、第三方中间件、错误处理中间件

3.1应用级中间件

是一个函数，一旦拦截到以后会自动调用这个函数

function fn(req,res,next){
   next()   往后执行，可能是下一个中间件或者路由
}
app.use( 拦截的URL, fn )
注意事项：如果拦截的URL为空，表示拦截所有的请求。

练习：编写文件03_middleware.js，使用express创建WEB服务器，添加路由(get /list)，响应'这是所有的用户列表，只有管理员有权限查看'

// 引入express模块
const express = require('express')
// 创建WEB服务器
const app = express()
// 设置端口
app.listen(3000)
function fn(req,res,next){
	// console.log('拦截了对/list的请求')
	// 获取get传递的参数
	var obj = req.query
	console.log(obj)
	// 验证用户名是否为管理员root
	// 如果不是管理员root，响应'提供管理员账户'
	if( obj.user!=='root' ){
		res.send('请提供管理员账号')
	}else{
		// 否则是管理员，才允许继续往后执行
		// 可能是下一个中间件，或者路由
		next()
	}
}
// 添加中间件，拦截对/list的请求
app.use('/list',fn)
// 添加路由(get /list)
app.get('/list',(req,res)=>{
	res.send('这是所用用户列表！只有管理员有权限查看')
})
// 添加中间件，拦截删除用户路由，验证用户身份是否为管理员
app.use('/delete',fn)
// 添加删除用户的路由(get /delete)，响应'删除成功'
app.get('/delete',(req,res)=>{
	res.send('删除成功')
})

function discount(req,res,next){
	console.log('拦截了对/shopping的请求')
	// 获取get传递的参数
	console.log(req.query)
	// 打9折        
	req.query.price *= 0.9
	// 往后执行
	next()
}
// 添加中间件，拦截对/shopping的请求
app.use('/shopping',discount)
// 添加路由(get /shopping)
app.get('/shopping',(req,res,next)=>{
	// 获取get传递的参数
	var obj = req.query
	console.log(obj)
	res.send('商品的价格：' + obj.price)
	// 往后执行
	next()
})
// 后置中间件
app.use((req,res)=>{
	console.log('这是一个后置中间件')
})

3.2路由级中间件

就是路由器的使用，当拦截到URL以后，到指定的路由器下查找路由

app.use( 拦截的URL, 路由器 )

3.3内置中间件

express提供的中间件，就是内置中间件
将post传参转为对象
托管静态资源

静态资源：固定的文件，每次请求这个文件，响应的结果是固定的，例如：html，css，js，图片，视频，声音,...

动态资源：数据库的数据，每次传递的参数不同，响应的结果也不同，例如：请求获取一个员工资源，传递的编号不同，响应的结果也不同

托管静态资源：客户端如果要请求静态资源，不需要通过路由去响应文件，服务器把静态资源放入到一个指定的目录下，让客户端自动去查找。

app.use( express.static('托管的目录') )

练习：编写文件05_ex.js，创建WEB服务器，设置端口；托管静态资源到public目录下，包含文件login.html，点击提交向服务器发请求(post /mylogin)，响应'登录成功！欢迎xxx'


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户登录</title>
	</head>
	<body>
		<h1>用户登录</h1>
		<form action="/user/mylogin" method="post">
			用户<input type="text" name="user"><br>
			密码<input type="password" name="pwd"><br>
			<button>登录</button>
		</form>
	</body>
</html>
// 引入express模块
const express = require('express')
// 引入路由器模块
const ur = require('./05_user')
// 创建WEB服务器
const app = express()
// 设置端口
app.listen(3000)
// 托管静态资源到public目录
app.use( express.static('public') )
// 将post传参转为对象
app.use( express.urlencoded({
	extended: true
}) )
// 练习：编写用户路由器05_user.js，创建路由器对象，将用户登录的路由添加到该路由器下，暴露路由器对象
// 练习：在WEB服务器下引入用户路由器，挂载路由器，并添加前缀/user
// /user/mylogin
app.use( '/user',ur )