Files
daily_publish/blog-vibe-coding.md
T
panda afcd18c54f fix: evaluation report P0/P1/P2 fixes, remove Docker, add upload UI
Backend:
- Add NotFoundException + BusinessException, return correct HTTP status (404/400)
- Add @Index on reports.project_id and reports.upload_time
- Add fileSize column to reports, populate on upload, return in DTO
- Cascade delete: deleting project now removes all reports (DB + files + PDFs)
- Delete report: also clean up pre-rendered PDF
- File upload MIME validation (extension + Content-Type)
- Remove duplicate @ExceptionHandler from ReportController
- Switch from System.err to SLF4J logger
- Handle MethodArgumentNotValid, MissingServletRequestPart, etc.

Frontend:
- Remove all Docker files (project uses 宝塔 panel deployment)
- Upgrade axios 1.6.8 -> 1.7.7 (CVE-2024-39338)
- Remove unused @vue-office/pptx + vue-demi (see CHANGELOG for rationale)
- Fix vite proxy port 37821 -> 30081
- Remove mock data fallback in production
- Add upload report UI (button + modal in ProjectDetail)
- Add create project UI (button + modal in ProjectList)
- Add filename search box in ProjectDetail
- New useApi methods: createProject, uploadReport, deleteProject, deleteReport
- FilePreview/ReportCard: show fileSize (was undefined before)

Docs:
- Add README.md (overview, quick start, structure)
- Add CHANGELOG.md (full change log + pptx removal rationale)
- Include EVALUATION_REPORT.md and blog-vibe-coding.md

Tests:
- All 73 backend tests pass
- All 43 frontend tests pass
- Updated test fixtures for new API contract
2026-06-01 21:35:13 +08:00

2.7 KiB
Raw Blame History

Vibe Coding 试水:一个周末,用 AI 从零搭起一个日报平台

起因

想给团队做一个日报分发平台:上传日报 / 周报,选择项目,所有人都能看到。

按以前的方式,估计要耗掉一整个周末。结果这次用了 Vibe Coding——自己只动嘴提需求,AI 负责全部代码实现和部署——前后大概花了三个晚上


技术选型:够用就行

  • 前端Vue 3 + Vite + TailwindCSS
  • 后端Spring Boot + SQLite
  • 部署:宝塔面板 + Nginx
  • 域名:一年一百块的云服务器

没有微服务,没有 Docker,没有用户登录。要什么架构。


开发过程

第一晚:把需求说清楚

我把项目定位、核心功能、用户角色整理成文档发给 AI。几个关键决策点:

  • 要不要登录?不要,内部工具
  • 要不要上 Docker?不要,宝塔直接跑 jar 更省事
  • 要支持哪些文件格式?HTML、Markdown、PPTX 先做

AI 返回了技术方案和项目结构,我看了一遍,没有大问题,开始开发。

第二晚:全栈 + 部署

主要完成:

  • 项目管理(增删改查)
  • 文件上传与预览
  • 前后端部署上线

跑通之后发现了一个坑:前端 axios 配置的 baseURL 是 /api,但 Nginx 没有把 /api 转发到后端,所有请求都 404 了。顺着 Network 面板一路查到 Nginx 日志,再对比前后端端口——问题很快定位,加一条 rewrite 规则解决。

第三晚:修 bug

  • 封面图 404:上传封面图后显示破碎图片。原因是后端把文件存到 /uploads/,但 Nginx 没有代理这个路径
  • 时间字段名对不上:后端返回 uploadTime,前端读 reportDate,显示空白
  • 报告列表升序排列:最新的报告在底部,需要往下翻

每个 bug 从发现到修好,大概 10-20 分钟。


结果

指标 数值
开发时间 约 12 小时(分散 3 晚)
亲手写的代码 0 行
提的修改反馈 ~20 次
上线后 bug 数 3 个(都修了)

Vibe Coding 适合什么?

适合:需求相对明确、有时间做 QA、能判断 AI 代码对不对。

不适合:需求自己都没想清楚、技术栈完全陌生、高可靠性系统。


最大的感受

真正花时间的不是写代码,而是想清楚要做什么、验证做得对不对。

AI 把「把想法转成代码」这一步自动化了,我只需要动嘴提需求、做 QA、给反馈。省下来的时间可以花在产品设计和体验打磨上。

如果你也想试试,从一个你熟悉领域的小项目开始,给自己留出时间做 QA,持续反馈。一两周后你会知道这个模式适不适合你。