express中的中间件 以及静态资源的处理
中间件的定义 处理http请求的函数 做接受到请求和发生响应中间的一系列操作 1.注册中间件 app.use() 会匹配所有的请求方式和请求路径 app.method() method 请求方式
2.中间件的格式 app.use((req,res,next)=>{ //中间件的处理 //将控制权交给下一个中间件或路由· next(); })
多个中间件之间 共享同一份req和res 我们可以在上游的中间件中 为为req和res对象添加自定义的属性和方法，来让下游的中间件或路由使用。
注意
1.一般要在路由之前注册中间件 2.客户端(浏览器) 发来的请求 可以连续调用多个中间件 3.执行完成中间件的代码后 千万不要忘记next 4.不要在next之后写代码
示例 初始化
npm init
下载express
npm i express
编写app.js入口文件实现中间件
//引入express
const express = require(express)
const app = express()
const port = 3000
//它就是一个中间价 对post参数进行解析
app.use(express.urlencoded({extended:false}));
//中间件
app.use((req,res,next)=>{
console.log("第一个中间件");
req.data = new Date();
next();
})
app.use((req,res,next)=>{
console.log("第二个中间件");
next();
})
app.get("/",(req,res)=>{
res.send("hello,word!");
})
app.get("/login",(req,res)=>{
res.send("欢迎来到登录页："+req.data);
})
app.listen(port, () => console.log(`Example app listening on port ${port}!`))
服务器报404案例
//引入express
const express = require(express)
const app = express()
const port = 3000
app.get(/, (req, res) => res.send(Hello World!))
app.get("/index",(req,res)=>{
res.send("欢迎来到首页")
})
//将中间件放在最后 （特殊情况）
app.use((req,res)=>{
res.send("404");
})
app.listen(port, () => console.log(`Example app listening on port ${port}!`))
静态资源 1.创建一个文件夹，将所有的静态资源（html，HTML引用的js，css，图片等放进入。） 2. 在app.js中添加一句话： app.use(express.static(path.join(__dirname,“public”),{index:false})); express.static：设置静态资源目录
path.join(__dirname,"public") ：在当前目录下的public文件夹
{index:false} 配置对象，index表示 默认的索引目录，默认值为true，如果路径是/，自动找public下的index.html文件。
静态资源目录可以设置多个。 注意： 当一个页面被响应回浏览器时，它所引入的外部资源是没有一起响应的。当页面被浏览器解析时，碰到外部资源（link，img，script标签），会根据上述标签的href属性再次发起请求，请求这些文件。 小技巧：写路径时，忽略设置的静态目录，当它们不存在！！！ 示例 生成相应的包结构
npm i express
新建一个public文件（存放静态资源） public 里建img文件存放图片 建一个index.html (在服务器中要注意图片资源路径问题 和本地不一样)
<!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>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<h1>欢迎法外狂徒张三来到首页</h1>
<!-- 图片是浏览器重新发起了一个请求：localhost:3000/img/lx.jpg -->
<img src="./img/lx.jpg" alt="">
</body>
</html>
新建public2文件 下面建css文件 index.css
h1{
color: red;
}
建app.js入口函数
//引入express
const express = require(express)
const app = express()
const port = 3000
const path = require("path");
//可引入多个文件路径
app.use(express.static(path.join(__dirname,"public"),{index:false}));
app.use(express.static(path.join(__dirname,"public2"),{index:false}));
app.get(/, (req, res) => res.send(Hello World!))
app.listen(port, () => console.log(`Example app listening on port ${port}!`))
运行项目即可
npm app.js
可看到样式以及图片都被引入了