/NBlog

🍓 Spring Boot + Vue 前后端分离博客系统 https://naccl.top

Primary LanguageJavaMIT LicenseMIT

NBlog logo

简介

本着『前后端分离，人不分离』的要领，开发了此基于 Spring Boot + Vue 前后端分离博客系统

预览地址：

前台：https://naccl.top

后台：https://admin.naccl.top 账号Visitor密码123456

后端

  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
  10. 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

后台 UI

后台 CMS 部分基于 vue-admin-template 二次修改后的 my-vue-admin-template 模板进行开发（于2021年11月1日重构过一次，重构 commit）

UI 框架为 Element UI

前台 UI

Semantic UI：主要使用，页面布局样式，个人感觉挺好看的 UI 框架，比较适合前台界面的开发，语义化的 css，前一版博客系统使用过，可惜该框架 Vue 版的开发完成度不高，见 Semantic UI Vue

Element UI：部分使用，一些小组件，弥补了 Semantic UI 的不足，便于快速实现效果

文章排版：基于 typo.css 修改

快速开始

  1. 创建 MySQL 数据库nblog，并执行/blog-api/nblog.sql初始化表数据
  2. 修改配置信息blog-api/src/main/resources/application-dev.properties
  3. 安装 Redis 并启动
  4. 启动后端服务
  5. 分别在blog-cms和blog-view目录下执行npm install安装依赖
  6. 分别在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 全局查找应该可以很快定位

And...

由于一些技术是现学现用的，难免有些考虑不周，望大佬们能够指出错误

自用博客，长期维护，欢迎勘误

致谢

感谢 JetBrains 提供的非商业开源软件 License

此项目本是学习过程中的产物，参考了许多优秀的教程和项目，由于比较零散，难以统计，如大佬能看到此，请及时与我联系，以便表示感谢