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系列也排上了日程。

功能上，也从第一版的只有文章阅读功能，逐步迭代完善，截止当前版本已经有了如下功能：

  1. 文章教程专栏功能；
  2. 资源&友链展示；
  3. 微信扫码登录&账密登录；
  4. 后台管理相关：文章管理、教程管理、友链管理、微信公众号关键字管理；
  5. 底层基础组件：RBAC权限体系；

怎么做的？

需求调研

这个阶段，主要参考了知乎、CSDN、掘金、vue官网，以及一些优秀博主基于vuepress搭建的静态网站。

最后拟定了一个大致的功能清单，和布局设计（重点参考了掘金和vue官网）：

image-20240818225529489

image-20240818225908155

技术栈选型

首先是静态站点还是动态站点？这个简单思考，就得出了结论-动态！

一开始我就没打算考虑seo，为什么不考虑seo？没必要！日常在用谷歌、百度检索的过程中，几乎很少检索到个人博客，哪怕是大家所熟知的博主，CSDN、掘金、知乎，专业知识平台的seo是做得很好的，

决定形态后，就是具体的技术栈选型。

首先是前端。简单对比了下vue和react，发现vue对新手更加友好，结合element-plus，个人建站足够。

后端就直接使用自己熟悉的java就好。

整个技术栈的版本，一开始就考虑要开源，所以所有技术栈的版本都选择了比较新的。

后端：

技术栈版本备注
SpringBoot3.3.2https://docs.spring.io/spring-boot/index.html
oracle-jdk2121.0.4https://www.oracle.com/java/technologies/downloads/#jdk21-windows
maven3.8.8
git2.43.0
knife4j4.4.0https://doc.xiaominfo.com/docs/quick-start
mybatis-plus3.5.7https://baomidou.com/getting-started/
Mysql5.7.44
Hutool-all5.8.26https://doc.hutool.cn/pages/index/

前端：

技术栈版本备注
Vue3.4.37https://cn.vuejs.org/guide/quick-start.html
vue-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_intro
pinia2.2.2
md-editor-v34.19.2https://imzbf.github.io/md-editor-v3/en-US/index

小步快跑

功能规划有了，技术选型也确定了。然后就是一边学习前端技术，一边实现博客功能。

版本迭代发布，也是基于先做成，再做好的思路。

不到一月，完成了从技术学习，到编码实现，发布了第一版本。然后就是持续迭代，完善功能。具体的更新日志参考：https://fangcaicoding.cn/article/3

最初计划是11月中旬，再对项目进行开源，也提前了半个月进行开源。

未来计划

功能完善

目前博客系统还有很多功能都还没有实现，再未来的两个月内，都会陆续迭代完善。包括：

  1. 评论系统：

    • 展示形式：一级评论+二级评论（二级评论的回复，同级展示）；

    1. 核心字段：内容、用户、时间、所属业务Id、层级、所属评论Id；

    2. 展示逻辑：默认展示一级评论+回复的条数；一级评论默认展示10条，支持时间升/降序排序:

    3. 支持的操作：未登录引导页、新增、回复、删除；

  2. 引流配置：

    • 文章阅读登录限制；

  3. 后台管理功能完善：

    • 文章模板管理；
    • 文章标签实现；
    1. 用户管理；
    2. 微信公众号后台管理；
    3. 角色权限的可视化配置；

配套的教程输出

目前预计包括：

  1. 相关技术入门教程：vue、java、springboot等；
  2. 博客的代码逻辑讲解，对技术的一个实践；
  3. 相关业务知识讲解，比如常见的权限模型、加密算法和使用场景等等；
  4. 最后，会基于已有代码，去封装一些基础的功能组件，比如角色权限管理系统等；

博客更新日志

20241027

  • 实现微信公众号扫码登录；
  • 实现微信关键字回复功能，支持数据库配置，后台界面-todo；
  • 实现RBAC权限管理-鉴权部分，后台管理页面-todo；
  • 版本截图：
    • image-20241027212109588
    • image-20241027212123630
    • image-20241027212253994
    • image-20241027211920646
    • image-20241027212441097

20241024

  • 优化教程路由，增加文章id，支持刷新后保持路由定位；
  • 版本截图：

image-20241025000222476

20241020

  • 文章模板编辑功能-文章内容保存时支持维护文章模板；
  • 网站导航；包括分类展示、访问量、后台管理等；
  • 网页UI样式调整；
  • 版本截图：

image-20241021001157943

image-20241021000748480

20241003

  • 接入百度统计（0913就接入了，忘了记录日志）；

  • 实现文章搜索功能；

  • 教程列表增加封面展示；

  • 后台管理功能实现：

    • 文章管理：curd+排序；
    • 教程管理：curd+教程文章列表维护；

  • 版本截图：

    • 百度统计后台数据：

      image-20241004203542097

    • 全局搜索功能：

      image-20241004203057435

      image-20241004203128588

    • 后台文章管理：

      image-20241004203151010

      image-20241004203205919

    • 后台教程管理功能：

      image-20241004203233841image-20241004203253486

      image-20241004203319227image-20241004203339973

20240928

  • 完成网站的公安备案；

  • 实现文章通用模板功能，统一增加了自我介绍内容；

  • 版本截图：

    image-20241004203754123

20240920

  • 增加阅读数记录和展示；

  • 统一封装前端css样式文件；

  • 优化文章title展示样式；

  • 更新专栏《从零到一，入门级编程指南》，增加文章1篇；

  • 教程详情-版本截图：

image-20240920224918822

20240917

  • 增加导航栏；

  • 实现（专栏）教程功能；

  • 新增 ElasticSearch 系列文章；

  • 优化前端组件的封装；

  • 版本截图：

image-20240918225145150

image-20240918225159732

20240912

  • 20240114 基于halo2.x 网站上线；

  • 2020817 计划更新文章，halo出现bug，后台账号无法登陆，决定自研博客系统；

  • 2020819 开始研发设计，至20240912上线第一个版本；

  • 版本功能说明：

    • 首页-博客列表；
    • 博客详情页；
    • 登录功能；
    • 博客新增和编辑功能；

  • 以下为版本截图：

image-20240913125116895

image-20240913125140294

image-20240913125434184

近期更新计划

近期更新计划（有需要的小伙伴，记得点赞关注哟！）

  1. vue、router、elementplus等前端框架入门教程，预计11中旬更新完成；
  2. 博客系统功能完善，实现评论系统等功能；

“学编程，一定要系统化”——若你也是系统学习的践行者，记得点赞关注，期待与你一起 From Zero To Hero！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/907507.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

鸿蒙生态下开发挑战-鸿蒙低代码开发工具展望及优势

鸿蒙生态下开发挑战-鸿蒙低代码开发工具展望及优势

鸿蒙生态下开发挑战 在鸿蒙生态下开发时，开发者可能会遇到多方面的挑战，这些挑战主要涉及开发工具、技术难度、生态竞争以及市场定位等方面。以下是对这些挑战的详细分析： 一、开发工具不完善 尽管鸿蒙系统的开发工具DevEco Studio在逐步完…
阅读更多...
JavaScript的迭代器和生成器

JavaScript的迭代器和生成器

1. 迭代器Iterator 1. 基本概念 JavaScript 表示集合的对象大致有Object，Array，Map，Set四种，并且这四种类型的数据之间可以相互以成员嵌套（如Array的成员可以是Object，而Map又可以嵌入Object的成员中&am…
阅读更多...
深度学习常用开源数据集介绍【持续更新】

深度学习常用开源数据集介绍【持续更新】

DIV2K 介绍：DIV2K是一个专为 图像超分辨率（SR） 任务设计的高质量数据集，广泛应用于计算机视觉领域的研究和开发。它包含800张高分辨率（HR）训练图像和100张高分辨率验证图像，每张图像都具有极高…
阅读更多...
Pinia-状态管理

Pinia-状态管理

Pinia-状态管理 特点： 1. 轻量和模块化 Pinia 是一个轻量级的状态管理库，支持模块化管理，即可以将应用的状态分成多个 store 以实现更好的组织。使用 Pinia，可以定义多个 store，每个 store 都是一个独立的模块&#x…
阅读更多...
向量模型Jina Embedding: 从v1到v3论文笔记

向量模型Jina Embedding: 从v1到v3论文笔记

文章目录 Jina Embedding: 从v1到v3Jina Embedding v1数据集准备训练过程 Jina Embedding v2预训练修改版BERT在文本对上微调在Hard Negatives上微调 Jina Embedding v2 双语言预训练修改版BERT在文本对上微调用多任务目标微调 Jina Embedding v3预训练在文本对上微调训练任务相…
阅读更多...
修改HarmonyOS鸿蒙图标和名字，打包后安装到真机，应用图标丢失变成透明，修改名字也不生效，还是默认的labeL解决方案教程

修改HarmonyOS鸿蒙图标和名字，打包后安装到真机，应用图标丢失变成透明，修改名字也不生效，还是默认的labeL解决方案教程

HarmonyOS鸿蒙打包hap 安装应用到桌面没有图标，用hdc安装到真机，打包后应用图标丢失变成透明，名字也还是默认的label的bug，以下是解决方案 以下是修改方案： 1、修改应用名字： 2、修改应用图标&#xff1a…
阅读更多...
3个模型的交互式多模型IMM，基于EKF的目标跟踪实例（附MATLAB代码）

3个模型的交互式多模型IMM，基于EKF的目标跟踪实例（附MATLAB代码）

文章目录 3个模型的IMM源代码运行结果代码介绍总结 3个模型的IMM 代码实现了基于 I M M IMM IMM（Interacting Multiple Model）算法的目标跟踪。它使用三种不同的运动模型（匀速直线运动、左转弯和右转弯）来预测目标的位置&#x…
阅读更多...
Webservice 客户端 生成代码 cxf方式 jdk方式 wsdl保存到本地后，生成客户端代码

Webservice 客户端 生成代码 cxf方式 jdk方式 wsdl保存到本地后，生成客户端代码

详解视频，如果看不懂图片，请看这个视频 客户端三种方式 jdk cxf 客户单 wsdl保存到本地后，生成客户端代码
阅读更多...
轮廓图【HTML+CSS+JavaScript】

轮廓图【HTML+CSS+JavaScript】

给大家分享一个很好看的轮播图，这个也是之前看到别人写的效果感觉很好看，所以后面也自己实现了一下，在这里分享给大家，希望大家也可以有所收获 轮播图效果： 视频效果有点浑浊，大家凑合着看，大家…
阅读更多...
Windows上安装Redis

Windows上安装Redis

1.下载Redis 下载有2中选择： 官方redis官方下载地址： https://redis.io/download， 选择适合Windows的版本下载。 redis 64位下载地址： https://github.com/ServiceStack/rediswindows/tree/master/downloads， 我们下…
阅读更多...
计算机视觉实验一：图像基础处理

计算机视觉实验一：图像基础处理

1. 图像的直方图均衡 1.1 实验目的与要求 (1)理解直方图均衡的原理与作用; (2)掌握统计图像直方图的方法; (3)掌握图像直方图均衡的方法。 1.2 实验原理及知识点 直方图均衡化是通过灰度变换将一幅图象转换为另一幅均衡直方图，即在每个灰度级上都具有相同的象素…
阅读更多...
第8章 利用CSS制作导航菜单作业

第8章 利用CSS制作导航菜单作业

1.利用CSS技术&#xff0c;结合链接和列表&#xff0c;设计并实现“山水之间”页面。 浏览效果如下&#xff1a; HTML代码如下&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8" /><title>山水之间</title><…
阅读更多...
dhcp池没有空闲ip导致手机无法获得ip

dhcp池没有空闲ip导致手机无法获得ip

得到用户反馈&#xff0c;一个高速项目部的wifi无法接入&#xff0c;让排查原因。 反馈有的手机能接入&#xff0c;有的接入不了。查看ac界面发现有个终端获得的ip是169.254.xxx.xxx。 ip地址是169.254.96.17显然是手机打开wlan开关后&#xff0c;鉴权通过后dhcp过程&#xff0…
阅读更多...
AJAX和JSON

AJAX和JSON

一.AJAX技术 1.1 AJAX介绍 Ajax 即“Asynchronous Javascript And XML”&#xff08;异步 JavaScript 和 XML&#xff09;&#xff0c;是指一种创建 交互式、快速动态应用的网页开发技术&#xff0c;无需重新加载整个网 页的情况下&#xff0c;能够更新页面局部数据的技术。 通…
阅读更多...
c++包装器/适配器 function--通俗易懂

c++包装器/适配器 function--通俗易懂

1.为什么要有function 在下面的场景下 useF类模版要实例化出三份&#xff0c;影响效率 仿函数:c仿函数--通俗易懂-CSDN博客 lambda表达式&#xff1a;c lambda表达式--通俗易懂-CSDN博客 template<class F, class T> T useF(F f, T x) {static int count 0;cout <…
阅读更多...
项目模块十五：HttpResponse模块

项目模块十五：HttpResponse模块

一、模块设计思路 存储HTTP应答要素&#xff0c;提供简单接口 二、成员变量 int _status; // 应答状态码 unordered_map<string, string> _headers; // 报头字段 string _body; // 应答正文 bool _redirect_flag; // 是否重定向信息 stri…
阅读更多...
【sqlmap使用】

【sqlmap使用】

sqlmap简介 sqlmap 目录结构 sqlmap常用参数 sqlmap实现注入 测试注入点&#xff0c;检测到注入点后&#xff0c;直接爆数据库名 python sqlmap.py –u http://172.16.12.2/7/9/strsql.php --data "usernameadmin" --dbs注意sqlmap在使用过程中可能会出现几个需要…
阅读更多...
Java已死，大模型才是未来？

Java已死，大模型才是未来？

作者&#xff1a;不惑_ 引言 在数字技术的浪潮中&#xff0c;编程语言始终扮演着至关重要的角色。Java&#xff0c;自1995年诞生以来&#xff0c;便以其跨平台的特性和丰富的生态系统&#xff0c;成为了全球范围内开发者们最为青睐的编程语言之一 然而&#xff0c;随着技术的…
阅读更多...
Rust 力扣 - 59. 螺旋矩阵 II

Rust 力扣 - 59. 螺旋矩阵 II

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 使用一个全局变量current记录当前遍历到的元素的值 我们只需要一圈一圈的从外向内遍历矩阵&#xff0c;每一圈遍历顺序为上边、右边、下边、左边&#xff0c;每遍历完一个元素后current 我们需要注意的是如果上…
阅读更多...
MFC工控项目实例二十八模拟量信号每秒采集100次

MFC工控项目实例二十八模拟量信号每秒采集100次

用两个多媒体定时器&#xff0c;一个定时0.1秒计时&#xff0c;另一个定时0.01秒用来对模拟量信号采集每秒100次。 1、在SEAL_PRESSUREDlg.h中添加代码 class CSEAL_PRESSUREDlg : public CDialo { public:CSEAL_PRESSUREDlg(CWnd* pParent NULL); // standard constructor&a…
阅读更多...
最新文章

Copyright @ 2022~2023