推荐一个基于Springboot + Vue 开发的前后端分离博客

news2024/11/16 1:15:55

基于Springboot + Vue 开发的前后端分离博客

博客介绍

本博客是参考 [风丶宇] 大佬的博客更新而成,感谢大佬提供的页面,然后定制新增部分功能,是个非常值得新手入门学习的Java规范化编程案例!

在线地址

项目链接: https://www.macw.cc/

后台链接: blog.macw.cc

测试账号:test@qq.com,密码:1234567,可登入后台查看。

Gitee地址: https://gitee.com/macw/blog

在线接口文档地址: https://www.macw.cc/api/doc.html

您的star是我坚持的动力,感谢大家的支持,欢迎提交pr共同改进项目。

更新内容

  • 更新博客图片为接口自动刷新获取
  • 说说首页滚动框优化,截取第一行前n个字符展示
  • 优化部分页面样式,新增部分自动化接口调用
  • 首页右下角新增[摸鱼日历]接口等
  • 后台系统配置更新
  • 添加个人网盘菜单
  • 点赞功能更新为无需登录点赞,通过cookie刷新记录
  • 游客头像取消默认黑白,改为自动刷新
  • 友链页面优化,添加博客地址说明等

后续更新计划

  • 更新违禁词校验检测功能,现在校验太严格
  • 添加博客文章页面,可以添加附件功能等
  • 添加微信公众号菜单配置功能
  • 添加百度收录SEO等
  • 添加博客页面广告接入,后台配置等
  • 博客首页多主题配置等

敬请期待。。。。。。。。。。。。。。。。。。

系统目录结构

前端项目位于blog-vue下,blog为前台,admin为后台。

后端项目位于blog-springboot下。

SQL文件位于根目录下的blog-mysql8.sql,需要MYSQL8以上版本。

可直接导入该项目于本地,修改后端配置文件中的数据库等连接信息,项目中使用到的关于阿里云功能和第三方授权登录等需要自行开通。

当你克隆项目到本地后可使用邮箱账号:admin@qq.com,密码:1234567 进行登录,也可自行注册账号并将其修改为admin角色。

本地访问接口文档地址:http://127.0.0.1:8080/doc.html

ps:请先运行后端项目,再启动前端项目,前端项目配置由后端动态加载。

blog-springboot
├── annotation    --  自定义注解
├── aspect        --  aop模块
├── config        --  配置模块
├── constant      --  常量模块
├── consumer      --  MQ消费者模块
├── controller    --  控制器模块
├── dao           --  框架核心模块
├── dto           --  dto模块
├── enums         --  枚举模块
├── exception     --  自定义异常模块
├── handler       --  处理器模块(扩展Security过滤器,自定义Security提示信息等)
├── service       --  服务模块
├── strategy      --  策略模块(用于扩展第三方登录,搜索模式,上传文件模式等策略)
├── util          --  工具类模块
└── vo            --  vo模块

项目特点

  • 前台参考"Hexo"的"Butterfly"设计,美观简洁,响应式体验好。
  • 后台参考"element-admin"设计,侧边栏,历史标签,面包屑自动生成。
  • 采用Markdown编辑器,写法简单。
  • 评论支持表情输入回复等,样式参考Valine。
  • 添加音乐播放器,支持在线搜索歌曲。
  • 前后端分离部署,适应当前潮流。
  • 接入第三方登录,减少注册成本。
  • 支持发布说说,随时分享趣事。
  • 留言采用弹幕墙,更加炫酷。
  • 支持代码高亮和复制,图片预览,深色模式等功能,提升用户体验。
  • 搜索文章支持高亮分词,响应速度快。
  • 新增文章目录、推荐文章等功能,优化用户体验。
  • 新增在线聊天室,支持撤回、语音输入、统计未读数量等功能。
  • 新增aop注解实现日志管理。
  • 支持动态权限修改,采用RBAC模型,前端菜单和后台权限实时更新。
  • 后台管理支持修改背景图片,博客配置等信息,操作简单,支持上传相册。
  • 代码支持多种搜索模式(Elasticsearch或MYSQL),支持多种上传模式(OSS或本地),可支持配置。
  • 代码遵循阿里巴巴开发规范,利于开发者学习。

技术介绍

前端: vue + vuex + vue-router + axios + vuetify + element + echarts

后端: SpringBoot + nginx + docker + SpringSecurity + Swagger2 + MyBatisPlus + Mysql + Redis + elasticsearch + RabbitMQ + MaxWell + Websocket

其他: 接入QQ,微博第三方登录,接入腾讯云人机验证、websocket

运行环境

服务器: 腾讯云2核4G CentOS7.6

CDN: 阿里云全站加速

对象存储: 阿里云OSS

这套搭配响应速度非常快,可以做到响应100ms以下。

最低配置: 1核2G服务器(关闭ElasticSearch)

开发环境

开发工具说明
IDEAJava开发工具IDE
VSCodeVue开发工具IDE
NavicatMySQL远程连接工具
Another Redis Desktop ManagerRedis远程连接工具
X-shellLinux远程连接工具
XftpLinux文件上传工具
开发环境版本
JDK1.8
MySQL8.0.20
Redis6.0.5
Elasticsearch7.9.2
RabbitMQ3.8.5

项目截图

img.png

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6JurMfTC-1669262768428)(https://static.talkxj.com/articles/1616255938601.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VQtrLikW-1669262768429)(https://static.talkxj.com/articles/1616231705373.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BZZOZq9O-1669262768429)(https://static.talkxj.com/articles/1616231714148.png)]

快速开始

项目环境安装

详见文章Docker安装运行环境

项目配置

详见文章项目配置教程

Docker部署项目

详见文章项目部署教程

注意事项

  • 项目拉下来运行后,可到后台管理页面网站配置处修改博客相关信息.
  • 邮箱配置,第三方授权配置需要自己申请。
  • ElasticSearch需要自己先创建索引,项目运行环境教程中有介绍。

项目总结

博客作为新手入门项目是十分不错的,项目所用的技术栈覆盖的也比较广,适合初学者学习。主要难点在于权限管理、第三方登录、websocket这块。做的不好的地方请大家见谅,有问题的或者有好的建议可以私聊联系我。

交流QQ

1055215129@qq.com

欢迎各位大佬发邮箱进行博客问题沟通,也欢迎各位去博客留言页进行留言,每一条留言我都会认真看并且回复,感谢支持!!!

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

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

相关文章

【附源码】计算机毕业设计JAVA忆居民宿管理

【附源码】计算机毕业设计JAVA忆居民宿管理 目运行 环境项配置: Jdk1.8 Tomcat8.5 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: JAVA mybati…

Yolov4 训练数据常见的问题

1.Failed to load module"canberra-gtk-module" 解决办法:安装对应的module sudo apt-get install libcanberra-gtk-module 2.Killed 注意:造成killed问题的可能性比较多,这里我只记录我是如何解决的 。 解决: 首先是…

膜拜,华为内部都在强推的783页大数据处理系统:Hadoop源代码pdf

前言 都说程序员工资高、待遇好, 2022 金九银十到了,你的小目标是 30K、40K,还是 16薪的 20K?作为一名 Java 开发工程师,当能力可以满足公司业务需求时,拿到超预期的 Offer 并不算难。然而,提升…

数据结构和常用排序算法复杂度

1.顺序表 插入操作时间复杂度 最好O(1),最坏O(n),平均O(n) 移动结点的平均次数n/2 删除操作时间复杂度 最好O(1),最坏O(n),平均O(n) 移动结点的平均次数(n-1)/2 按值查找时间复杂度 最好O(1),最坏O(n),平…

数据库DQL数据查询语言

文章目录DQL数据查询语言语法:基础查询语法:WHERE子句使用AND"与"和OR"或"来连接多个条件进行查询IN(列表):等于列表其中之一(在列表中)NOT IN(列表):不在列表中,不能等于列表中的所有项BETWEEN...AND...:在一个范围之内DISTINCT去重操作。在结…

01.一个页面为啥有四个进程

打开了1个页面,Chrome启动了4个进程 并行处理 计算机中的并行处理就是同一时刻处理多个任务,比如我们要计算下面这三个表达式的值,并显示出结果。 A 12 B 20/5 C 7*8在编写代码的时候,我们可以把这个过程拆分为四个任务&…

sqli-labs/Less-57

这一关还是有14次尝试机会的 而且还是以id作为注入点的 首先输入如下语句 id1 and 12 查看回显 属于字符型 接着判断一下属于单引号还是双引号 输入1 查看回显 正确回显 在尝试一下双引号 输入1" 回显如下 肯定存在双引号包裹 但是是否有括号呢 不得而知 接着佐证一…

大一学生HTML期末作业 【html体育羽毛球6页面带注册】学生网页设计作业源码

⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIVCSS 布局制作,HTMLCSS网页设计期末课程大作业 | 校园篮球网页设计 | 足球体育运动 | 体育游泳运动 | 兵乓球 | 网球 | 等网站的设计与制作 | HTML期末大学生网页设计作业 HTML:结构 CSS&…

【仿真建模】第五课:AnyLogic入门基础课程 - 地铁车站仿真讲解

文章目录一、新建模型二、修改相关属性三、OutPart 站外部分四、站内部分4.1 FirstFloor 第一层楼一、新建模型 新建模型,单位改为分钟 二、修改相关属性 修改比例尺 三、OutPart 站外部分 新建 OutPart 智能体类型 重命名为 OutPart 修改OutPart的比例尺为50&am…

【JVM】类加载机制:分析与验证

一、加载 将类的字节码载入方法区中,内部采用 C 的 instanceKlass 描述 java 类。它的重要 field 有: _java_mirror : java 的类镜像,例如对 String 来说,就是 String.class,作用是把 klass 暴露给 java 使…

直播预约|Flink + StarRocks 实时数据分析新范式

11月 26-27 日,Apache Flink (以下简称 Flink)社区官方技术大会 Flink Forward Asia 2022 将在线举行,聚集国内外一线厂商围绕 Flink 生态的生产实践经验进行分享。 本次大会上,StarRocks 将于 27 日 中午现身实时湖仓…

CSRF 漏洞学习笔记

什么是 CSRF 漏洞 CSRF(Cross Site Request Forgery,跨站请求伪造,也叫 XSRF)漏洞是由于未校验请求来源,导致攻击者可在第三方站点发起 HTTP 请求,并以受害者的目标网站登录态(cookie、session…

ImmunoChemistry艾美捷自噬试验,红色解决方案

ImmunoChemistry艾美捷ICT的自噬测定,红色使研究人员能够检测和监测活细胞中自噬的体外发育。自噬探针是细胞渗透性的,插入自噬体和自溶体的脂质膜时发出红色荧光。可以使用流式细胞仪读取结果。 自噬是一种保守的溶酶体循环过程,细胞通过该过…

Linux——文件描述符(fd)与重定向、dup/dup2

目录 一.文件描述符 (一).含义 (二).使用 (三).标准输入/输出/错误 二.重定向与dup/dup2 (一).dup/dup2 (二).重定向 一.文件描述符 (一…

MCE | 淀粉样蛋白沉积或是阿尔茨海默症发展“驱动者”

近日,Cell 在线发表的论文 “Spatial Transcriptomics and In Situ Sequencing to Study Alzheimer’s Disease” 中,研究团队在 AD 小鼠模型中,利用空间转录组学研究淀粉样斑块周围直径 100 μm 的组织结构域的转录变化,证明了丰…

Web(二)html5基础-文档头部(知识训练和编程训练)

web知识训练_html5_文档头部标签及属性 web编程训练_html5_文档头部 第1关_页面标题及字符集的设置 <!DOCTYPE html> <html> <head><!-- ********* Begin ********* --><meta charset"utf-8"><title>设置标题</title>&…

《传统文化典藏馆》前端模板

一个基于多种插件的前端二次开发——弘扬中华传统文化的前端模板&#xff0c;内容丰富&#xff0c;可做学习前端技术使用。 主要技术实现&#xff1a;HTML、CSS、JavaScript 下载链接&#xff1a; 弘扬中华传统文化前端模板-Javascript文档类资源-CSDN下载《传统文化典藏馆》…

图像分割 - 分水岭算法

目录 1. 介绍 2. 分水岭算法的实现 距离变换 连接连通分量 3. 代码 1. 介绍 图像是由x&#xff0c;y表示的&#xff0c;如果将灰度值也考虑进去的话&#xff0c;那么一幅图像需要一个三维的空间去表示。 这样就可以把x&#xff0c;y轴比作大地&#xff0c;将灰度值的z轴…

产品流程图设计

一个产品设计之初&#xff0c;必先从流程图做起&#xff0c;流程图可以用来表达产品各式各样的流程&#xff0c;好的流程图&#xff0c;可以快速让整个团队熟悉理解业务&#xff0c;并优化业务。 一、常用的流程图图标含义 流程图通常由起止框、处理框、流程线、判断框、输出输…

使用HTML制作静态网站 中国传统文化 丝绸之路 (学生网页设计作业源码)

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…