express
express是一个基于Node.js的轻量级 Web 应用框架(服务器软件),因其简洁性和灵活性而广受欢迎。它提供了一组简单的工具,用于快速创建 Web 应用,通过express可以快速的在node中搭建一个web服务器。官网地址:www.expressjs.com.cn- 下载:①创建并初始化项目
yarn init -y;②安装expressyarn add express;③创建index.js 并编写代码 - 使用:
a. 引入express;
const express = require("express")
b. 获取服务器的实例(对象);const app = express()
c. 为服务器设置路由;app.METHOD(...)
d. 启动服务器app.listen(3000, () => {})
// 1 引入express
const express = require("express")
// 2 获取服务器的实例(对象)
const app = express()
// 3 如果希望服务器可以正常访问,则需要为服务器设置路由
// 创建一组响应规则(路由规则)
app.get("/hello", (req, res) => {
console.log("有人访问我了~")
//读取用户的请求(request)req 表示的是用户的请求信息,通过req可以获取用户传递数据
console.log(req.url)
// 根据用户的请求返回响应(response)res 表示的服务器发送给客户端的响应信息
// res.sendStatus() 向客户端发送响应状态码
// res.status() 用来设置响应状态吗
// res.sendStatus(404) res.status(200)
res.send("<h1>这是我的第一个服务器</h1>")
})
// 4 监听端口 启动服务
// app.listen(端口号) 用来启动服务器,启动后,可以通过3000端口来访问了
app.listen(3000, () => {
console.log("服务器已经启动~")
})
// 打开http://127.0.0.1:3000/hello访问,显示文字:这是我的第一个服务器
路由
- 如果希望服务器可以正常访问,则需要为服务器设置路由,路由可以根据不同的请求方式和请求地址来处理用户的请求;格式:app.请求方法(路径,回调函数)
app.get('/hello', (request, response) => {...}) - 参数获取
a. params 参数:指的是URL路径中的参数console.log(request.params.id);
b. query 参数:获取请求报文中的数据console.log(request.query);
c. 请求体参数 - 响应设置: 设置响应状态码 设置响应头 设置响应体 重定向 响应文件内容
- Router 管理路由: express 中的 Router 是一个完整的中间件和路由系统,可以看做是一个小型的 app 对象,它可以对路由进行模块化拆分,能更好的管理路由。
const router = express.Router();
// 1 获取params参数
app.get("/hello/:name", (req, res) => {
// 可以通过req.params属性来获取这些参数
console.log(req.params)
res.send("<h1>hello</h1>")
})
// 2 获取query参数
app.get("/login", (req, res) => {
// 通过req.query来获取查询字符串中的数据 req.query.username
if (req.query.username === "admin" && req.query.password === "123123") {
res.send("<h1>欢迎您回来!登录成功</h1>")
} else {
res.send("<h1>用户名或密码错误!</h1>")
}
})
// 3 获取请求体的参数
app.post("/login", (req, res) => {
// 通过req.body来获取post请求的参数(请求体中的参数)
// 默认情况下express不会自动解析请求体,需要通过中间件来为其增加功能 app.use(express.urlencoded())
const {username, password} = req.body
if (username === "admin" && password === "123123") {
res.send("<h1>登录成功</h1>")
} else {
res.send("<h1>登录失败</h1>")
}
})
//-----------------------------
// express提供的响应设置api 设置响应状态码 设置响应头 设置响应体 重定向 响应文件内容
response.status(500); //设置响应状态码
response.set('token','r5t776tr5e345e'); //设置响应头
response.send('中文响应不乱码'); //设置响应体
response.redirect('http://baidu.com') //重定向
response.sendFile(__dirname + '/home.html') //响应文件内容
Router 管理路由
// 1 homeRouter.js文件
const express = require('express');
//创建路由器对象
const router = express.Router();
//在 router 对象身上添加路由
router.get('/list', (req, res) => {
...
res.send('列表');
})
router.post('/add', (req, res) => {
...
res.send('添加成功');
});
module.exports = router;//暴露router
// 2 index.js文件使用路由
const express = require('express');
const homeRouter = require('./routes/homeRouter')
const app = express();
//设置和使用中间件
app.use(homeRouter);
app.listen(3000,()=>{
console.log('3000 端口启动....');
})
中间件
- 中间件(Middleware)本质是一个回调函数。在express使用app.use来定义一个中间件,中间件作用和路由很像
- 定义与使用
a. 定义:function middle1 (request,response,next){ ... next();}
b. 使用:app.use(middle1) - 可以多个调用,需要
next()放行:next是一个函数,调用函数后,可以触发后续的中间件,不能在响应处理完毕后调用。 - 作用:
a. 可以配置静态资源的路径;
app.use(express.static(path.resolve(__dirname, "public")))
b. 引入解析请求体的中间件;app.use(express.urlencoded())
c. 验证是否登录,没有重定向到登录页
d. 在路由最后,配置错误路由重定向到404页面,只要这个中间件一执行,说明上边的地址都没有匹配。
// 1 引入express
const express = require("express")
// 2 获取服务器的实例(对象)
const app = express()
// 3 使用中间件,比如可以在这里验证是否登录,检测到session就放行,没有则重定向
app.use((req, res, next) => {
console.log("第一个中间件111", Date.now())
next() // 放行
})
app.use((req, res, next) => {
console.log("第二个中间件222", Date.now())
// res.send("<h1>222</h1>")
next() // 不放行,下面不能执行
})
app.use((req, res, next) => {
if (req.session.loginUser) {
next()
} else {
res.redirect("/")
}
})
// 4 创建一组响应规则(路由规则)
app.get("/list", (req, res) => {
// ...
res.send("列表数据")
})
app.post("/add", (req, res) => {
// ...
res.send('添加成功');
})
// 只要这个中间件一执行,说明上边的地址都没有匹配
app.use((req, res) => {
res.status(404)
res.send("<h1>您访问的地址已被劫持!</h1>")
})
// 5 监听端口 启动服务
app.listen(3000, () => {
console.log("服务器已经启动~")
})
EJS模版引擎
- 模板引擎是分离用户界面和业务数据的一种技术,EJS 是一个高效的 Javascript 的模板引擎ejs.bootcss.com/
- html页面属于静态页面,不会自动跟随服务器中数据的变化而变化,可以根据数据变化页面内容有变化,在node中被称为模板,ejs是node中的一款模板引擎
- 下载安装 ejs
npm i ejs - 使用
a. 配置express的模板引擎为ejs
app.set("view engine", "ejs");
b. 配置模板路径app.set("views", path.resolve(__dirname, "views"));
c. views下面新建students.ejs文件,<h1>学生名称:<%=name %></h1>;
d. 渲染一个模板引擎传递变量,并将其返回给浏览器res.render("students", { name });
e. 在网页中显示出来
const express = require('express')
const app = express()
// 1 配置模板引擎
app.set('view engine', 'ejs')
// 2 配置模板位置
app.set('views', 'views')
app.get('/students', (request, response) => {
let name = '学员1'
// 3 res.render() 用来渲染一个模板引擎,并将其返回给浏览器
res.render("students", { name })
})
app.listen(8088, () => {
console.log('服务器启动成功!')
})
// students.ejs
// 通过它可以将render传递进来的数据直接在网页中显示出来
// <%= %>在ejs中输出内容时,它会自动对字符串中的特殊符号进行转义 <主要是为了避免xss攻击
// <% %> 可以在其中直接编写js代码,js代码会在服务器中执行
<%=name %>
<% if(name === "学员1") {%>
<h2>学员1值班</h2>
<%} else{%>
<h2>学员n值班</h2>
<%}%>