AI驱动的课程PPT生成 - 教学材料制作案例
📊 AI驱动的课程PPT生成
在 Cursor 中使用 Beamer 和 Marp 快速制作专业教学PPT
📚 多门课程通用 | 👨🏫 樊光瑞
方案概述
教学PPT制作是教师最耗时的工作之一。传统使用 PowerPoint 制作PPT,效率低、版本管理混乱、难以复用。本方案使用 纯文本(LaTeX Beamer 或 Markdown)配合 Cursor AI,实现PPT的快速生成、智能重构和版本控制。
- 纯文本编辑:使用 LaTeX/Markdown,可以用 Git 版本控制
- Cursor 内完成:编辑、预览、生成一站式完成,无需切换软件
- AI 智能重构:根据教学大纲和旧PPT内容,AI 自动优化结构
- 自动添加示例:AI 生成合适的代码示例和图表
- 一键发布:自动上传到 GitHub/Gitee,团队共享
🎯 适用场景
新课程PPT制作
从教学大纲快速生成完整PPT框架
旧PPT重构
优化老旧PPT的结构和内容
自动添加示例
AI生成代码示例和可视化图表
美化与排版
专业的学术风格模板
版本管理
Git管理,多人协作
一键发布
自动推送到代码仓库
两种技术路线对比
方式一:LaTeX Beamer
使用 LaTeX 的 Beamer 宏包制作学术风格的PPT
✅ 优势
- 数学公式排版完美(适合算法、理论课)
- 学术风格专业
- 代码高亮美观
- 输出PDF质量高
⚠️ 劣势
- 学习曲线较陡
- 编译速度较慢
- 调试复杂
🎯 适用课程
数据结构、算法设计、编译原理等理论性强的课程
方式二:Markdown + Marp
使用 Markdown 语法 + Marp 插件制作现代风格的PPT
✅ 优势
- 语法简单,易于上手
- 实时预览,所见即所得
- 编译速度快
- 样式现代、灵活
⚠️ 劣势
- 数学公式不如 Beamer 完美
- 自定义样式需要CSS知识
🎯 适用课程
Java Web、数据库、软件工程等实践性强的课程
PPT 重构的完整工作流程
以下展示如何使用 Cursor AI 将一份旧的 PowerPoint PPT(或现有的教学内容)重构为高质量的 Beamer/Marp PPT。
准备原始材料
收集旧PPT的内容(可以是 .pptx 导出的文本)、教学大纲、课程要点等材料。
PPT 文本提取在 Cursor 中新建文件
创建 .tex(Beamer)或 .md(Marp)文件,选择合适的模板。
CursorAI 分析与重构
使用 Cursor AI(Ctrl+K)分析原始内容,按照教学大纲重新组织结构。
Cursor AIAI 生成示例代码
让 AI 为每个知识点生成合适的代码示例、图表、动画。
GPT-4实时预览调整
使用 Cursor 的预览功能实时查看效果,边写边调整。
PDF 预览编译生成PDF
在 Cursor 终端中编译生成最终的 PDF 文件。
XeLaTeX / Marp CLI版本控制
提交到 Git 仓库,记录每次修改,方便回溯和协作。
Git自动发布
推送到 GitHub/Gitee,自动发布到课程网站或分享给学生。
GitHub Actions方式一:LaTeX Beamer 制作流程
🔧 在 Cursor 中配置 Beamer 环境
- 安装 TeX Live 或 MiKTeX(LaTeX 发行版)
- 在 Cursor 中安装 LaTeX Workshop 扩展
- 配置 PDF 预览功能
📝 Beamer 基础模板
\\documentclass{beamer} % 主题选择 \\usetheme{Madrid} % 或 Berkeley, CambridgeUS 等 \\usecolortheme{dolphin} % 中文支持 \\usepackage{ctex} \\usepackage{xeCJK} % 代码高亮 \\usepackage{listings} \\usepackage{xcolor} % 配置 Java 代码样式 \\lstset{ language=Java, basicstyle=\\ttfamily\\small, keywordstyle=\\color{blue}, commentstyle=\\color{gray}, stringstyle=\\color{red}, numbers=left, numberstyle=\\tiny\\color{gray}, frame=single, breaklines=true } % 标题信息 \\title{Java Web 开发 - 第3讲} \\subtitle{Servlet 与 HTTP 请求处理} \\author{樊光瑞} \\institute{太原科技大学 计算机学院} \\date{\\today} \\begin{document} % 标题页 \\frame{\\titlepage} % 目录页 \\begin{frame}{目录} \\tableofcontents \\end{frame} % 第一部分 \\section{Servlet 基础} \\begin{frame}{什么是 Servlet?} \\begin{itemize} \\item Servlet 是运行在服务器端的 Java 程序 \\item 用于处理客户端的 HTTP 请求并生成响应 \\item 是 Java Web 开发的核心技术之一 \\end{itemize} \\end{frame} \\begin{frame}[fragile]{Servlet 代码示例} \\begin{lstlisting} public class HelloServlet extends HttpServlet { protected void doGet(HttpServletRequest req, HttpServletResponse resp) { resp.setContentType("text/html;charset=UTF-8"); PrintWriter out = resp.getWriter(); out.println("<h1>Hello, Servlet!</h1>"); } } \\end{lstlisting} \\end{frame} \\end{document}
🤖 使用 Cursor AI 重构 Beamer PPT
请帮我将以下PPT内容重构为 LaTeX Beamer 格式: 【原始PPT内容】 [粘贴旧PPT的文字内容] 【教学大纲要点】 1. Servlet 生命周期 2. doGet 和 doPost 方法 3. 请求参数获取 4. 响应内容设置 5. 实际应用案例 【重构要求】 1. 按照教学大纲重新组织内容结构 2. 每个知识点一个 section 3. 为每个知识点添加: - 概念解释(简洁清晰) - 代码示例(完整可运行) - 应用场景说明 4. 使用 Madrid 主题 5. 添加适当的动画效果(\\pause, \\onslide 等) 6. 确保中文显示正常 请生成完整的 .tex 文件代码。
▶️ 在 Cursor 中实时预览
安装 LaTeX Workshop
在 Cursor 扩展商店搜索 "LaTeX Workshop",点击安装
配置编译命令
在 settings.json 中配置使用 XeLaTeX 编译(支持中文)
Ctrl+S 保存即编译
保存文件后自动编译,几秒钟后在侧边栏看到 PDF 预览
实时调整
修改代码,保存后立即看到效果,快速迭代
- 传统 PowerPoint:制作一节课(40-50页)PPT 需要 3-4 小时
- Beamer + Cursor AI:同样的内容只需 30-40 分钟
- 效率提升:约 5-6 倍
方式二:Markdown + Marp 制作流程
🔧 在 Cursor 中配置 Marp
- 在 Cursor 扩展商店搜索 "Marp for VS Code",点击安装
- 安装 Marp CLI:
npm install -g @marp-team/marp-cli - 就这么简单!无需复杂配置
📝 Marp 基础模板
--- marp: true theme: default paginate: true header: 'Java Web 开发 - 第3讲' footer: '樊光瑞 | 太原科技大学' --- # Servlet 与 HTTP 请求处理 ## Java Web 开发 - 第3讲 **授课教师:** 樊光瑞 **单位:** 太原科技大学 计算机学院 **日期:** 2025年10月 --- ## 本节课内容 1. Servlet 基础概念 2. Servlet 生命周期 3. HTTP 请求处理 4. HTTP 响应生成 5. 实际应用案例 --- ## 什么是 Servlet? **定义** - Servlet 是运行在服务器端的 Java 程序 - 用于处理客户端的 HTTP 请求并生成响应 - 是 Java Web 开发的核心技术之一 **特点** ✅ 跨平台 ✅ 高性能 ✅ 可扩展 ✅ 安全可靠 --- ## Servlet 代码示例 ```java public class HelloServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // 设置响应内容类型 resp.setContentType("text/html;charset=UTF-8"); // 获取输出流 PrintWriter out = resp.getWriter(); // 输出 HTML 内容 out.println("<h1>Hello, Servlet!</h1>"); out.println("<p>当前时间:" + new Date() + "</p>"); } } ``` --- ## Servlet 生命周期 **三个核心方法** | 方法 | 调用时机 | 调用次数 | |------|----------|----------| | init() | Servlet 第一次被请求时 | 只调用一次 | | service() | 每次请求时 | 多次 | | destroy() | 服务器关闭时 | 只调用一次 | --- ## 课堂练习 **任务** 编写一个 Servlet,实现用户登录功能 **要求** 1. 接收用户名和密码参数 2. 验证用户名和密码(从数据库查询) 3. 登录成功:跳转到首页,设置 Session 4. 登录失败:返回登录页,显示错误提示 ⏱️ 时间:15分钟
🤖 使用 Cursor AI 生成 Marp PPT
请根据以下教学大纲,生成一份完整的 Marp 格式 PPT: 【课程信息】 - 课程:Java Web 开发 - 章节:第5讲 - Session 和 Cookie - 学时:2学时(90分钟) - 授课对象:大三学生 【教学大纲】 1. 会话跟踪技术概述 - 为什么需要会话跟踪? - HTTP 无状态协议的问题 2. Cookie 技术 - Cookie 的工作原理 - Cookie 的创建和读取 - Cookie 的属性设置 3. Session 技术 - Session 的工作原理 - Session 的创建和使用 - Session 与 Cookie 的关系 4. 实际应用 - 用户登录状态保持 - 购物车实现 - 防重复提交 【生成要求】 1. 使用 Marp 的 Markdown 语法 2. 每个知识点包含: - 概念讲解(简洁清晰) - 代码示例(完整可运行的 Java 代码) - 图解说明(用文字描述或 Mermaid 图) 3. 添加课堂练习题(1-2个) 4. 总页数控制在 30-40 页 5. 使用专业的样式(可以自定义 CSS) 请生成完整的 Marp Markdown 文件。
👁️ Marp 实时预览
打开预览窗口
点击右上角的 "Open Preview" 图标,或按 Ctrl+Shift+V
分屏显示
左侧编辑 Markdown,右侧实时预览 PPT 效果
边改边看
修改代码后自动刷新预览,所见即所得
导出PDF
预览满意后,右键选择 "Export Slide Deck"
📊 示例:AI 自动添加图表
在这一页 PPT 中,我需要展示 "Servlet 请求处理流程"。 请用 Mermaid 图表语法生成一个清晰的流程图,展示: 1. 浏览器发送 HTTP 请求 2. Tomcat 接收请求 3. 查找对应的 Servlet 4. 调用 service() 方法 5. 根据请求方法调用 doGet() 或 doPost() 6. Servlet 处理业务逻辑 7. 生成 HTTP 响应 8. 返回给浏览器 请生成 Mermaid 代码,我会嵌入到 Marp PPT 中。
AI 生成的 Mermaid 图表会自动嵌入PPT:
```mermaid
flowchart TD
A[浏览器发送HTTP请求] --> B[Tomcat服务器]
B --> C{查找Servlet}
C --> D[调用service方法]
D --> E{判断请求方法}
E -->|GET| F[调用doGet]
E -->|POST| G[调用doPost]
F --> H[处理业务逻辑]
G --> H
H --> I[生成HTTP响应]
I --> J[返回给浏览器]
```自动化发布到 GitHub/Gitee
📦 项目结构
teaching-slides/ ├── java-web/ # Java Web 课程 │ ├── lecture-01-intro.md # 第1讲(Marp) │ ├── lecture-02-servlet.md # 第2讲(Marp) │ ├── lecture-03-session.md # 第3讲(Marp) │ └── pdf/ # 编译后的PDF │ ├── algorithm/ # 算法课程 │ ├── lecture-01-intro.tex # 第1讲(Beamer) │ ├── lecture-02-sort.tex # 第2讲(Beamer) │ └── pdf/ │ ├── .github/workflows/ # GitHub Actions │ └── build.yml # 自动编译和发布 │ ├── README.md └── .gitignore
🔄 使用 Cursor 的 Git 功能
初始化 Git 仓库
在 Cursor 终端中:git init
或使用 Cursor 的源代码管理面板(Ctrl+Shift+G)
编辑并预览PPT
在 Cursor 中编辑 .tex 或 .md 文件,实时预览效果
编译生成PDF
Beamer: 自动编译
Marp: marp lecture.md --pdf
提交到 Git
在源代码管理面板中,添加更改说明,点击"提交"
推送到远程仓库
点击"同步更改"按钮,自动推送到 GitHub/Gitee
自动发布(可选)
配置 GitHub Actions,自动编译和发布PDF到 Release
⚙️ GitHub Actions 自动编译配置
name: Build Slides on: push: branches: [ main ] jobs: build-marp: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Marp Build uses: docker://marpteam/marp-cli:latest with: args: java-web/*.md --pdf --allow-local-files -o pdf/ - name: Upload PDFs uses: actions/upload-artifact@v3 with: name: slides-pdf path: pdf/*.pdf - name: Create Release uses: softprops/action-gh-release@v1 if: startsWith(github.ref, 'refs/tags/') with: files: pdf/*.pdf
- 在 Cursor 中编辑完PPT,保存
- 使用 Cursor 的 Git 功能提交并推送
- GitHub Actions 自动编译所有 Markdown 为 PDF
- PDF 自动发布到 Releases,学生可以直接下载
- 全程无需手动操作!
🔗 推送到 Gitee(国内访问更快)
# 添加 Gitee 作为第二个远程仓库 git remote add gitee https://gitee.com/your-username/teaching-slides.git # 同时推送到 GitHub 和 Gitee git push origin main git push gitee main # 或者配置一次推送到多个仓库 git remote set-url --add --push origin https://gitee.com/your-username/teaching-slides.git git push # 一次推送到两个仓库
完整示例:在 Cursor 中使用 AI 重构PPT
场景:重构 "Session 与 Cookie" 这一讲
=== 旧PPT内容 === 第一页: 会话跟踪 - HTTP是无状态的 - 需要会话跟踪技术 第二页: Cookie - Cookie 是什么 - Cookie 的作用 第三页: Session - Session 是什么 - Session 的使用 (内容过于简单,缺少代码示例和实际应用)
=== 教学大纲 === 知识点: 1. HTTP 无状态协议的问题 2. Cookie 的工作原理和 API 3. Session 的工作原理和 API 4. Cookie 与 Session 的区别 5. 实际应用:用户登录、购物车 要求: - 每个知识点要有完整的代码示例 - 要有流程图说明 - 要有实际的应用案例(完整代码)
请将以下旧PPT内容重构为 Marp 格式的现代化教学PPT: 【旧PPT内容】 [粘贴上面的旧PPT内容] 【教学大纲要求】 [粘贴教学大纲] 【重构要求】 1. 按照教学大纲重新组织内容结构 2. 为每个知识点添加: - 清晰的概念解释(用通俗易懂的语言) - 完整的 Java 代码示例(可直接运行) - 流程图或架构图(使用 Mermaid 语法) - 注意事项或常见错误 3. 添加实际应用案例: - 用户登录状态保持(完整代码) - 购物车实现(核心代码) 4. 添加课堂互动: - 每个 section 后添加思考题 - 添加 1-2 个课堂练习 5. 使用 Marp 语法,风格现代、专业 6. 总页数控制在 35-40 页 请生成完整的 Marp Markdown 文件。
✨ AI 生成的重构结果(部分展示)
--- marp: true theme: default paginate: true header: 'Java Web 开发 - 第5讲' footer: '樊光瑞 | 太原科技大学' style: | section { background: linear-gradient(to bottom, #ffffff, #f0f9ff); } h1 { color: #1e40af; } h2 { color: #2563eb; } --- # Session 与 Cookie ## 会话跟踪技术详解 **授课教师:** 樊光瑞 **课时:** 2学时 **日期:** 2025年10月 --- ## 本节课内容 1. 🤔 为什么需要会话跟踪? 2. 🍪 Cookie 技术详解 3. 📦 Session 技术详解 4. 🔄 Cookie 与 Session 的关系 5. 💻 实战:用户登录系统 6. 🛒 实战:购物车实现 --- # 第一部分 ## 为什么需要会话跟踪? --- ## HTTP 协议的特点 **HTTP 是无状态协议** - 每次请求都是独立的 - 服务器不会记住之前的请求 - 浏览器每次请求都需要重新提供身份信息 **问题场景** - 用户登录后,访问其他页面时服务器不知道用户是谁 - 购物车:添加商品后刷新页面,商品消失 - 无法实现"记住我"功能 --- ## 会话跟踪技术对比 | 技术 | 存储位置 | 数据大小 | 安全性 | 生命周期 | |------|----------|----------|--------|----------| | Cookie | 客户端浏览器 | 4KB | 较低 | 可设置 | | Session | 服务器内存 | 无限制 | 较高 | 会话期间 | --- # 第二部分 ## Cookie 技术详解 --- ## Cookie 的工作原理 ```mermaid sequenceDiagram participant Browser as 浏览器 participant Server as 服务器 Browser->>Server: 首次访问(无Cookie) Server->>Browser: 响应 + Set-Cookie: user=zhangsan Note over Browser: 保存Cookie到本地 Browser->>Server: 再次访问(携带Cookie) Note over Server: 读取Cookie,识别用户 Server->>Browser: 个性化响应 ``` --- ## Cookie 的创建和读取 **创建 Cookie** ```java // 1. 创建 Cookie 对象 Cookie cookie = new Cookie("username", "zhangsan"); // 2. 设置 Cookie 属性 cookie.setMaxAge(7 * 24 * 60 * 60); // 有效期7天 cookie.setPath("/"); // 整个网站都可访问 // 3. 将 Cookie 发送到浏览器 response.addCookie(cookie); ``` --- ## 读取 Cookie ```java // 获取所有 Cookie Cookie[] cookies = request.getCookies(); if (cookies != null) { for (Cookie cookie : cookies) { if ("username".equals(cookie.getName())) { String username = cookie.getValue(); System.out.println("用户名:" + username); break; } } } ``` --- # 第三部分 ## Session 技术详解 --- ## Session 的创建和使用 ```java // 1. 获取 Session(如果不存在则创建) HttpSession session = request.getSession(); // 2. 向 Session 中存储数据 session.setAttribute("user", userObject); session.setAttribute("role", "student"); // 3. 从 Session 中读取数据 User user = (User) session.getAttribute("user"); // 4. 删除 Session 中的数据 session.removeAttribute("user"); // 5. 销毁整个 Session session.invalidate(); ``` --- # 第五部分 ## 实战案例:用户登录系统 --- ## 完整的登录 Servlet ```java @WebServlet("/login") public class LoginServlet extends HttpServlet { @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // 1. 获取表单参数 String username = req.getParameter("username"); String password = req.getParameter("password"); String remember = req.getParameter("remember"); // 2. 验证用户(从数据库查询) UserService service = new UserService(); User user = service.login(username, password); if (user != null) { // 3. 登录成功 - 创建 Session HttpSession session = req.getSession(); session.setAttribute("user", user); session.setMaxInactiveInterval(30 * 60); // 30分钟 // 4. 如果勾选"记住我" - 创建 Cookie if ("on".equals(remember)) { Cookie cookie = new Cookie("username", username); cookie.setMaxAge(7 * 24 * 60 * 60); // 7天 resp.addCookie(cookie); } // 5. 跳转到首页 resp.sendRedirect("index.jsp"); } else { // 登录失败 req.setAttribute("error", "用户名或密码错误"); req.getRequestDispatcher("login.jsp").forward(req, resp); } } } ``` --- ## 课堂练习 **练习1:实现"记住我"功能** 要求: 1. 用户勾选"记住我",下次访问自动填充用户名 2. 使用 Cookie 实现 3. 考虑安全性(不要存储密码) ⏱️ 时间:10分钟 --- ## 本节课总结 **核心知识点** - ✅ Cookie:客户端存储,小数据量 - ✅ Session:服务器存储,安全性高 - ✅ 两者结合使用实现会话跟踪 **实际应用** - 用户登录状态保持 - 购物车实现 - 用户偏好设置 **下节课预告** - Filter 和 Listener 的使用
- 从 3 页扩充到 20+ 页,内容更加详实
- 添加了 5 个完整代码示例
- 添加了 2 个 Mermaid 流程图
- 添加了课堂练习和思考题
- 结构清晰,逻辑连贯
参考示例与资源
📥 示例文件下载
Beamer 示例
Marp 示例
🔗 有用的资源链接
| 资源 | 说明 |
|---|---|
| Marp 官方文档 | https://marpit.marp.app/ |
| Beamer 用户手册 | https://ctan.org/pkg/beamer |
| Mermaid 图表语法 | https://mermaid.js.org/ |
| LaTeX 数学公式 | https://katex.org/ |
💡 最佳实践建议
保持源文件简洁
使用 Git 管理,避免一个 PPT 有多个版本文件
模块化组织
将常用的代码片段、图表保存为独立文件,方便复用
定期备份
推送到 GitHub/Gitee,既是备份又是版本控制
团队协作
多位教师可以通过 Git 分支协作,共同完善PPT