实战项目 1

Ticket 管理系统

基于标签的任务追踪工具

难度:
8 小时
所属周次:第 1 周

项目预览

Ticket 管理系统 预览

项目目标

1

快速掌握 AI 工具的核心功能

2

将 AI 工具应用于实用的原型构建

3

体验 AI 辅助编码的效率

4

理解前后端分离的全栈架构

技术栈

React
TypeScript
Vite
Tailwind CSS
Shadcn UI
Zustand
FastAPI
PostgreSQL
SQLAlchemy
Alembic

技术架构

实现步骤

设计 tickets、tags、ticket_tags 三张表,使用 Alembic 创建迁移脚本

-- tickets 表
CREATE TABLE tickets (
    id BIGSERIAL PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    description TEXT,
    status VARCHAR(20) NOT NULL DEFAULT 'pending',
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    completed_at TIMESTAMP WITH TIME ZONE
);

-- tags 表
CREATE TABLE tags (
    id BIGSERIAL PRIMARY KEY,
    name VARCHAR(50) UNIQUE NOT NULL,
    color VARCHAR(7) NOT NULL,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

-- ticket_tags 关联表
CREATE TABLE ticket_tags (
    ticket_id BIGINT REFERENCES tickets(id) ON DELETE CASCADE,
    tag_id BIGINT REFERENCES tags(id) ON DELETE CASCADE,
    PRIMARY KEY (ticket_id, tag_id)
);

功能截图

创建 Ticket

创建 Ticket 对话框

标签管理

标签管理界面

标签过滤

标签过滤功能

编辑 Ticket

编辑 Ticket 界面

移动端响应式

移动端响应式布局

学习要点

✓

如何设计清晰的 RESTful API

✓

FastAPI 的自动文档生成和类型验证

✓

PostgreSQL 的多对多关系设计

✓

Shadcn UI 组件的定制和使用

✓

Zustand 轻量级状态管理

✓

响应式布局的最佳实践

✓

前后端协作的开发流程

✓

使用 Alembic 管理数据库版本

准备好开始这个项目了吗?

在第 1 周的课程中,跟随教程一步步完成这个项目