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

使用 LaTeX 的 Beamer 宏包制作学术风格的PPT

✅ 优势

  • 数学公式排版完美(适合算法、理论课)
  • 学术风格专业
  • 代码高亮美观
  • 输出PDF质量高

⚠️ 劣势

  • 学习曲线较陡
  • 编译速度较慢
  • 调试复杂

🎯 适用课程

数据结构、算法设计、编译原理等理论性强的课程

📘 Markdown (Marp)

方式二:Markdown + Marp

使用 Markdown 语法 + Marp 插件制作现代风格的PPT

✅ 优势

  • 语法简单,易于上手
  • 实时预览,所见即所得
  • 编译速度快
  • 样式现代、灵活

⚠️ 劣势

  • 数学公式不如 Beamer 完美
  • 自定义样式需要CSS知识

🎯 适用课程

Java Web、数据库、软件工程等实践性强的课程

🎓
推荐策略:根据课程特点选择合适的工具。对于数学公式多的理论课,选择 Beamer;对于代码示例多的实践课,选择 Marp。两种方式都可以在 Cursor 中完成,都支持 AI 辅助和实时预览。

🔄 PPT 重构的完整工作流程

以下展示如何使用 Cursor AI 将一份旧的 PowerPoint PPT(或现有的教学内容)重构为高质量的 Beamer/Marp PPT。

1

准备原始材料

收集旧PPT的内容(可以是 .pptx 导出的文本)、教学大纲、课程要点等材料。

PPT 文本提取
2

在 Cursor 中新建文件

创建 .tex(Beamer)或 .md(Marp)文件,选择合适的模板。

Cursor
3

AI 分析与重构

使用 Cursor AI(Ctrl+K)分析原始内容,按照教学大纲重新组织结构。

Cursor AI
4

AI 生成示例代码

让 AI 为每个知识点生成合适的代码示例、图表、动画。

GPT-4
5

实时预览调整

使用 Cursor 的预览功能实时查看效果,边写边调整。

PDF 预览
6

编译生成PDF

在 Cursor 终端中编译生成最终的 PDF 文件。

XeLaTeX / Marp CLI
7

版本控制

提交到 Git 仓库,记录每次修改,方便回溯和协作。

Git
8

自动发布

推送到 GitHub/Gitee,自动发布到课程网站或分享给学生。

GitHub Actions

📕 方式一:LaTeX Beamer 制作流程

🔧 在 Cursor 中配置 Beamer 环境

📦
前置准备:
  • 安装 TeX Live 或 MiKTeX(LaTeX 发行版)
  • 在 Cursor 中安装 LaTeX Workshop 扩展
  • 配置 PDF 预览功能

📝 Beamer 基础模板

lecture_template.tex - Beamer 模板 LaTeX
\\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

Cursor 提示词:重构旧PPT Cursor Prompt
请帮我将以下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 中实时预览

1

安装 LaTeX Workshop

在 Cursor 扩展商店搜索 "LaTeX Workshop",点击安装

2

配置编译命令

在 settings.json 中配置使用 XeLaTeX 编译(支持中文)

3

Ctrl+S 保存即编译

保存文件后自动编译,几秒钟后在侧边栏看到 PDF 预览

4

实时调整

修改代码,保存后立即看到效果,快速迭代

⏱️
时间对比:
  • 传统 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 基础模板

lecture.md - Marp 模板 Markdown (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

Cursor 提示词:生成 Marp PPT Cursor Prompt
请根据以下教学大纲,生成一份完整的 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 实时预览

1️⃣

打开预览窗口

点击右上角的 "Open Preview" 图标,或按 Ctrl+Shift+V

2️⃣

分屏显示

左侧编辑 Markdown,右侧实时预览 PPT 效果

3️⃣

边改边看

修改代码后自动刷新预览,所见即所得

4️⃣

导出PDF

预览满意后,右键选择 "Export Slide Deck"

📊 示例:AI 自动添加图表

Cursor 提示词:添加流程图 Cursor Prompt
在这一页 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

📦 项目结构

推荐的项目目录结构 File Structure
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 功能

1

初始化 Git 仓库

在 Cursor 终端中:git init
或使用 Cursor 的源代码管理面板(Ctrl+Shift+G)

2

编辑并预览PPT

在 Cursor 中编辑 .tex 或 .md 文件,实时预览效果

3

编译生成PDF

Beamer: 自动编译
Marp: marp lecture.md --pdf

4

提交到 Git

在源代码管理面板中,添加更改说明,点击"提交"

5

推送到远程仓库

点击"同步更改"按钮,自动推送到 GitHub/Gitee

6

自动发布(可选)

配置 GitHub Actions,自动编译和发布PDF到 Release

⚙️ GitHub Actions 自动编译配置

.github/workflows/build.yml YAML
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(国内访问更快)

在 Cursor 终端中配置 Gitee 远程仓库 Bash
# 添加 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" 这一讲

Step 1: 准备原始内容(粘贴到 Cursor) Text
=== 旧PPT内容 ===

第一页: 会话跟踪
- HTTP是无状态的
- 需要会话跟踪技术

第二页: Cookie
- Cookie 是什么
- Cookie 的作用

第三页: Session
- Session 是什么
- Session 的使用

(内容过于简单,缺少代码示例和实际应用)
Step 2: 准备教学大纲要求 Text
=== 教学大纲 ===

知识点:
1. HTTP 无状态协议的问题
2. Cookie 的工作原理和 API
3. Session 的工作原理和 API
4. Cookie 与 Session 的区别
5. 实际应用:用户登录、购物车

要求:
- 每个知识点要有完整的代码示例
- 要有流程图说明
- 要有实际的应用案例(完整代码)
Step 3: Cursor AI 重构提示词 Cursor Prompt (Ctrl+K)
请将以下旧PPT内容重构为 Marp 格式的现代化教学PPT:

【旧PPT内容】
[粘贴上面的旧PPT内容]

【教学大纲要求】
[粘贴教学大纲]

【重构要求】
1. 按照教学大纲重新组织内容结构
2. 为每个知识点添加:
   - 清晰的概念解释(用通俗易懂的语言)
   - 完整的 Java 代码示例(可直接运行)
   - 流程图或架构图(使用 Mermaid 语法)
   - 注意事项或常见错误

3. 添加实际应用案例:
   - 用户登录状态保持(完整代码)
   - 购物车实现(核心代码)

4. 添加课堂互动:
   - 每个 section 后添加思考题
   - 添加 1-2 个课堂练习

5. 使用 Marp 语法,风格现代、专业

6. 总页数控制在 35-40 页

请生成完整的 Marp Markdown 文件。

✨ AI 生成的重构结果(部分展示)

session-cookie.md - AI 重构后的 Marp PPT(节选) Markdown (Marp)
---
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 流程图
  • 添加了课堂练习和思考题
  • 结构清晰,逻辑连贯

📚 参考示例与资源

📥 示例文件下载

🔗 有用的资源链接

资源说明
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