当前位置：首页 > news >正文

从搭建到打磨：我的纯前端个人博客开发复盘

news 2025/11/3 13:00:57

📅 日期：2025-11-02
作者：盼哥 PyAI 实验室
项目关键词：前端开发、AI编程、个人成长博客、ECharts、localStorage

🚀 一、项目起点：为什么我要做“纯前端博客”

很多人问我，为什么要花时间做一个 完全没有后端的博客系统？

原因很简单：
我想要一个完全属于自己的成长空间，不依赖服务器，不受部署限制，也能记录我每天的学习与进步。

我希望它能：

离线可用；
零成本维护；
自动保存我的所有笔记、旅程和想法；
甚至可以随时导出为一份完整 JSON 备份，像一本电子人生笔记。

于是，我开始了这次尝试——
使用 AI编程 + 纯前端技术，从零搭建出一个“个人成长空间”网站。

🧱 二、开发过程：从结构到交互的迭代

1️⃣ 页面结构搭建

我首先设计了五个核心页面模块：

模块	功能说明
首页	欢迎语 + 简介 + 导航跳转
我的	头像、签名、个人简介展示
旅程	中国地图可视化 + 省份高亮
相册	瀑布流 + 点赞 + 弹窗预览
读书	列表/卡片双视图 + 本地持久化

整个框架都用 HTML + CSS + JS 完成，
数据存储使用 localStorage，无需数据库支持。

2️⃣ 功能实现与调试

在开发中我用到了很多小技巧，比如：

使用 ECharts 在线 CDN 实现中国地图的动态加载；
利用 localStorage 保存用户的每一次操作；
编写导入/导出 JSON 的功能，模拟数据持久化；
用 Base64 占位图替代真实图片，降低加载延迟。

// 简单的数据持久化示例
const saveData = (key, value) => localStorage.setItem(key, JSON.stringify(value));
const loadData = (key) => JSON.parse(localStorage.getItem(key) || "[]");

📍遇到的问题：

不同浏览器之间 localStorage 空间大小不一致；
Safari 在移动端有缓存策略差异；
CSS 在 PC 和 Pad 上的布局偏移。

🧩解决方案：

通过 try/catch 防止存储异常；
增加环境检测；
使用 Flex + 媒体查询重构布局。

3️⃣ 视觉优化与体验打磨

在功能稳定后，我开始优化视觉体验：

将原本生硬的排版改为响应式布局；
增加渐变标题栏和柔和阴影；
替换图标为简约线性样式；
保留“成长感”的紫蓝色调。

💬 一句话总结：
从最初的“能跑起来”，到“看起来舒服”，再到“值得分享”，
这一步花的时间，往往比写功能还多。

🧠 三、AI编程在项目中的角色

这次我用到了 Trae AI 编程 来辅助开发。
它的作用不是“替我写完代码”，而是帮我加快构思与调试：

我输入模块需求，它帮我生成 HTML+CSS 初稿；
我调试时遇到问题，它直接给出解决思路与优化方向；
在视觉优化时，它还能帮我尝试不同风格组合。

这一点，让整个项目的开发效率提升了至少 40%+。
AI 已经不只是工具，而是“并肩协作的虚拟搭档”。

🧩 四、复盘反思：从“做完”到“做精”

✅ 收获：

理解了前端在“无后端环境”下的潜能；
熟悉了 localStorage 的数据生命周期；
养成了随时复盘与记录项目细节的习惯。

⚠️ 不足：

项目结构初期规划不够清晰；
模块间数据结构未统一；
UI 配色和字体规范还需进一步标准化。

💪 下一步计划：

增加「宠物成长记录」和「兴趣时间轴」模块；
封装通用的 localStorage 数据管理函数；
添加「夜间模式」切换功能；
编写项目自动化备份脚本。

📅 五、今日小结（2025-11-02）

项目	进度	备注
纯前端博客核心框架	✅ 完成	核心模块运行稳定
页面优化	✅ 完成	响应式布局已调试
跨浏览器兼容	⚙️ 调整中	Safari需继续测试
数据导出/导入	✅ 完成	JSON备份机制稳定