本着『前后端分离,人不分离』的要领,开发了此基于 Spring Boot + Vue 前后端分离博客系统
预览地址:
后台:https://admin.naccl.top 账号Visitor
密码123456
- 核心框架:Spring Boot
- 安全框架:Spring Security
- Token 认证:jjwt
- 持久层框架:MyBatis
- 分页插件:PageHelper
- NoSQL缓存:Redis
- Markdown 转 HTML:commonmark-java
- 离线 IP 地址库:ip2region
- 定时任务:quartz
- UserAgent 解析:yauaa
邮件模板参考自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、echarts、tocbot、iCSS
后台 CMS 部分基于 vue-admin-template 二次修改后的 my-vue-admin-template 模板进行开发(于2021年11月1日重构过一次,重构 commit)
UI 框架为 Element UI
Semantic UI:主要使用,页面布局样式,个人感觉挺好看的 UI 框架,比较适合前台界面的开发,语义化的 css,前一版博客系统使用过,可惜该框架 Vue 版的开发完成度不高,见 Semantic UI Vue
Element UI:部分使用,一些小组件,弥补了 Semantic UI 的不足,便于快速实现效果
文章排版:基于 typo.css 修改
- 创建 MySQL 数据库
nblog
,并执行/blog-api/nblog.sql
初始化表数据 - 修改配置信息
blog-api/src/main/resources/application-dev.properties
- 安装 Redis 并启动
- 启动后端服务
- 分别在
blog-cms
和blog-view
目录下执行npm install
安装依赖 - 分别在
blog-cms
和blog-view
目录下执行npm run serve
启动前后台页面
最近逐渐有些小伙伴关注此项目,表示不知如何部署,或部署过程中有一些问题不知如何解决,在这里把过程中可能遇到的一些问题描述一下:
- 本人使用的 MySQL 版本为 8.x,5.x 版本未经测试,但确保数据库字符集为
utf8mb4
的情况下通常没有问题(”站点设置“及”文章详情“等许多表字段需要utf8mb4
格式字符集来支持emoji表情,否则在导入 sql 文件时,即使成功导入,也会有部分字段内容不完整,导致前端页面渲染数据时报错) - 确保 Maven 能够成功导入现版本依赖(已知 yauaa 依赖在用更高版本替换后,以现在的写法运行会报错)
- 数据库中默认用户名密码为
Admin
,123456
,因为是个人博客,没打算做修改密码的页面,可在top.naccl.util.HashUtils
下的main
方法手动生成密码存入数据库 - 注意修改
application-dev.properties
的配置信息- 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 中使用
@@
包住文字,文字会被渲染成“黑幕”效果,鼠标悬浮在上面时才会显示;使用%%
包住文字,文字会被“蓝色覆盖层”遮盖,只有鼠标选中状态才会反色显示。例如:@@隐藏文字@@
,%%隐藏文字%%
- 大部分个性化配置可以在后台“站点设置”中修改,小部分由于考虑到首屏加载速度(如首页大图)需要修改前端源码,通过 IDE 全局查找应该可以很快定位
由于一些技术是现学现用的,难免有些考虑不周,望大佬们能够指出错误
自用博客,长期维护,欢迎勘误
感谢 JetBrains 提供的非商业开源软件 License
此项目本是学习过程中的产物,参考了许多优秀的教程和项目,由于比较零散,难以统计,如大佬能看到此,请及时与我联系,以便表示感谢