2024最新的开源博客体系：vue3.x+SpringBoot 3.x 前后端分离
本文转载自：https://fangcaicoding.cn/article/54大家好！我是方才，目前是8人后端研发团队的负责人，拥有6年后端经验&3年团队管理经验，停止目前口试过近200位候选人，主导过单表上10亿、累计上100亿数据量级的业务体系的架构和核心编码。
“学编程，肯定要体系化” 是我一直坚持的学习之道。目前正在体系化分享从零到一的全栈编程入门以及项目实战教程。
无论你是编程新手，照旧有经验的开发者，我都愿意与你分享我的学习方法、项目实战经验，乃至提供学习门路订定、简历优化、口试技巧等深度交换服务。
我创建了一个编程学习交换群（扫码关注后即可加入），秉持“一群人可以走得更远”的理念，期待与你一起 From Zero To Hero！
茫茫人海，遇见便是缘分！希望这篇文章对你有所资助！
为什么做？
如今开源好用的博客体系这么多？为什么要自研一个呢？
包罗我自己之前也利用vuepress和halo，如果只是想快速搭建一个博客体系，不想花太多的精力在建站本身上，开源的博客体系是一个非常不错的选择。
但如果想定制各种功能，或者说有产物有bug，期望能迅速办理，自研肯定是更佳的！
我本年在8月决定自研，也是因为遇到了halo的bug，无法登录背景管理发布文章，所以才觉得自研的。
做了哪些？
从0817决定自研，0819开始需求功能调研，到0912第一版上线，用时不到一个月。
因为前端技术是现学的，所以一遍自研体系，一遍成体系的输出前端入门教程。停止今天1028，自研的博客体系已经快速迭代了8个版本，前端入门教程目前完成了html+css+JavaScript的输出，vue和elementPlus系列也排上了日程。
功能上，也从第一版的只有文章阅读功能，逐步迭代美满，停止当前版本已经有了如下功能：
[*]文章教程专栏功能；
[*]资源&友链展示；
[*]微信扫码登录&账密登录；
[*]背景管理相关：文章管理、教程管理、友链管理、微信公众号关键字管理；
[*]底层基础组件：RBAC权限体系；
怎么做的？
需求调研
这个阶段，重要参考了知乎、CSDN、掘金、vue官网，以及一些优秀博主基于vuepress搭建的静态网站。
末了拟定了一个大致的功能清单，和布局设计（重点参考了掘金和vue官网）：
https://img-blog.csdnimg.cn/img_convert/fc3404d4b9d7358beaec7d54ba138fcb.png
https://img-blog.csdnimg.cn/img_convert/4802b3a1e26918f128417e5d7f19b973.png
技术栈选型
起首是静态站点照旧动态站点？这个简朴思索，就得出告终论-动态！
一开始我就没计划考虑seo，为什么不考虑seo？没须要！日常在用谷歌、百度检索的过程中，几乎很少检索到个人博客，哪怕是大家所熟知的博主，CSDN、掘金、知乎，专业知识平台的seo是做得很好的，
决定形态后，就是具体的技术栈选型。
起首是前端。简朴对比了下vue和react，发现vue对新手更加友好，结合element-plus，个人建站足够。
后端就直接利用自己熟悉的java就好。
整个技术栈的版本，一开始就考虑要开源，所以所有技术栈的版本都选择了比较新的。
后端：
技术栈版本备注SpringBoot3.3.2https://docs.spring.io/spring-boot/index.htmloracle-jdk2121.0.4https://www.oracle.com/java/technologies/downloads/#jdk21-windowsmaven3.8.8git2.43.0knife4j4.4.0https://doc.xiaominfo.com/docs/quick-startmybatis-plus3.5.7https://baomidou.com/getting-started/Mysql5.7.44Hutool-all5.8.26https://doc.hutool.cn/pages/index/ 前端：
技术栈版本备注Vue3.4.37https://cn.vuejs.org/guide/quick-start.htmlvue-router4.4.3https://router.vuejs.org/zh/guide/element-plus2.8.1https://element-plus.org/zh-CN/axios1.7.7https://axios-http.com/docs/api_intropinia2.2.2md-editor-v34.19.2https://imzbf.github.io/md-editor-v3/en-US/index 小步快跑
功能规划有了，技术选型也确定了。然后就是一边学习前端技术，一边实现博客功能。
版本迭代发布，也是基于先做成，再做好的思绪。
不到一月，完成了从技术学习，到编码实现，发布了第一版本。然后就是持续迭代，美满功能。具体的更新日记参考：https://fangcaicoding.cn/article/3
最初计划是11月中旬，再对项目进行开源，也提前了半个月进行开源。
未来计划
功能美满
目前博客体系还有许多功能都还没有实现，再未来的两个月内，都会连续迭代美满。包罗：
[*] 评论体系：
[*] 展示情势：一级评论+二级评论（二级评论的回复，同级展示）；
[*]核心字段：内容、用户、时间、所属业务Id、层级、所属评论Id；
[*]展示逻辑：默认展示一级评论+回复的条数；一级评论默认展示10条，支持时间升/降序排序:
[*]支持的操纵：未登录引导页、新增、回复、删除；
[*] 引流设置：
[*] 文章阅读登录限制；
[*] 背景管理功能美满：
[*] 文章模板管理；
[*] 文章标签实现；
[*] 用户管理；
[*] 微信公众号背景管理；
[*] 角色权限的可视化设置；
配套的教程输出
目前预计包罗：
[*]相关技术入门教程：vue、java、springboot等；
[*]博客的代码逻辑解说，对技术的一个实践；
[*]相关业务知识解说，比如常见的权限模型、加密算法和利用场景等等；
[*]末了，会基于已有代码，去封装一些基础的功能组件，比如角色权限管理体系等；
博客更新日记
20241027
[*]实现微信公众号扫码登录；
[*]实现微信关键字回复功能，支持数据库设置，背景界面-todo；
[*]实现RBAC权限管理-鉴权部分，背景管理页面-todo；
[*]版本截图：
[*] https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Ffangcaicoding.cn%2Foss%2Fassets%2F%25E5%2585%25B3%25E4%25BA%258E%25E6%259C%25AC%25E7%25AB%2599%2Fimage-20241027212109588.png&pos_id=img-yNgHRs5D-1730178137949%29
[*]https://img-blog.csdnimg.cn/img_convert/dc55d8098138b9b6a899e4d94dc03e99.png
[*] https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Ffangcaicoding.cn%2Foss%2Fassets%2F%25E5%2585%25B3%25E4%25BA%258E%25E6%259C%25AC%25E7%25AB%2599%2Fimage-20241027212253994.png&pos_id=img-Fvit4f2E-1730178138118%29
[*]https://img-blog.csdnimg.cn/img_convert/58ece78413e4406c74a2bc59d552054e.png
[*]https://img-blog.csdnimg.cn/img_convert/551606e869042d1b34138d76c72da798.png
20241024
[*]优化教程路由，增加文章id，支持革新后保持路由定位；
[*]版本截图：
https://img-blog.csdnimg.cn/img_convert/038a1fbf057de4f3a0829ff9e81019ec.png
20241020
[*]文章模板编辑功能-文章内容生存时支持维护文章模板；
[*]网站导航；包罗分类展示、访问量、背景管理等；
[*]网页UI样式调整；
[*]版本截图：
https://img-blog.csdnimg.cn/img_convert/09d3aca6e9ae21a1c393017afc5ab72c.png
https://img-blog.csdnimg.cn/img_convert/4793d946249da63721ae83f7ae7b229e.png
20241003
[*] 接入百度统计（0913就接入了，忘了记载日记）；
[*] 实现文章搜刮功能；
[*] 教程列表增加封面展示；
[*] 背景管理功能实现：
[*]文章管理：curd+排序；
[*]教程管理：curd+教程文章列表维护；
[*] 版本截图：
[*] 百度统计背景数据：
https://img-blog.csdnimg.cn/img_convert/91e2f3c601cef9afa87561cc1fbdb36a.png
[*] 全局搜刮功能：
https://img-blog.csdnimg.cn/img_convert/a30bd8518935c602619f787fcf6bffd8.png
https://img-blog.csdnimg.cn/img_convert/4ebf13554656c336572ca79f47987a9a.png
[*] 背景文章管理：
https://img-blog.csdnimg.cn/img_convert/ab65c54262064cbbb3a2f3596db95e17.png
https://img-blog.csdnimg.cn/img_convert/7ee482d2b7e34ee5c7596c3e7e2ecfd1.png
[*] 背景教程管理功能：
https://img-blog.csdnimg.cn/img_convert/b04c704c65a041d05555059639678db7.pnghttps://img-blog.csdnimg.cn/img_convert/5a296f24dc3df953a93749118c2c04a8.png
https://img-blog.csdnimg.cn/img_convert/b1d63894e3b98dd9ed06dbc3940c0ac6.pnghttps://img-blog.csdnimg.cn/img_convert/5799e18ecfd6cd6483fab032e7e9c65a.png
20240928
[*] 完成网站的公安备案；
[*] 实现文章通用模板功能，统一增加了自我介绍内容；
[*] 版本截图：
https://img-blog.csdnimg.cn/img_convert/95a1dbc143b26911f85ce2ff332457a6.png
20240920
[*] 增加阅读数记载和展示；
[*] 统一封装前端css样式文件；
[*] 优化文章title展示样式；
[*] 更新专栏《从零到一，入门级编程指南》，增加文章1篇；
[*] 教程详情-版本截图：
https://img-blog.csdnimg.cn/img_convert/5599286836bfe1aab6fa4182ac2ed5e6.png
20240917
[*] 增加导航栏；
[*] 实现（专栏）教程功能；
[*] 新增 ElasticSearch 系列文章；
[*] 优化前端组件的封装；
[*] 版本截图：
https://img-blog.csdnimg.cn/img_convert/bf581000797e741611564397a2436659.png
https://img-blog.csdnimg.cn/img_convert/8ad669bea10832c9bf5094baa8660dc9.png
20240912
[*] 20240114 基于halo2.x 网站上线；
[*] 2020817 计划更新文章，halo出现bug，背景账号无法登岸，决定自研博客体系；
[*] 2020819 开始研发设计，至20240912上线第一个版本；
[*] 版本功能阐明：
[*]首页-博客列表；
[*]博客详情页；
[*]登录功能；
[*]博客新增和编辑功能；
[*] 以下为版本截图：
https://img-blog.csdnimg.cn/img_convert/033987bfaa87f0fdf619c3df03ea695b.png
https://img-blog.csdnimg.cn/img_convert/7d4b1cd0179c867e0e2e7a7bc62b0235.png
https://img-blog.csdnimg.cn/img_convert/57c4866d61805de4e12656e7a218979a.png
近期更新计划
近期更新计划（有需要的小伙伴，记得点赞关注哟！）
[*]vue、router、elementplus等前端框架入门教程，预计11中旬更新完成；
[*]博客体系功能美满，实现评论体系等功能；
“学编程，肯定要体系化”——若你也是体系学习的践行者，记得点赞关注，期待与你一起 From Zero To Hero！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]