/RBlog

基于springboot + vue 实现的博客网站

Primary LanguageJavaMIT LicenseMIT

raxcl-blog

简介

为了拥有一个属于自己的网站，基于springboot + vue 开发了前后端分离博客系统

待更新功能

部署教程，一键docker部署等功能

更新功能

  1. mysql数据库持久化：每天定时任务将mysql备份至七牛云
  2. 图床改为腾讯云的cos，腾讯云cdn加持（免费cdn国内凉了，改为使用付费，不过还好不算贵，一个月不到 1RMB）
  3. 更新 ip2region 版本，以及相关方法
  4. 升级 pox.xml 旧的依赖

博客预览

博客地址：https://raxcl.cn

后台管理平台：https://admin.raxcl.cn 账号Visitor密码666666

博客上线部署过程可以参考：https://blog.csdn.net/RAXCL/article/details/121276028

本项目长期维护，欢迎fork代码和star！。

快速开始

  1. 创建 MySQL 数据库r_blog，并执行/blog-api/r_blog.sql初始化表数据
  2. 安装 Redis、mysql 并启动
  3. 修改配置信息blog-api/src/main/resources/application.yml,需要修改必要配置信息
  4. 启动后端服务
  5. 分别在blog-cms和blog-view目录下执行npm install安装依赖
  6. 分别在blog-cms和blog-view目录下执行npm run serve启动前后台页面

部署

方式一：部署教程：https://blog.csdn.net/RAXCL/article/details/121276028 方式二：详见 项目 docker 和 docker-web 文件夹，感谢 @nanshaws 提供

新增的功能

vue-live2d

logo

后端

  1. 核心框架：Spring Boot
  2. 安全框架：Spring Security
  3. Token 认证：jjwt
  4. 持久层框架：MyBatis
  5. 分页插件：PageHelper
  6. NoSQL缓存：Redis
  7. Markdown 转 HTML：commonmark-java
  8. 离线 IP 地址库：ip2region
  9. 定时任务：quartz

邮件模板参考自Typecho-CommentToMail-Template

基于 JDK8 开发，8以上要添加依赖：

<dependency>
    <groupId>javax.xml.bind</groupId>
    <artifactId>jaxb-api</artifactId>
    <version>2.3.0</version>
</dependency>

前端

核心框架：Vue2.x、Vue Router、Vuex

Vue 项目基于 @vue/cli4.x 构建

JS 依赖及参考的 css：axios、moment、nprogress、v-viewer、prismjs、APlayer、MetingJS、lodash、mavonEditor、vue-live2d、jinrishici

注意事项

一些常见问题：

  • MySQL 确保数据库字符集为utf8mb4的情况下通常没有问题（”站点设置“及”文章详情“等许多表字段需要utf8mb4格式字符集来支持 emoji 表情，否则在导入 sql 文件时，即使成功导入，也会有部分字段内容不完整，导致前端页面渲染数据时报错）
  • 确保 Maven 能够成功导入现版本依赖，请勿升级或降低依赖版本
  • 数据库中默认用户名密码为Admin，123456，因为是个人博客，没打算做修改密码的页面，可在top.naccl.util.HashUtils下的getBc方法手动生成密码存入数据库
  • 注意修改application-dev.yml的配置信息
    • Redis 若没有密码，留空即可
    • 注意修改token.secretKey，否则无法保证 token 安全性
    • spring.mail.host及spring.mail.port的默认配置为阿里云邮箱，其它邮箱服务商参考关键字spring mail 服务器（邮箱配置用于接收评论提醒）

隐藏功能

  • 在前台访问/login路径登录后，可以以博主身份（带有博主标识）回复评论，且不需要填写昵称和邮箱即可提交
  • 在 Markdown 中加入<meting-js server="netease" type="song" id="歌曲id" theme="#25CCF7"></meting-js> （注意以正文形式添加，而不是代码片段）可以在文章中添加 APlayer 音乐播放器，netease为网易云音乐，其它配置及具体用法参考 MetingJS
  • 提供了两种隐藏文字效果：在 Markdown 中使用@@包住文字，文字会被渲染成“黑幕”效果，鼠标悬浮在上面时才会显示；使用%%包住文字，文字会被“蓝色覆盖层”遮盖，只有鼠标选中状态才会反色显示。例如：@@隐藏文字@@，%%隐藏文字%%
  • 大部分个性化配置可以在后台“站点设置”中修改，小部分由于考虑到首屏加载速度（如首页大图）需要修改前端源码

致谢

感谢码神的视频让我学会如何构建和部署一个博客，重构美化过程也参考了很多大佬的博客，如NBlog、SKyBlog 等等...

感谢上面提到的每个开源项目