AI 开发个人博客网站

项目缘起

整个项目始于一个简单的想法：用 AI 辅助构建一个属于自己的、完整的个人博客网站。 我首先让 DeepSeek 生成一段精确的提示词，然后将这段提示词交给 ChatGPT，在 Codex 项目中完成了完整的前后端开发。最后，通过 Trae 输入启动命令，直接运行起了本地的个人博客。

---

界面预览

在trae中直接启动

首页

页尾

后台管理

笔记页面

---

后续 AI 增强功能

在基础版本之上，我又借助 AI 添加了更多个性化模块：

历史长轴

以时间线形式展示历史。

地图足迹

加入世界地图

电影收藏

专门记录看过的影视作品。

提示词原文

请帮我构建一个完整的、可本地运行的个人博客网站，包含前端展示页面和后端管理功能。项目需要采用前后端分离架构，所有数据存储在本地数据库中。技术栈一览

前端

• Vue 3 + Vite（框架与构建工具）

• Vue Router（路由管理）

• Pinia（状态管理）

• Element Plus（UI 组件库）

• Axios（HTTP 请求）

• Markdown 渲染器（如 marked 或 v-md-editor）

后端

• Node.js + Express（RESTful API）

• SQLite3（本地数据库）

• CORS（跨域处理）

• multer（文件上传，支持图片/视频）

---

项目构建过程

1. 生成提示词：DeepSeek 输出详细的开发指令（见上）。

2. ChatGPT 编码：在 Codex 项目中，AI 根据提示词生成了完整的前后端代码。

3. 本地运行：通过 Trae 执行启动命令，项目成功运行。

---

AI回复

核心功能

• 访客端：

  • 首页

  • 层级分类笔记（支持分级分层管理，展示各分类的笔记总数等统计数据）

  • 记录页面（可上传图片、视频、文字感受）

  • 影视页面（记录看过的电影、电视剧，支持筛选）

• 管理后台（独立页面）：

  • 对所有前端内容进行 新建、删除、移动、统计 等全面管理

• 认证系统：默认管理员账号 admin / admin123

项目结构

 个人博客/
 ├── backend/          # Express + SQLite3 后端
 ├── frontend/         # Vue 3 + Vite 前端
 └── README.md         # 完整运行文档

---

运行指南

后端启动

 cd D:\个人博客\backend
 npm start

前端启动（另开终端）

 cd D:\个人博客\frontend
 npm run dev

访问地址

• 博客前台：http://localhost:5173

• 管理后台：http://localhost:5173/admin

• 默认账号：admin / admin123

建议使用 Node.js 22.5 或更高版本。

---

总结

整个项目从提示词生成到完整运行，几乎全部由 AI 辅助完成，不禁让人感叹AI的生产力。