AI 辅助开发实战：基于 Python + Vue 的毕业设计高效构建指南-编程实验室

1. 传统毕设开发的“三座大山”

做毕设最怕三件事：需求天天改、接口对不上、部署跑不通。
去年我带学弟做“校园二手书交易平台”，三个人前后端分工，结果：

前端 mock 数据写死，后端字段一改，Vue 页面直接白屏；
Postman 调通，浏览器却 404，发现是 CORS 没配；
最后一周打包上线，Nginx 报 502，原因是路径少了/api前缀，连夜回滚。

总结下来，“协作低效 + 调试成本高 + 部署踩坑”是毕设延期三大元凶。
AI 辅助开发不是银弹，但能把重复劳动压到最低，让有限时间花在业务逻辑上。

2. 技术选型：为什么不是 Django + React？

先放对比表，再讲人话。

框架	学习曲线	异步性能	前后端分离	AI 友好度	毕设场景
Django	中	同步为主	需 DRF	★★★☆	后台重、自带后台
Flask	低	同步	自由	★★☆	微型原型
FastAPI	低	原生异步	天生分离	★★★★★	接口优先
React	中	—	组件化	★★★☆	生态庞大
Vue3	低	—	组合式 API	★★★★	上手快

人话版：

FastAPI 的async/await写起来像 Python，却跑出 Node 级 QPS，压测 1k 并发毕设答辩够用；
Vue3<script setup>语法糖，AI 补全准确率比 React Hooks 高 10 个百分点；
二者都用 TypeScript 友好，Copilot 生成接口契约直接粘进.d.ts，前端秒获智能提示。

3. AI 辅助开发实战：从 0 到登录页 2 小时

3.1 环境准备

VS Code 装Cursor（内置 GPT-4）或GitHub Copilot；

建目录grad-pro，backend/frontend平级，.cursorrules写提示词：

# 角色：全栈助手 # 技术栈：FastAPI + Vue3 + Axios # 输出：带类型注解、异常处理、单元测试

起两个终端，分别pnpm create vue@latest和pip fastapi[all]。

3.2 让 AI 生成 RESTful API

在backend/routers/auth.py里敲注释：

# POST /api/v1/login 接收 email+password，返回 JWT，密码用 bcrypt

Copilot 直接给出：

from fastapi import APIRouter, Depends, HTTPException from pydantic import BaseModel, EmailStr from passlib.context import CryptContext import jwt, datetime, os router = APIRouter(prefix="/api/v1") pwd_ctx = CryptContext(schemes=["bcrypt"], deprecated="auto") SECRET = os.getenv("JWT_SECRET", "dev-secret") class LoginForm(BaseModel): email: EmailStr password: str @router.post("/login") async def login(form: LoginForm): # TODO: 查库验证，这里 mock if form.email != "test@edu.cn" or not pwd_ctx.verify(form.password, pwd_ctx.hash("123456")): raise HTTPException(401, "账号或密码错误") token = jwt.encode( {"sub": form.email, "exp": datetime.datetime.utcnow() + datetime.timedelta(hours=2)}, SECRET, algorithm="HS256" ) return {"access_token": token, "token_type": "bearer"}

人工只改两行：

把 mock 换成 SQLAlchemy 查询；
JWT_SECRET扔进.env文件。

3.3 生成 Vue 组件与 Axios 调用

在前端src/views/Login.vue写注释：

<!-- 登录表单，使用<script setup>，调用 /api/v1/login，把 JWT 存 pinia -->

Cursor 给出：

<script setup lang="ts"> import { ref } from 'vue' import axios from 'axios' import { useRouter } from 'vue-router' import { useAuthStore } from '@/stores/auth' const email = ref('') const password = ref('') const auth = useAuthStore() const router = useRouter() async function handleSubmit() { try { const { data } = await axios.post('/api/v1/login', { email: email.value, password: password.value }) auth.setToken(data.access_token) router.push('/dashboard') } catch (e: any) { alert(e.response?.data?.detail || '网络错误') } } </script> <template> <form @submit.prevent="handleSubmit"> <input v-model="email" type="email" required placeholder="校园邮箱" /> <input v-model="password" type="password" required placeholder="密码" /> <button type="submit">登录</button> </form> </template>

AI 自动帮你：

把axios.defaults.baseURL指向 Vite 代理；
用Pinia持久化localStorage；
类型推导一步到位，毕设答辩现场改需求不心慌。

4. 完整可运行代码（用户登录模块）

目录结构：

grad-pro/ ├─ backend/ │ ├─ main.py │ ├─ routers/ │ │ └─ auth.py │ └─ models/ │ └─ user.py └─ frontend/ ├─ src/ │ ├─ views/Login.vue │ ├─ stores/auth.ts │ └─ api/axios.ts └─ vite.config.ts

4.1 backend/main.py

from fastapi import FastAPI from fastapi.middleware.cors import CORSMiddleware from routers import auth app = FastAPI(title="GradPro API", version="1.0.0") app.add_middleware( CORSMiddleware, allow_origins=["http://localhost:5173"], allow_credentials=True, allow_methods=["*"], allow_headers=["*"], ) app.include_router(auth.router)

4.2 frontend/src/api/axios.ts

import axios from 'axios' const instance = axios.create({ baseURL: '/api', // 被 Vite 代理 timeout: 10000, }) instance.interceptors.request.use((cfg) => { const t = localStorage.getItem('token') if (t) cfg.headers.Authorization = `Bearer ${t}` return cfg }) export default instance

4.3 Clean Code 要点

函数长度 ≤ 30 行，AI 生成后手动折叠大段逻辑到service/；
统一异常：后端自定义HTTPException→ 前端弹 Toast；
魔法数字收进.env，方便后期 Docker 注入。

5. 安全与本地性能调优

5.1 CORS & JWT

生产环境allow_origins必须白名单，不要用["*"]图省事；
JWT 过期时间 2 h + Refresh Token 机制，AI 生成后一定 review 密钥轮换；
使用PyJWT2.8+，禁alg=none，防止CVE-2022-39227。

5.2 热更新 & 代理

Vite 配置：

server: { proxy: { '/api': { target: 'http://localhost:8000', changeOrigin: true, rewrite: path => path.replace(/^\/api/, '/api/v1') } } }

FastAPI 启动加--reload，AI 会自动识别.py变化，但 Linux 需安装watchdog避免 100% CPU。

6. 生产环境避坑指南

API 版本控制
路径带/api/v1，AI 生成代码常忘改 import，上线前全局搜v1硬编码。
静态资源部署
pnpm build后dist/丢进nginx/html，try_files $uri /index.html;防刷新 404；
同时location /api/反向代理到uvicorn，别把后端 CORS 再开一遍。
AI 代码审查 Checklist
- 是否泄露SECRET、SQL 拼接；
- 是否捕获asyncio.CancelledError；
- 是否把console.log带到生产；
- 是否把TODO当完成。

经验：让 AI 先生成，再人工 diff，红色块 > 30% 就重写，宁可多 10 分钟，也别答辩现场翻车。

7. 动手试试：重构“图书发布”模块

读到这里，把登录模块复制一份，改成“发布图书”：

后端新增POST /api/v1/books，字段title|isbn|price|owner_id；
前端写BookForm.vue，用VeeValidate做校验；
让 AI 生成单元测试：FastAPI 用TestClient，Vue 用vitest；
统计耗时，记录 AI 生成 vs 人工调整比例。

做完你会直观感受到：AI 擅长样板，人类负责抽象。
把边界想清楚，AI 是 10× 杠杆，方向错了就是 10× 坑。

8. 写在最后

毕业设计不是论文写完就结束，把代码交上去那一刻，才是面试官提问的开始。
AI 辅助开发让我们少写 CRUD，多留时间打磨亮点：性能压测、Docker 镜像体积优化、CI 自动化。
下次遇到“能不能再加个实时聊天”的需求，先让 AI 生成 WebSocket 骨架，再人工补消息幂等，就能准时去拍毕业照了。

祝你也能 2 小时跑通登录，一周交付毕设，把省下来的时间拿去旅行——毕竟，学生时代只剩最后一个暑假了。