Node.js-Express框架基本使用

Express介绍

Express是基于 node.js 的web应用开发框架，是一个封装好的工具包，便于开发web应用（HTTP服务）

Express基本使用

javascript 复制代码

// 1.安装
npm i express
// 2.导入 express 模块
const express = require("express");
// 3.创建应用对象
const app = express();
// 4.创建路由, 根据请求url返回对应数据
// get 请求
app.get("/index", (req, res) => {
	res.send("hello express index")
})
// post 请求
app.post("/add", (req, res) => {
	res.send("hello express add")
})
// all 所有请求类型，* 代表匹配所有路由，不匹配的可以进行 404 
app.all("*", (req, res) => {
	res.send("404 Not Found")
})
// 5.监听端口
app.listen(8080, () => {
	console.log("8080端口服务已经启动...")
})

获取请求参数

javascript 复制代码

// get 请求
app.get("/index", (req, res) => {
	console.log(req.path) // /index
	console.log(req.query) // 查询参数 { name: "zs", age: "18" }
	console.log(req.ip) // 获取 ip 地址
	console.log(req.get("host")) // 获取请求头中的信息
})

获取 URL 路由参数

javascript 复制代码

// http://192.168.0.1:8080/123.html
// get 请求
app.get("/:id.html", (req, res) => {
	console.log(req.params.id) // 123
})

响应参数设置

javascript 复制代码

app.get("/response", (req, res) => {
	res.status(200); // 设置响应状态码
	res.set("参数名", "参数值"); // 设置响应头信息
	res.send("响应内容, 中文不会乱码") // 设置响应体

	res.redirect("http://www.baidu.com"); // 重定向地址 baidu
	res.download(__dirname + "文件路径"); // 下载响应
	// json 格式响应
	res.json({
		name: "zs",
		age: "18"
	});
	// 响应文件内容, 可以将HTML内容响应到页面
	res.sendFile(path.resolve(__dirname, "文件路径"));
})

Express中间件

中间件(Middleware)：是一个回调函数，像路由一样可以访问请求对象(request, response).

作用：使用函数封装公共操作，简化代码。

全局中间件

javascript 复制代码

// 声明中间件函数
function recordMiddleware(req, res, next){
	// 代码逻辑
	next();
}

// 使用中间件, 每个路由都会执行
app.use(recordMiddleware)

路由中间件

javascript 复制代码

// 声明中间件函数
function recordMiddleware(req, res, next){
	// 代码逻辑
	if(req.query.name === "zs"){
		// 验证成功，继续执行后面的回调函数
		next();
	}else{
		res.send("没有权限")
	}
}
// 哪个请求需要验证，为哪个添加中间件函数
app.get("/admin", recordMiddleware, (req, res) => {
	res.send("登录成功")
})

静态资源中间件

注意事项

1、index.html文件为默认打开的资源

2、如果静态资源与路由规则同时匹配，谁先匹配谁就响应

3、路由响应动态资源，静态资源中间件响应静态资源

javascript 复制代码

// 页面可以访问静态资源，CSS、图片等
// 静态资源中间件的设置，将当前文件夹下的public目录作为网站的根目录
app.use(express.static(__dirname + "/public"));

防盗链

javascript 复制代码

// 检测请求头中的referer，防止图片资源被别人使用
app.use((req, res, next) => {
	// 获取 referer 
	let referer = req.get("referer");
	if(referer){
		let url = new URL(referer);
		let hostname = url.hostname;
		if(hostname !=== "当前页面域名"){
			res.send("404")
			return
		}
	}
	next();
})

路由模块化

homeRouter.js

javascript 复制代码

// 引入 express 模块, 封装 home 路由
const express = require("express");
// 创建路由对象
const router = express.Router();
router.get("/home", (req, res) => {
	res.send("这是home页面")
})
// 向外暴漏 router 
module.exports = router;

index.js

javascript 复制代码

// 引入 express 模块
const express = require("express");
// 引入封装的 home 路由
const homeRouter = require("./router/homeRouter.js");
const app = express();
// 使用 homeRouter 路由，页面就可以访问 /home 了。
app.use(homeRouter)

ejs模板引擎

安装ejs

javascript 复制代码

npm i ejs

设置模板引擎

javascript 复制代码

app.set("view engine", "ejs");

设置模板文件存放位置

javascript 复制代码

const path = require("path")
app.set("views", path.resolve(__dirname, "./views"));

render响应

javascript 复制代码

// index.js 文件
app.get("/home", (req, res) => {
	let title = "请求成功！";
	// render(模板文件名, 数据)
	res.render("home", {title: title})
})

// home.ejs 文件
// 响应的页面中就展示---请求成功！
<%= title %>

express generator 应用程序生成器

可以快速创建一个应用的骨架，将文件结构和基础代码搭建出来。

javascript 复制代码

// 1. 安装 express generator 应用程序生成器
npm i -g express-generator
// 2. 创建 ejs 项目文件夹
npm -e ejs项目名称
// 3. 安装依赖包
npm i