# webtutorial

**Repository Path**: aistudy101/webtutorial

## Basic Information

- **Project Name**: webtutorial
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-02
- **Last Updated**: 2026-03-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Web 全栈开发实战

> 面向 CS/AI 专业大三及以上学生，从零基础到能独立开发并部署全栈 Web 应用的 18 节实战课程。

---

## 课程简介

本课程专为有 Python/算法基础但没有 Web 开发经验的同学设计。课程以**项目为核心**，每节课围绕一个可运行的小项目展开，讲义只讲项目必用的知识点，让你在动手中理解每一个概念。

**你将学到：**

- 用 HTML/CSS/JS 构建任意网页布局（Flexbox + Grid + 响应式）
- 用 React 构建交互式单页应用（组件化、状态管理、路由）
- 用 FastAPI + SQLAlchemy 设计生产级 RESTful API
- 前后端完整联调，交付可用的全栈应用
- 对比 SQL（SQLite）与 NoSQL（MongoDB）的设计哲学
- 用 Docker 容器化并部署应用到云平台

---

## 目标受众

- 计算机 / AI 相关专业，大三及以上
- 有数据结构与算法基础，熟悉 Python
- 对 Web 开发感兴趣，想从零建立完整的全栈知识体系

---

## 技术栈

| 层次 | 技术 |
|------|------|
| 前端基础 | HTML5 / CSS3 / JavaScript (ES6+) |
| 前端框架 | React 18 + React Router + Vite |
| 后端框架 | FastAPI (Python) |
| 数据库 | SQLite / SQLAlchemy ORM / MongoDB |
| 工程化 | Git / Docker / docker-compose / Nginx |
| 部署 | Vercel (前端) / Railway (后端) |

---

## 课程目录

| # | 标题 | 项目 |
|---|------|------|
| 1 | Web 世界导览 + 开发环境配置 | 配置开发环境，用 DevTools 抓包分析真实网站 |
| 2 | HTML —— 网页的骨架 | 用语义化 HTML 构建个人简历页 |
| 3 | CSS —— 布局与样式 | 用 Grid + Flexbox 美化简历页，适配手机端 |
| 4 | JavaScript 基础 | 成绩统计器（console 版，纯逻辑练习） |
| 5 | DOM 操作与事件 | Todo List（原生 JS 实现完整交互） |
| 6 | 异步编程与网络请求 | GitHub 用户信息卡片（Fetch API + Promise）|
| 7 | React 入门 —— 组件化 | 技术文章聚合首页（Vite + 组件树 + Props）|
| 8 | React 状态管理 | 为文章聚合应用加标签过滤、收藏、搜索 |
| 9 | useEffect 与数据获取 | 接入 Dev.to API，封装 `useFetch` 自定义 Hook |
| 10 | React Router —— 多页面 SPA | 文章详情页 + 全局收藏 Context |
| 11 | FastAPI 入门 | 笔记管理 API（内存版 CRUD + Swagger UI）|
| 12 | 数据库 —— 让数据持久化 | SQLAlchemy ORM 接入 SQLite，设计多对多标签表 |
| 13 | 用户认证 —— 登录与权限 | bcrypt 密码哈希 + JWT Token 认证 |
| 14 | API 进阶 —— 生产级接口 | 统一响应格式、分页查询、自定义异常处理 |
| 15 | 前后端联调 —— 打通全栈 | axios 封装 + AuthContext + ProtectedRoute |
| 16 | 全栈应用完善 | 表单验证 + Toast 通知 + 骨架屏 + 内联编辑 |
| 17 | NoSQL 与 MongoDB | 用 Motor 实现笔记 API，对比 SQL 与文档模型 |
| 18 | Docker 与部署 | Dockerfile + docker-compose + 云平台上线 |

---

## 贯穿项目

课程围绕两条主线项目持续迭代，让你体验真实的功能演进过程：

**1. 技术文章聚合 App（第 7–10 节）**
- 第 7 节：搭建组件树，静态数据
- 第 8 节：添加标签过滤、收藏、搜索
- 第 9 节：接入真实 API，骨架屏加载
- 第 10 节：多页面路由，全局状态共享

**2. 笔记管理系统（第 11–18 节）**
- 第 11 节：内存版 CRUD API
- 第 12 节：SQLite 持久化 + 标签多对多关系
- 第 13 节：用户系统 + JWT 认证
- 第 14 节：分页、搜索、统一响应格式
- 第 15–16 节：前后端全栈联调 + 体验打磨
- 第 17 节：MongoDB 对比实现
- 第 18 节：Docker 容器化 + 云部署

---

## 目录结构

```
webtutorial/
├── README.md
├── introduction.md          # 课程信息与学生背景
├── knowledge-points.md      # 知识点清单
├── syllabus.md              # 课程大纲
└── lesson{1-18}/
    ├── lecture.md           # 讲义（精炼，只讲项目必用的概念）
    ├── project.md           # 项目要求（含脚手架代码和验收标准）
    ├── src/                 # 项目起始脚手架代码
    └── answer/              # 完整参考实现（建议先自己做再看）
```

---

## 环境配置

### 通用工具

```bash
# Node.js（建议 v20+）
node --version

# Python（建议 3.11+）
python3 --version

# Git
git --version
```

### 前端项目（第 7 节起）

```bash
cd lesson7/src
npm install
npm run dev
```

### 后端项目（第 11 节起）

```bash
cd lesson11/src
python3 -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate
pip install -r requirements.txt
uvicorn main:app --reload
# 访问 http://localhost:8000/docs
```

### Docker（第 18 节）

```bash
# 安装 Docker Desktop: https://www.docker.com/products/docker-desktop/
docker --version
docker compose version
```

---

## 学习建议

1. **先自己做，再看答案**：每个项目在 `answer/` 中有完整参考实现，但建议先自己完成 Task 1–2 再对照，而不是直接复制粘贴

2. **跟着项目走，不要跳过**：每节课的项目都是下一节的基础，特别是笔记 API 系列（第 11–16 节）是持续迭代的

3. **用好 Swagger UI**：后端课程中，先用 `http://localhost:8000/docs` 测试 API 逻辑正确，再对接前端

4. **遇到问题先查报错**：浏览器 Console、终端报错信息是你最好的老师，养成看完整报错信息的习惯

5. **做完挑战任务**：每节课末尾有选做挑战，完成它们才算真正理解了这节课

---

## 课程阶段

| 阶段 | 节次 | 里程碑 |
|------|------|--------|
| 0. 导览 | 第 1 节 | 开发环境就绪，理解前后端全局架构 |
| 1. 前端基础 | 第 2–6 节 | 能独立写页面并调用 API |
| 2. 前端框架 | 第 7–10 节 | 能构建完整多页面 SPA |
| 3. 后端开发 | 第 11–14 节 | 能独立搭建生产级 RESTful API |
| 4. 全栈集成 | 第 15–16 节 | 能交付可用的全栈应用 |
| 5. 进阶拓展 | 第 17–18 节 | 能选型数据库、容器化并上线应用 |