2024最新的开源博客系统:vue3.x+SpringBoot 3.x 前后端分离

本文转载自:https://fangcaicoding.cn/article/54

大家好!我是方才,目前是8人后端研发团队的负责人,拥有6年后端经验&3年团队管理经验,截止目前面试过近200位候选人,主导过单表上10亿、累计上100亿数据量级的业务系统的架构和核心编码。

“学编程,一定要系统化” 是我一直坚持的学习之道。目前正在系统化分享从零到一的全栈编程入门以及项目实战教程

无论你是编程新手,还是有经验的开发者,我都愿意与你分享我的学习方法、项目实战经验,甚至提供学习路线制定、简历优化、面试技巧等深度交流服务。

我创建了一个编程学习交流群(扫码关注后即可加入),秉持“一群人可以走得更远”的理念,期待与你一起 From Zero To Hero!

茫茫人海,遇见即是缘分!希望这篇文章对你有所帮助!

为什么做?

现在开源好用的博客系统这么多?为什么要自研一个呢?
包括我自己之前也使用vuepresshalo,如果只是想快速搭建一个博客系统,不想花太多的精力在建站本身上,开源的博客系统是一个非常不错的选择。

但如果想定制各种功能,或者说有产品有bug,期望能迅速解决,自研一定是更佳的!

我今年在8月决定自研,也是因为遇到了halo的bug,无法登录后台管理发布文章,所以才觉得自研的。

做了哪些?

从0817决定自研,0819开始需求功能调研,到0912第一版上线,用时不到一个月。

因为前端技术是现学的,所以一遍自研系统,一遍成体系的输出前端入门教程。截止今天1028,自研的博客系统已经快速迭代了8个版本,前端入门教程目前完成了html+css+JavaScript的输出,vueelementPlus系列也排上了日程。

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

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

怎么做的?

需求调研

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

最后拟定了一个大致的功能清单,和布局设计(重点参考了掘金和vue官网):

image-20240818225529489

image-20240818225908155

技术栈选型

首先是静态站点还是动态站点?这个简单思考,就得出了结论-动态!

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

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

首先是前端。简单对比了下vuereact,发现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. 相关技术入门教程:vuejavaspringboot等;
  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!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaScript 进阶 - 第1天(黑马笔记)

JavaScript 进阶 - 第1天 目录 JavaScript 进阶 - 第1天 作用域 局部作用域 函数作用域 块作用域 全局作用域 作用域链 闭包 变量提升 函数 函数提升 函数参数 默认值 动态参数 剩余参数 箭头函数 箭头函数参数 箭头函数 this 解构赋值 数组解构 对象解构…

MATLAB车道检测与跟踪

读了车道检测这个论文,我理解了利用matlab对车道识别算法进行仿真研究,从仿真的结果中提出具有一定实时性鲁棒性的识别方法。车道检测是智能车辆发展的智能因素。近年来对这项目的研究都是针对特定的环境和道路状况给出了不同的解决方案。近年来,自主驾驶…

pdf转为txt文本格式并使用base64加密输出数据

第一步&#xff0c;pom.xml中引入jar包 <dependency><groupId>org.apache.pdfbox</groupId><artifactId>pdfbox</artifactId><version>2.0.24</version></dependency> 第二步 package org.example.test.example.changefile;…

C++核心编程和桌面应用开发 第十七天(set和multiset容器 pair map和multimap容器)

目录 1.set和multiset容器 1.1构造和赋值 1.2交换和大小 1.3插入和删除 1.4统计和查找 1.5pair对组 1.6set和multiset的区别 1.7指定内置数据类型排序规则 1.8指定自定义数据类型排序规则 2.map和multimap容器 2.1构造和赋值 2.2交换和大小 2.3插入和删除 2.4统计…

【vue】13.深入理解递归组件

在Vue.js的开发实践中&#xff0c;组件是构建界面的核心概念。而递归组件则是一种特殊的组件&#xff0c;它能够自己调用自己&#xff0c;从而创造出无限嵌套的界面结构。本文将带你了解递归组件的应用&#xff0c;以及如何在Vue中实现和使用它。 一.什么是递归组件&#xff1f…

【Python爬虫实战】网络爬虫完整指南:网络协议OSI模型

网络爬虫完整指南&#xff1a;从协议基础到实践应用 什么是网络协议&#xff1f; **网络协议&#xff08;Network Protocol&#xff09;**是指计算机网络中设备和设备之间进行通信的规则和约定。它定义了数据传输的格式、顺序、传输方法和错误处理机制&#xff0c;使不同设备和…

01.如何用DDD重构老项目

学习资料来源&#xff1a;DDD独家秘籍视频合集 https://space.bilibili.com/24690212/channel/collectiondetail?sid1940048&ctype0 文章目录 动机DDD与重构实践重构? 重写从一开始就采用DDD重构步骤1. 添加领域模块2.分离出有价值的代码3.迁移到领域模块4.重复2,3 动机 …

OSI公布OSAID 1.0版 “开源人工智能”首次被定义

在2024年ALL THINGS OPEN大会上&#xff0c;Open Source Initiative (OSI) 正式发布了开源人工智能定义&#xff08;OSAID&#xff09;1.0版本&#xff0c;标志着全球首个开源AI标准的诞生。OSAID将作为衡量人工智能系统是否符合“开源人工智能”标准的依据&#xff0c;为社区主…

接口测试(八)jmeter——参数化(CSV Data Set Config)

一、CSV Data Set Config 需求&#xff1a;批量注册5个用户&#xff0c;从CSV文件导入用户数据 1. 【线程组】–>【添加】–>【配置元件】–>【CSV Data Set Config】 2. 【CSV数据文件设置】设置如下 3. 设置线程数为5 4. 运行后查看响应结果

pycharm 中 json 库的常用操作

文章目录 1. 导入 json 模块2. 将 Python 对象编码为 JSON 字符串&#xff08;序列化&#xff09;3. 将 JSON 字符串解码为 Python 对象&#xff08;反序列化&#xff09;4. 从文件中读取 JSON 数据5. 将 Python 对象写入 JSON 文件6. 处理 JSON 解码错误总结 在 PyCharm 中&am…

Flutter加载本地HTML的优雅解决方案:轻松实现富文本展示

在移动开发中&#xff0c;展示复杂的富文本是一项常见需求&#xff0c;而有时候我们需要将HTML文件直接嵌入到Flutter应用中。使用HTML不仅能丰富内容展示&#xff0c;还可以避免重复开发。但是&#xff0c;如何在Flutter中高效、优雅地加载本地HTML呢&#xff1f;这篇文章就带…

MySQL数据库数据类型介绍

1. 数值类型 整数类型&#xff1a; TINYINT&#xff1a;1 字节&#xff0c;范围 -128 到 127&#xff08;或 0 到 255&#xff09;。SMALLINT&#xff1a;2 字节&#xff0c;范围 -32,768 到 32,767&#xff08;或 0 到 65,535&#xff09;。MEDIUMINT&#xff1a;3 字节&…

PART 1 数据挖掘概论 — 数据挖掘方法论

目录 数据库知识发掘步骤 数据挖掘技术的产业标准 CRISP-DM SEMMA 数据库知识发掘步骤 数据库知识发掘(Knowledge Discovery in Database,KDD)是从数据库中的大量数据中发现不明显、之前未知、可能有用的知识。 知识发掘流程(Knowledge Discovery Process)包括属性选择…

【优选算法篇】前缀之序,后缀之章:于数列深处邂逅算法的光与影

文章目录 C 前缀和详解&#xff1a;基础题解与思维分析前言第一章&#xff1a;前缀和基础应用1.1 一维前缀和模板题解法&#xff08;前缀和&#xff09;图解分析C代码实现易错点提示代码解读题目解析总结 1.2 二维前缀和模板题解法&#xff08;二维前缀和&#xff09;图解分析C…

Xcode 16.1 (16B40) 发布下载 - Apple 平台 IDE

Xcode 16.1 (16B40) 发布下载 - Apple 平台 IDE IDE for iOS/iPadOS/macOS/watchOS/tvOS/visonOS 发布日期&#xff1a;2024 年 10 月 28 日 Xcode 16.1 包含适用于 iOS 18.1、iPadOS 18.1、Apple tvOS 18.1、watchOS 11.1、macOS Sequoia 15.1 和 visionOS 2.1 的 SDK。Xco…

Codeforces Round 946 (Div. 3) G. Money Buys Less Happiness Now(反悔贪心)

题目链接 Codeforces Round 946 (Div. 3) G. Money Buys Less Happiness Now 思路 我们维护当前拥有的钱 s u m sum sum和一个大根堆&#xff0c;大根堆记录用了哪些 c i c_{i} ci​。 我们先尝试获得当前月的幸福&#xff0c; s u m s u m − c i sum sum - c_{i} sumsu…

LeetCode 3211.生成不含相邻零的二进制字符串:二进制枚举+位运算优化

【LetMeFly】3211.生成不含相邻零的二进制字符串&#xff1a;二进制枚举位运算优化 力扣题目链接&#xff1a;https://leetcode.cn/problems/generate-binary-strings-without-adjacent-zeros/ 给你一个正整数 n。 如果一个二进制字符串 x 的所有长度为 2 的子字符串中包含 …

SpringBoot篇(简化操作的原理)

目录 一、代码位置 二、统一版本管理&#xff08;parent&#xff09; 三、提供 starter简化 Maven 配置 四、自动配置 Spring&#xff08;引导类&#xff09; 五、嵌入式 servlet 容器 一、代码位置 二、统一版本管理&#xff08;parent&#xff09; SpringBoot项目都会继…

Gin框架html/vue前端使用hls.js播放/点播m3u8(hls)格式视频

说明 在web应用开发时遇到在线播放m3u8格式视频&#xff0c;由于m3u8是多分片视频&#xff0c;原生video标签无法直接播放&#xff0c;所以需要js对m3u8处理才能播放&#xff0c;网上有很多插件&#xff0c;这里我选择最近简单方法hls.js播放&#xff0c;引入一个js文件即可。…

【云原生】云原生后端:监控与观察性

目录 引言一、监控的概念1.1 指标监控1.2 事件监控1.3 告警管理 二、观察性的定义三、实现监控与观察性的方法3.1 指标收集与监控3.2 日志管理3.3 性能分析 四、监控与观察性的最佳实践4.1 监控工具选择4.2 定期回顾与优化 结论参考资料 引言 在现代云原生架构中&#xff0c;监…