夜雨聆风之前一直想搭一个个人博客，前后折腾了很久，终于把一套完整的前后端博客系统跑通了。从路由设计、后台管理、JWT 登录鉴权到 Markdown 编辑和图片上传，基本覆盖了一个个人站该有的功能。
做完之后想着，既然代码都写了，不如整理成模板分享出来。如果有人也想搭个人博客，可以省掉从零开始的功夫。
❝▲ 博客首页效果 — 左侧导航 + 内容区，支持深色/浅色模式
这套模板包含什么
前台五个页面：
首页（展示最新文章、项目、分享）
文章列表 & 详情页
项目展示 & 详情页
分享资源页
友链页
后台管理：
文章管理（新增 / 编辑 / 删除）
项目管理
分享管理
友链管理
管理员登录（JWT 鉴权）
❝▲ 后台文章管理 — 表格展示、批量删除、新增/编辑
技术栈：
前端：Vue 3 + Vite + Element Plus
后端：Spring Boot + Spring Data JPA
数据库：MySQL
鉴权：JWT Token
几个我觉得还行的设计
1. 深色模式加了 dark mode 切换，保存在 localStorage，刷新不会丢。前台默认浅色，进入后台自动切浅色（后台暂时只适配了浅色）。
❝▲ 深色模式 — 全局主题切换，护眼且好看
2. Markdown 编辑 + 实时预览管理后台的正文编辑器，写 Markdown，实时渲染预览，写文章体验还算顺。
❝▲ 后台编辑器 — 左侧编辑，右侧实时预览
3. 响应式布局手机端和桌面端分别做了布局适配。桌面端是侧边栏导航 + 内容区，手机端顶部是精简导航栏，菜单收进抽屉里。
❝▲ 手机端适配 — 顶部精简导航，菜单从左侧滑出
怎么跑起来
步骤很简单，就四步：
第一步：初始化数据库找到 database/rensheng_blog.sql，在你的 MySQL 里执行一下，建库建表 + 示例数据一条龙。
第二步：改配置后端 application.yml 里配一下数据库连接和 JWT 密钥（模板里已经改成了环境变量方式，直接改默认值也行）。
第三步：启动后端
cd RenshengBlogApplicationmvn spring-boot:run
第四步：启动前端
cd frontendnpm installnpm run dev
默认管理员账号：admin / admin123，登录后就能在后台发文章了。
前端默认访问 http://localhost:5173。
❝▲ 新增文章 — 标题、分类、标签、封面图、Markdown 正文一应俱全
写在最后
这个模板还在持续完善中，后续计划加标签分类、评论系统和 SEO 优化。如果你有好的建议或者遇到问题，欢迎留言交流。
模板已经整理好脱敏版本，去掉了个人域名和敏感配置，可以直接拿去用。需要的话可以去 Gitee 搜 DevChatLog。
或者克隆： git clone https://gitee.com/RenShengGitee/rensheng-blog-template.git
如果你觉得有用，欢迎点赞 / 在看 / 转发，这对我很有帮助 🙌