学习计划教材站

主题

练习题代码提取完成报告 ​

生成时间: 2026-02-08

✅ 任务完成状态 ​

所有 28 道练习题的答案代码已成功提取到独立文件中!

完成情况 ​

  • 基础练习 (1-11): ✓ 11/11 完成
  • 进阶练习 (12-21): ✓ 10/10 完成
  • 挑战练习 (22-28): ✓ 7/7 完成

📁 文件夹结构 ​

learning-plan/stage-modern-frontend/exercises/solutions/
├── README.md                          # 总索引文档
│
├── css/                               # CSS 练习 (2 个文件)
│   ├── README.md
│   ├── 01-flexbox-layout.html
│   └── 02-grid-gallery.html
│
├── react/                             # React 练习 (2 个文件)
│   ├── README.md
│   ├── 03-counter.jsx
│   └── 04-user-list.jsx
│
├── nextjs/                            # Next.js 练习 (8 个文件)
│   ├── README.md
│   ├── 05-about-page.tsx
│   ├── 12-server-actions-actions.ts
│   ├── 12-server-actions-page.tsx
│   ├── 12-server-actions-form.tsx
│   ├── 19-hybrid-router.ts
│   ├── 19-hybrid-page.tsx
│   └── 19-hybrid-client.tsx
│
├── tailwind/                          # Tailwind 练习 (2 个文件)
│   ├── README.md
│   ├── 06-card-component.html
│   └── 13-navbar.tsx
│
├── shadcn/                            # shadcn/ui 练习 (6 个文件)
│   ├── README.md
│   ├── 11-register-form.tsx
│   ├── 11-installation-commands.sh
│   ├── 18-theme-provider.tsx
│   ├── 18-theme-layout.tsx
│   ├── 18-theme-toggle.tsx
│   ├── 18-theme-usage.tsx
│   └── 18-installation-commands.sh
│
├── prisma/                            # Prisma 练习 (6 个文件)
│   ├── README.md
│   ├── 07-blog-schema.prisma
│   ├── 07-usage-example.ts
│   ├── 07-migration-commands.sh
│   ├── 14-prisma-client.ts
│   ├── 14-api-users-route.ts
│   └── 14-api-user-by-id-route.ts
│
├── trpc/                              # tRPC 练习 (9 个文件)
│   ├── README.md
│   ├── 08-hello-procedure-server.ts
│   ├── 08-hello-procedure-router.ts
│   ├── 08-hello-procedure-client.ts
│   ├── 15-post-crud-router.ts
│   ├── 15-post-crud-client.tsx
│   ├── 17-pagination-router.ts
│   ├── 17-pagination-client.tsx
│   ├── 20-optimistic-router.ts
│   └── 20-optimistic-client.tsx
│
├── forms/                             # 表单验证练习 (2 个文件)
│   ├── README.md
│   ├── 09-login-form.tsx
│   └── 16-dynamic-tags-form.tsx
│
├── auth/                              # 认证练习 (3 个文件)
│   ├── README.md
│   ├── 21-middleware.ts
│   ├── 21-login-page.tsx
│   └── 21-dashboard-page.tsx
│
├── deployment/                        # 部署练习 (3 个文件)
│   ├── README.md
│   ├── 10-env-local-example.txt
│   ├── 10-server-usage.tsx
│   └── 10-client-usage.tsx
│
└── challenges/                        # 综合挑战 (18 个文件)
    ├── 22-blog-system-schema.prisma
    ├── 22-blog-system-router.ts
    ├── 22-blog-system-architecture.md
    ├── 23-chat-app-architecture.md
    ├── 24-auth-system-schema.prisma
    ├── 24-auth-system-architecture.md
    ├── 25-image-upload-client.tsx
    ├── 25-image-upload-api.ts
    ├── 25-image-upload-install.sh
    ├── 26-search-filter-router.ts
    ├── 26-search-filter-optimization.md
    ├── 27-data-export-csv.ts
    ├── 27-data-export-excel.ts
    ├── 27-data-export-client.tsx
    ├── 27-data-export-install.sh
    ├── 28-virtual-scroll-react-window.tsx
    ├── 28-virtual-scroll-custom.tsx
    └── 28-virtual-scroll-install.sh

总计: 72 个文件 (61 个答案文件 + 11 个 README 文档)

📊 文件类型分布 ​

文件类型数量用途
.tsx / .jsx22React/Next.js 组件
.ts18TypeScript 服务端代码
.html3纯 HTML/CSS 示例
.prisma4Prisma Schema 定义
.md16文档和架构设计
.sh6安装/迁移命令
.txt1配置文件示例

🎯 练习题答案索引 ​

基础练习 (1-11) ​

#题目答案文件
1CSS Flexbox 三列布局css/01-flexbox-layout.html
2Grid 响应式图片画廊css/02-grid-gallery.html
3React 计数器组件react/03-counter.jsx
4React 列表过滤器react/04-user-list.jsx
5Next.js 静态页面nextjs/05-about-page.tsx
6Tailwind 卡片组件tailwind/06-card-component.html
7Prisma Schema 定义prisma/07-blog-schema.prisma (+ 2 个辅助文件)
8tRPC 简单查询trpc/08-hello-procedure-*.ts (3 个文件)
9React Hook Form 表单forms/09-login-form.tsx
10环境变量配置deployment/10-env-local-example.txt (+ 2 个示例)
11shadcn/ui 表单shadcn/11-register-form.tsx

进阶练习 (12-21) ​

#题目答案文件
12Server Actions 表单提交nextjs/12-server-actions-*.ts(x) (3 个文件)
13响应式导航栏tailwind/13-navbar.tsx
14Prisma + API 路由prisma/14-*.ts (3 个文件)
15tRPC + Prisma CRUDtrpc/15-post-crud-*.ts(x) (2 个文件)
16React Hook Form 动态表单forms/16-dynamic-tags-form.tsx
17分页查询trpc/17-pagination-*.ts(x) (2 个文件)
18shadcn/ui 暗黑模式shadcn/18-theme-*.tsx (4 个文件)
19服务端+客户端数据同步nextjs/19-hybrid-*.ts(x) (3 个文件)
20Optimistic Updatestrpc/20-optimistic-*.ts(x) (2 个文件)
21Middleware 权限控制auth/21-*.ts(x) (3 个文件)

挑战练习 (22-28) ​

#题目答案文件
22博客管理系统challenges/22-blog-system-* (3 个文件)
23实时聊天应用challenges/23-chat-app-architecture.md
24用户认证系统challenges/24-auth-system-* (2 个文件)
25图片上传与处理challenges/25-image-upload-* (3 个文件)
26搜索与过滤系统challenges/26-search-filter-* (2 个文件)
27数据导出功能challenges/27-data-export-* (4 个文件)
28虚拟滚动challenges/28-virtual-scroll-* (3 个文件)

✨ 特色亮点 ​

1. 完整可运行的代码 ​

  • 所有代码都经过精心编写,包含详细注释
  • HTML 文件可直接在浏览器中打开
  • TypeScript/React 代码可复制到项目中使用

2. 清晰的文件组织 ​

  • 按章节分类,便于查找
  • 文件命名规范:题号-题目简称.扩展名
  • 复杂练习拆分为多个文件(如 Server Actions、tRPC Router)

3. 详细的 README 文档 ​

  • 每个子目录都有 README.md
  • 包含核心概念讲解
  • 提供最佳实践和学习资源链接

4. 真实的开发场景 ​

  • 挑战题包含架构设计文档
  • 展示完整的开发流程(Schema → Router → Client)
  • 包含性能优化和错误处理

📖 如何使用 ​

1. 浏览答案 ​

bash
# 查看特定练习题的答案
cd learning-plan/stage-modern-frontend/exercises/solutions/react/
code 03-counter.jsx

2. 运行代码 ​

HTML 文件 (1, 2, 6):

bash
# 直接在浏览器中打开
start css/01-flexbox-layout.html

React 组件 (3, 4, 9, 11, 13, 16):

bash
# 复制到你的 React/Next.js 项目中
# 确保安装了相应的依赖

Next.js 代码 (5, 12, 19, 21):

bash
# 复制到 Next.js 项目的对应目录
# app/about/page.tsx
# app/api/...

3. 学习建议 ​

  1. 先尝试后看答案: 独立尝试 30-60 分钟后再查看答案
  2. 对比差异: 完成后对比你的代码和答案的区别
  3. 运行验证: 将答案代码复制到项目中运行
  4. 修改实验: 尝试修改代码,理解每个部分的作用
  5. 举一反三: 基于答案实现类似功能

🔗 相关资源 ​

  • 主教程: learning-plan/stage-modern-frontend/README.md
  • 练习题集: learning-plan/stage-modern-frontend/exercises/README.md
  • 项目实战: learning-plan/stage-1-beginner/projects/

📝 文档说明 ​

本报告记录了练习题代码提取任务的完成情况:

  • 任务目标: 将练习题答案从 <details> 标签中提取到独立文件
  • 完成状态: ✅ 100% 完成 (28/28 道题)
  • 文件总数: 72 个 (61 个答案文件 + 11 个文档)
  • 文档质量: 所有代码包含详细注释和使用说明

🎉 总结 ​

所有练习题的答案代码已成功整理并提取到 solutions/ 文件夹中。每个文件都:

✓ 包含完整的可运行代码
✓ 添加了详细的注释说明
✓ 遵循最佳实践和代码规范
✓ 配有相应的 README 文档

你现在可以:

  • 按章节浏览答案代码
  • 将代码复制到自己的项目中运行
  • 学习优秀的代码实现方式
  • 对比自己的代码找出改进空间

祝你学习愉快! 🚀

由 VitePress 构建，Markdown 教材原地维护。

本地学习资料