diff --git "a/\345\205\250\344\277\212\346\236\227/20260330-\344\270\255\351\227\264\344\273\266.md" "b/\345\205\250\344\277\212\346\236\227/20260330-\344\270\255\351\227\264\344\273\266.md" new file mode 100644 index 0000000000000000000000000000000000000000..7033b877e8b2079efd17a368fe3a3f65fcc0eb19 --- /dev/null +++ "b/\345\205\250\344\277\212\346\236\227/20260330-\344\270\255\351\227\264\344\273\266.md" @@ -0,0 +1,107 @@ +# 中间件的学习 + +## 笔记 + +- 什么是中间件? + + 中间件是Express的核心概念,它是一种特殊的函数,可以在请求-响应周期中被调用。它就像一个"过滤器"或"拦截器",请求在到达最终处理函数之前,会经过一系列中间件的处理。 + +### 中间件的作用 + + 1.请求预处理:解析请求体、验证身份、检查权限 + 2.日志处理:记录请求时间、IP等信息 + 3.错误处理:统一处理程序中的错误 + 4.响应后处理:清理资源、记录响应时间 + +### 中间件的函数结构 +``` +//中间件函数有三个基本参数 +function middleware(req,res,next){ + //req:请求对象 + //res:响应对象 + //next:传递给下一个中间件的函数 + + //处理逻辑 + console.log('中间件执行了') + + //重点:调用next()继续传递,如果没有则后面的也将不会执行 + next(); +} +``` + +- 中间件的分类 + 应用级中间件 + 路由级中间件 + 错误处理中间件 + 内置中间件 + 自定义中间件 + +### 常用中间件 + express.json() //解析中间件 + express.urlencoded() //解析URL编码 + express:static() //静态文件 + cors - 跨域资源共享 + +``` + // 解析 +app.use(express.json()); +app.use(express.urlencoded({ extended: true })); + +// 静态文件 +app.use(express.static('public')); + +// 跨域 +app.use(cors()); + +// 日志 +app.use(morgan('combined')); +``` + +### 中间件模式 +``` +// 自定义中间件 +function customMiddleware(req, res, next) { + // 处理逻辑 + next(); // 传递给下一个 +} +``` +- 核心概念 + +| 概念 | 说明 | +| -------- | ------------------------- | +| 中间件 | 请求-响应周期中的处理函数 | +| next() | 传递给下一个中间件 | +| 应用级 | 绑定到app的中间件 | +| 路由级 | 绑定到Router的中间件 | +| 错误处理 | 专门处理错误的中间件 | + +## 选择题 +Express中间件函数有几个参数?B +A. 2个 +B. 3个 +C. 4个 +D. 不确定 + +哪个函数用于将控制权传递给下一个中间件?B +A. pass() +B. next() +C. forward() +D. send() + +错误处理中间件有几个参数?C +A. 2个 +B. 3个 +C. 4个 +D. 5个 + +express.static()用于?B +A. 解析JSON +B. 提供静态文件 +C. 用户认证 +D. 日志记录 + +中间件的执行顺序是?C +A. 随机 +B. 取决于路由 +C. 按照注册顺序 +C. 按照优先级 \ No newline at end of file diff --git "a/\345\205\250\344\277\212\346\236\227/20260401-\346\250\241\345\235\227\345\274\225\346\223\216.md" "b/\345\205\250\344\277\212\346\236\227/20260401-\346\250\241\345\235\227\345\274\225\346\223\216.md" new file mode 100644 index 0000000000000000000000000000000000000000..61a5c560ace304615659aeb7bd4dcafb2ba04c02 --- /dev/null +++ "b/\345\205\250\344\277\212\346\236\227/20260401-\346\250\241\345\235\227\345\274\225\346\223\216.md" @@ -0,0 +1,106 @@ +## 模块引擎 +### 笔记 + 什么是模板引擎? +模板引擎允许在HTML中使用变量和逻辑,让服务器端生成动态页面。就像拼图一样,把数据和模板拼在一起,生成最终的HTML。 + +| 引擎 | 特点 | +| ---------- | ------------------ | +| EJS | 简单易学,类似HTML | +| Pug | 缩进语法,简洁 | +| Handlebars | 逻辑少,扩展性强 | +| Nunjucks | 功能强大,支持继承 | + + +EJS语法 + + 输出变量: <%= %> + 输出HTML(转义): <%- %> + 不输出转义: <%- '' %> + <%= variable %> + <%- variable %> + <% if (cond) { %> + <% items.forEach %> + <%- include() %> + + + 核心概念 + +| 概念 | 说明 | +| -------- | ----------------------- | +| 模板引擎 | 服务端生成动态HTML | +| EJS | <%= %>输出,<% %>执行JS | +| MVC | Model-View-Controller | +| 静态资源 | express.static() | + +### 练习 +#### 选择题 +EJS中哪个语法用于输出变量(转义HTML)?B +A. <%- variable %> +B. <%= variable %> +C. <% variable %> +D. <%# variable %> + +Express中配置模板引擎使用哪个方法?B +A. app.engine() +B. app.set() +C. app.use() +D. app.render() + +MVC中的C代表什么?A +A. Controller +B. Config +C. Component +D. Client + +express.static()用于?B +A. 解析JSON +B. 提供静态文件 +C. 模板渲染 +D. 路由处理 + +循环遍历数组使用什么语法?C +A. <% for (item of items) %> +B. <% items.each(item => { %> +C. <% items.forEach(item => { %> +D. <% while(items) %> + +#### 简答题 +1.什么是模板引擎?它在Web开发中起什么作用? + +模板引擎允许在HTML中使用变量和逻辑,让服务器端生成动态页面。就像拼图一样,把数据和模板拼在一起,生成最终的HTML。 + +作用: +实现服务端渲染(SSR),页面动态生成 +把数据和视图分离,代码更清晰 +复用页面结构(头部、底部、公共布局) +减少重复 HTML 代码,便于维护 + +2.EJS中<%= %>和<% %>有什么区别? + +<%= 变量%> 输出变量内容,并自动转义HTML +<% 代码%> 执行js逻辑 不输出任何内容到页面 + +3.什么是MVC架构?每个部分分别负责什么? + +MVC = Model + View + Controller,一种分层架构思想。 + +负责: +Model(模型):处理数据 业务逻辑 +View(视图):渲染页面 +Controller(控制器):接受请求->调用Model获取数据->把数据传给View->返回页面 +4.Express中如何配置和使用模板引擎? + +先下载安装ejs +app.set('view engine','ejs') +新建 views/ 目录,存放 .ejs 文件。 +渲染页面 + +5.静态资源和模板文件有什么区别? +静态资源(static) +CSS、JS、图片、字体等 +内容固定,不需要服务器渲染 +通过 express.static() 托管 +模板文件(view/template) +EJS、Pug 等,内含变量与逻辑 +由服务器动态渲染后才变成 HTML +放在 views/ 目录,由 res.render() 处理 \ No newline at end of file diff --git "a/\345\205\250\344\277\212\346\236\227/20260402-\346\250\241\347\211\210\345\274\225\346\223\2162.md" "b/\345\205\250\344\277\212\346\236\227/20260402-\346\250\241\347\211\210\345\274\225\346\223\2162.md" new file mode 100644 index 0000000000000000000000000000000000000000..4f1affe7c2a4fb6784bf13f1ff7815a6ae3560a6 --- /dev/null +++ "b/\345\205\250\344\277\212\346\236\227/20260402-\346\250\241\347\211\210\345\274\225\346\223\2162.md" @@ -0,0 +1,192 @@ +## 模版引擎 + +### 笔记 +1.结构 + 1.先创建文件夹,使用vscode打开 输入命令下载安装需要用到的依赖包 + - npm i -D express + - npm i nodemon + - npm i ejs + -下载完成后需要在 package.json完成需要配置的东西 例如想要实现nodemon 要在json文件中配置 + 2.创建需要的文件夹 + - controller(控制器):主要是书写逻辑 + - model(模型)提供数据 + - route(所需路由)文件路径 + - views(视图)在浏览器展示 + 3.可以使用http协议在vscode借助插件来测试代码 + + +### 关键代码 +controller +``` +import { getItemById, listAll } from '../model/blogsDb.js' + +//博客控制器,用于适配路由的处理函数(本质上,其就是对应路由处理函数 + +// 列表 + +export function getAll(req, res) { + let data = listAll(); + let obj = { + code: 1000, + data, + msg: '十年生死两茫茫' + } + res.render('./blogs/index',obj) +} + +// 获取指定博客 + +export function getById(req, res) { + let id = req.params.id || 0; + let data = getItemById(id); + res.json(data); +} + +// 新增博客 +export function add(req, res) { + +} + +// 修改博客 +export function updata(req, res) { + +} + +//删除博客 +export function del(req, res) { + +} +``` + +model +``` +const blogs = [ + { + id: 1, + title: '《风雨朗庭梦已醒》', + author: '公孙鄞' + }, + { + id: 2, + title: '《千金散尽还复来》', + author: '李白' + }, + { + id: 1, + title: '《情又何止两三年》', + author: '百里禄欢' + } +] + +let nextId = 4; + +// 相当于数据库中的CRUD + +// 返回所以博客信息 +export function listAll() { + return blogs; +} + +// 获取指定博客信息 +export function getItemById(id) { + let temItem = blogs.find(item => item.id == id); + return temItem; +} + +// 创建新博客 +export function create(blogData) { + let temobj = { + id: nextId++, + ...blogData + } + blogs.push(temobj); +} + +// 修改博客信息 +export function modify(id, blogData) { + let temobj = blogs.find(item => item.id == id); + + if (temobj) { + temobj.title = blogData.title; + temobj.authour = blogData.authour; + } + + return null; +} + +// 删除博客信息 + +export function del(id) { + //通过id找到对应元素下标,为后面删除做准备 + let idx = blogs.findIndex(item => item.id == id) + if (idx <= -1) { + return null; + } + + //再删除之前先拿到,为后续返回做准备 + let temobj = blogs[idx]; + + blogs.splice(idx, 1); + return temobj; +} +``` + +router +``` +import * as blogHelper from '../controller/blogsController.js' +// 上面是直接使用引入文件的所有function,或者 import {getAll,getById,add,del,update} from '../controller/blogsController.js' + +export function routes(app) { + app.get('/blogs', blogHelper.getAll); + app.get('/blogs/:id', blogHelper.getById); + app.get('/blogs', blogHelper.add); + app.get('/blogs/:id', blogHelper.updata); + app.get('/blogs/:id', blogHelper.del); +} +``` + +views +``` + + + + + + Document + + + + + + + + + + + <% data.forEach(item=>{ %> + + + + + + + <% }) %> + +
Id标题作者操作
+ <%= item.id %> + + <%= item.title %> + + <%= item.author %> + + + +
+ + + +``` \ No newline at end of file diff --git "a/\345\205\250\344\277\212\346\236\227/20260403-\345\210\240\351\231\244\345\212\237\350\203\275.md" "b/\345\205\250\344\277\212\346\236\227/20260403-\345\210\240\351\231\244\345\212\237\350\203\275.md" new file mode 100644 index 0000000000000000000000000000000000000000..bcf57e264f281f390def2573a3b7a3487c109d52 --- /dev/null +++ "b/\345\205\250\344\277\212\346\236\227/20260403-\345\210\240\351\231\244\345\212\237\350\203\275.md" @@ -0,0 +1,101 @@ +### 基于前面的内容上 + +### 关键代码 +controller +``` +// import * as blogs from '../model/blogsDb.js' +import { select, delById } from '../model/blogsDb.js' + +export function getAll(req, res) { + let data = select(); + let obj = { + code: 1000, + data, + msg: '成功' + } + res.render('./blogs/index', obj); +} +export function getItemById(req, res) { + +} +export function add(req, res) { + +} +export function modify(req, res) { + +} +export function del(req, res) { + let id = req.params.id || 0; + console.log(id); + + let data = delById(id); + res.redirect('/blogs'); +} +``` + +``` +const blogsDb = [ + { + id: 1, + title: '渊博要成神', + author: '纯情小男神' + }, + { + id: 2, + title: '我在精神病院学斩神', + author: '哥哥' + }, + { + id: 3, + title: '重生之我在闽大当团支书', + author: '漂亮' + }, + { + id: 4, + title: '吉吉国王', + author: '痛苦小王子' + }, +] + +let nextId = 5; + +export function select(pageIndex = 1, pageSize = 20) { + return blogsDb; +} +export function selectById(pageIndex = 1, pageSize = 20) { + return blogsDb; +} +export function insert(pageIndex = 1, pageSize = 20) { + return blogsDb; +} +export function update(pageIndex = 1, pageSize = 20) { + return blogsDb; +} +export function delById(id) { + let idx = blogsDb.findIndex(item => item.id == id); + + // 找到了 + if (idx >= 0) { + let obj = blogsDb[idx]; + blogsDb.splice(idx, 1); + return obj; + } + return null; +} + + + +``` + +``` +import { getAll, getItemById, add, modify, del } from '../controller/blogcontroller.js' + +export function registryRoute(app) { + app.get('/blogs', getAll); + app.get('/blogs/:id', getItemById); + app.post('/blogs', add); + app.put('/blogs/:id', modify); + app.delete('/blogs/:id', del); + +} +``` \ No newline at end of file