从 Vue 到万物：AI 加速下的前端开发者全栈进化论【第五课】

Day 5 | 真实项目实战：用 AI 从 0 到 1 搭一个事故分析系统

这一天不一样------这是真正的全栈

前四天学的所有东西，今天要串联起来。我们用事故分析系统的真实架构，完整走一遍开发流程。

这不是玩具项目。这是一个正经三端协作系统：

markdown 复制代码

┌─────────────────────────────────────────────────────────┐
│                   事故一张图大屏                         │
│   (Vue3 + ECharts + 高德地图 JS API v2.0)                │
│   地图热力图 / 事故标注 / 左侧列表瀑布流                   │
└─────────────────────────────────────────────────────────┘
                           ↕ HTTP / WebSocket
┌─────────────────────────────────────────────────────────┐
│              Spring Boot 后端（8080端口）                │
│   AccidentController / CauseController / UserController  │
│   MyBatis-Plus / JWT 鉴权 / MinIO 文件上传              │
│   Nacos 配置中心（accident 命名空间）                     │
└─────────────────────────────────────────────────────────┘
                           ↕ SQL
┌─────────────────────────────────────────────────────────┐
│              MySQL（accident_db）+ MinIO                │
│   t_accident / t_cause / t_user / t_accident_image      │
└─────────────────────────────────────────────────────────┘

第一阶段：需求拆解（用 AI 做系统设计）

Prompt 模板（直接拿去用）：

markdown 复制代码

我要做一个"事故分析系统"：
- 用户角色：普通用户（查看/管理事故）+ 管理员（系统配置）
- 核心功能：事故一张图（地图热力图）、事故管理（CRUD）、成因库管理、统计分析
- 技术栈：Vue3 前端 / Spring Boot 后端 / MySQL / MinIO
- 请帮我：
  1. 拆解成前后端接口（RESTful，含请求参数和响应结构）
  2. 设计数据库表结构（ER图描述即可）
  3. 给出每个接口的优先级排序（先做哪个）

AI 给出的接口列表大概是这样：

接口	方法	优先级	说明
POST /api/login	POST	P0	登录，一切的入口
GET /api/accidents	GET	P0	事故列表（地图数据源）
POST /api/accidents	POST	P0	创建事故（带地图选点）
GET /api/accidents/{id}	GET	P1	事故详情
GET /api/causes	GET	P1	成因库（固定分类）
GET /api/stats/severity	GET	P2	严重度统计
POST /api/upload	POST	P2	媒体上传

第二阶段：数据库搭建

建表脚本（AI 辅助生成后微调）

sql 复制代码

-- 事故主表
CREATE TABLE t_accident (
    id          BIGINT PRIMARY KEY AUTO_INCREMENT,
    title       VARCHAR(255)  NOT NULL COMMENT '事故标题',
    severity    VARCHAR(20)   NOT NULL COMMENT '严重/一般/轻微',
    longitude   DECIMAL(10, 6) COMMENT '经度',
    latitude    DECIMAL(10, 6) COMMENT '纬度',
    location    VARCHAR(500)   COMMENT '地点描述',
    description TEXT           COMMENT '事故描述',
    occur_time  DATETIME       COMMENT '发生时间',
    image_urls  JSON            COMMENT '图片URL数组',
    video_urls  JSON            COMMENT '视频URL数组',
    create_by   VARCHAR(64)    COMMENT '创建人',
    create_time DATETIME       DEFAULT CURRENT_TIMESTAMP,
    update_time DATETIME       DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    INDEX idx_location (longitude, latitude),
    INDEX idx_occur_time (occur_time),
    INDEX idx_severity (severity)
);

-- 成因库表
CREATE TABLE t_cause (
    id       BIGINT PRIMARY KEY AUTO_INCREMENT,
    category VARCHAR(50)  NOT NULL COMMENT '分类：机动车/非机动车/行人',
    code     VARCHAR(10)  NOT NULL COMMENT '编号：M01, N01, P01',
    name     VARCHAR(255) NOT NULL COMMENT '成因名称',
    sort     INT DEFAULT 0 COMMENT '排序'
);

-- 用户表
CREATE TABLE t_user (
    id       BIGINT PRIMARY KEY AUTO_INCREMENT,
    username VARCHAR(64)  UNIQUE NOT NULL,
    password VARCHAR(255) NOT NULL,
    real_name VARCHAR(100) COMMENT '真实姓名',
    role     VARCHAR(20)  NOT NULL DEFAULT 'OPERATOR' COMMENT 'ADMIN/OPERATOR',
    status   TINYINT DEFAULT 1 COMMENT '1启用 0禁用',
    create_time DATETIME DEFAULT CURRENT_TIMESTAMP
);

关键经验： JSON 字段 image_urls 直接存 MinIO URL 数组，前端直接解析 JSON 渲染，无独立 t_accident_image 关联表。减少 JOIN，简化查询路径。

第三阶段：后端快速搭建（AI 加速）

用 AI 生成 Controller 的标准流程：

markdown 复制代码

Prompt："我需要写一个 AccidentController，包含以下接口：
1. GET /api/accidents - 分页查询，支持 severity/keyword/时间范围过滤
2. GET /api/accidents/{id} - 详情（包含成因）
3. POST /api/accidents - 新增（含 image_urls JSON 字段处理）
4. PUT /api/accidents/{id} - 更新
5. DELETE /api/accidents/{id} - 删除
使用 MyBatis-Plus，Result 统一响应，@Valid 参数校验。"

生成后手动检查：

返回结构是否统一 Result.success(...)
异常处理是否有全局 @ControllerAdvice
分页参数是否防注入（用 Pagehelper 或手动 limit）
删除是否为逻辑删除（deleted 字段）

第四阶段：前端对接（迭代式联调）

联调是全栈最考验耐心的地方。用迭代式联调而非"一口气写完再联调"：

第一轮：先让列表页面跑通

ini 复制代码

后端：GET /api/accidents?page=1&size=10 → 返回 { list: [...], total: 100 }
前端：列表页渲染 → 验证数据格式正确

第二轮：接入地图

bash 复制代码

后端：GET /api/accidents → 返回 { list: [{id, longitude, latitude, severity}] }
前端：高德地图标注点 → 验证坐标解析

第三轮：接入详情和编辑

bash 复制代码

后端：GET /api/accidents/{id} → 返回完整事故对象
前端：详情弹窗 → 地图回显位置 → 图片列表

经验之谈： 大多数"页面无法访问"的问题，根源是 dev server 进程被回收。先 curl http://localhost:5173 验证前端活着，curl http://localhost:8080/api/accidents 验证后端活着，再开始排查代码。

第五阶段：AI 辅助调试（真正的效率倍增器）

全栈调试最难的是定位问题在哪一层：

markdown 复制代码

前端 axios 报错？
  ↓
Network 面板看响应 → 200但业务码401？ → 后端登录拦截器问题
                              500？    → 后端 Controller 异常
                              超时？   → 数据库慢查询
  ↓
浏览器控制台无报错，但页面数据不对？
  → 前端数据处理逻辑
  → Vue DevTools 追踪响应数据

让 AI 帮你定位：

arduino 复制代码

Prompt："我的事故列表接口 GET /api/accidents 返回很慢（>3秒），
SQL 如下：[粘贴SQL]
表有 10000+ 条记录，请分析原因并给出优化方案。"

css 复制代码

Prompt："前端调用 POST /api/accidents 返回 400 Bad Request，
请求体：[粘贴JSON]
后端报错：[粘贴异常栈]
请帮我分析是参数绑定问题还是校验问题。"

五天学习路径复盘

Day	主题	核心交付
Day 1	思维切换 + 环境	能启动后端，理解全栈系统视角
Day 2	Java + Spring Boot	能读懂 Controller → Service → Mapper 链路
Day 3	MySQL + 数据库设计	能写建表语句，用 MyBatis-Plus 查数据
Day 4	API 设计 + 全栈串联	登录、代理、Token 上传，全链路跑通
Day 5	真实项目实战	从需求到数据库到前后端全链路交付

下一步：从"能干活"到"干得好"

sql 复制代码

已掌握：CRUD + 数据库 + API + 基本联调
继续学习：
  ├─ 性能优化：数据库索引 / 缓存（Redis）/ 分页防全表扫描
  ├─ 安全：SQL注入 / XSS / CSRF / JWT续期
  ├─ 消息队列：异步处理大量数据（如定时生成统计报表）
  ├─ WebSocket：实时推送（事故地图实时更新）
  └─ 部署：Docker / Nginx / 云服务器

最后一句话

全栈不是学完所有技术栈才叫全栈。能从前端一个功能点打通到数据库，你就已经是全栈了。 AI 不是你的拐杖，是你的加速器。学会提问，学会验证，学会在真实项目里迭代------这是 AI 时代全栈开发者的核心竞争力。

本系列基于真实项目"事故分析系统"开发经验整理，三端协作：Vue3 前端（5173） + Spring Boot 后端（8080） + uni-app 移动端。