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

news2024/10/30 8:22:34

本文转载自: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.coloradmin.cn/o/2227875.html

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

相关文章

局域网 docker pull 使用代理拉取镜像

局域网 docker pull 使用代理拉取镜像 1、需求: 我有win主机,上面装有代理可连接dockerhub;我另有linux主机,直接pull因墙失败,想走win的代理访问dockerhub拉镜像;两台主机在同一个局域网中; …

项目1 yolov5鱼苗检测计数

yolov5鱼苗检测 1. yolov5鱼苗检测1.1. 环境配置1.2 Predict1.3 Validate1.4 Train1.5 生成 ONNX 2 代码解析2.1 模型2.2 数据集2.3 损失函数2.4 训练2.5 预测 之前做的项目,再回顾一下 环境:GPU1卡,CPU4核,每显卡12GB&#xff0c…

音视频入门基础:FLV专题(18)——Audio Tag简介

一、引言 根据《video_file_format_spec_v10_1.pdf》第75页,如果某个Tag的Tag header中的TagType值为8,表示该Tag为Audio Tag: 这时StreamID之后紧接着的就是AudioTagHeader,也就是说这时Tag header之后的就是AudioTagHeader&…

(二 上)VB 2010 设计初步

目录 一、常用类应用 1.Console类控制台 2.窗体基本控件 二、面向对象程序设计 1.类和对象 2.对象的属性、方法、事件属 1.属性 2.方法 3.事件、事件过程 1.事件 2.事件过程 3.对象浏览器 三、.NET类库与命名空间 1.命名空间 常用命名空间 1.System命名空间 2.…

基于uniapp微信小程序的校园二手书交易系统

作者:计算机学姐 开发技术:SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等,“文末源码”。 专栏推荐:前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏:…

学习threejs,使用粒子实现下雪特效

👨‍⚕️ 主页: gis分享者 👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏:threejs gis工程师 文章目录 一、🍀前言1.1 ☘️THREE.Points简介1.11 ☘️…

服务器文件访问协议

服务器文件访问协议 摘要NFS、CIFS、SMB概述SMBWindows SMBLinux SambaPython SMB NFS 摘要 本篇博客参考网上文档和博客,对基于网络的服务器/主机的文件访问、共享协议进行简要总结,完整内容将会不断更新,以便加深理解和记忆 NFS、CIFS、S…

基于ResNet50模型的船型识别与分类系统研究

项目源码获取方式见文章末尾! 600多个深度学习项目资料,快来加入社群一起学习吧。 《------往期经典推荐------》 项目名称 1.【LSTM模型实现光伏发电功率的预测】 2.【卫星图像道路检测DeepLabV3Plus模型】 3.【GAN模型实现二次元头像生成】 4.【CNN模…

NVR小程序接入平台/设备EasyNVR多个NVR同时管理视频监控新选择

在数字化转型的浪潮中,视频监控作为安防领域的核心组成部分,正经历着前所未有的技术革新。随着技术的不断进步和应用场景的不断拓展,视频监控系统的兼容性、稳定性以及安全性成为了用户关注的焦点。NVR小程序接入平台/设备EasyNVR&#xff0c…

单元测试详解

🍅 点击文末小卡片 ,免费获取软件测试全套资料,资料在手,涨薪更快 为什么需要单元测试? 从产品角度而言,常规的功能测试、系统测试都是站在产品局部或全局功能进行测试,能够很好地与用户的需…

基于 ThinkPHP+Mysql 灵活用工_灵活用工系统_灵活用工平台

基于 ThinkPHPMysql 灵活用工灵活用工平台灵活用工系统灵活用工小程序灵活用工源码灵活用工系统源码 开发语言 ThinkPHPMysql 源码合作 提供完整源代码 软件界面展示 一、企业管理后台 二、运用管理平台 三、手机端

【Linux内核揭秘】深入理解命令行参数和环境变量

文章目录 命令行参数什么是命令行参数main函数的参数 环境变量什么是环境变量常见的环境变量PATHHOMESHELLPWDOLDPWD 本地变量总结 命令行参数 什么是命令行参数 形如这样的命令后面带的选项就是命令行参数。 首先我们要了解一下命令行参数的原理。 我们知道像ls,mkdir,touch等…

Pytest-Bdd-Playwright 系列教程(4):基于敏捷的通用步骤定义

Pytest-Bdd-Playwright 系列教程(4):基于敏捷的通用步骤定义 前言一、项目结构二、通用步骤定义三、特性文件设计四、测试脚本实现五、运行测试总结 前言 在敏捷迭代中,为了适应快速、高频的交付,自动化测试框架的设计…

银行信贷风控专题:Python、R 语言机器学习数据挖掘应用实例合集:xgboost、决策树、随机森林、贝叶斯等...

全文链接:https://tecdat.cn/?p38026 分析师:Fanghui Shao 在当今金融领域,风险管控至关重要。无论是汽车贷款违约预测、银行挖掘潜在贷款客户,还是信贷风控模型的构建,以及基于决策树的银行信贷风险预警,…

Ubuntu22.04环境搭建MQTT服务器

官网: https://mosquitto.org 1.引入库 sudo apt-add-repository ppa:mosquitto-dev/mosquitto-ppa2.升级安装工具 sudo apt-get update 3.安装 sudo apt-get install mosquitto 4.安装客户端 sudo apt-get install mosquitto-clients5.添加修改配置文件 进…

Python | Leetcode Python题解之第519题随机翻转矩阵

题目: 题解: class Solution:def __init__(self, m: int, n: int):self.m mself.n nself.total m * nself.map {}def flip(self) -> List[int]:x random.randint(0, self.total - 1)self.total - 1# 查找位置 x 对应的映射idx self.map.get(x,…

【linux网络编程】| socket套接字 | 实现UDP协议聊天室

前言:本节内容将带友友们实现一个UDP协议的聊天室。 主要原理是客户端发送数据给服务端。 服务端将数据再转发给所有链接服务端的客户端。 所以, 我们主要就是要实现客户端以及服务端的逻辑代码。 那么, 接下来开始我们的学习吧。 ps:本节内容…

Windows 下实验视频降噪算法 MeshFlow 详细教程

MeshFlow视频降噪算法 Meshflow 视频降噪算法来自于 2017 年电子科技大学一篇高质量论文。 该论文提出了一个新的运动模型MeshFlow,它是一个空间平滑的稀疏运动场 (spatially smooth sparse motion field),其运动矢量 (motion vectors) 仅在网格顶点 (m…

随机采样方法之逆变换采样

抽样或采样是指从目标总体中抽取出部分个体也就是样本,通过对样本的属性或特征进行分析,以此对总体进行评估。采样作为一种重要的数据分析方法,在深度学习、渲染等诸多方面具有广泛的应用。本文将回顾一种基本的采样方法即逆变换采样。 一、…

国自然地学部立项名单(2021-2023年)和标书范本(2007-2017年33份)-最新出炉 附下载链接

国自然地学部立项名单(2021-2023年)和标书范本(2007-2017年33份) 下载链接-点它👉👉👉: 国自然地学部立项名单(2021-2023年)和标书范本(2007-201…