NBlog：Spring Boot + Vue 前后端分离博客系统
NBlog 是一个基于 Spring Boot 与 Vue2 的前后端分离个人博客系统，后端采用 Spring Security、jjwt、MyBatis、Redis、commonmark-java、ip2region、quartz、yauaa 等组件，前端由 Vue2.x + Vue Router + Vuex 构建，后台基于 vue-admin-template 二次修改的 my-vue-admin-template 模板并使用 Element UI，前台以 Semantic UI 为主、Element UI 为辅。项目自用并长期维护，采用 MIT 许可证，支持 Markdown 文章、评论邮件提醒、Telegram Bot 快捷操作以及黑幕、蓝色遮盖层等隐藏文字效果。
社区作者 · zZz
它解决什么问题
NBlog 是一个「前后端分离，人不分离」的博客系统，由作者自用并长期维护，欢迎勘误。
预览地址：前台 https://naccl.top ，后台 https://admin.naccl.top 。
后端技术栈：核心框架 Spring Boot；安全框架 Spring Security；Token 使用 jjwt；ORM 框架 MyBatis；分页插件 PageHelper；NoSQL 缓存 Redis；Markdown 转 HTML 使用 commonmark-java；离线 IP 地址库 ip2region；定时任务 quartz；UserAgent 解析 yauaa。邮件模板参考自 Typecho-CommentToMail-Template。
前端技术栈：核心框架 Vue2.x、Vue Router、Vuex；Vue 项目基于 @vue/cli4.x 构建；JS 依赖及参考的 css 包括 axios、moment、nprogress、v-viewer、prismjs、APlayer、MetingJS、lodash、mavonEditor、echarts、tocbot、iCSS。由 @willWang8023 维护的 Vue3 版本为 blog-view-vue3。
界面方案：后台基于 vue-admin-template 二次修改后的 my-vue-admin-template 模板开发（于 2021 年 11 月 1 日重构），UI 框架为 Element UI；前台主要使用 Semantic UI 负责页面布局样式，部分小组件使用 Element UI 弥补 Semantic UI 的不足；文章排版基于 typo.css 修改。
Telegram Bot 快捷操作：支持桌面端与手机端（配图 2 为桌面客户端效果图，配图 3、配图 4 为手机客户端效果图）。
隐藏功能：在前台访问 /login 路径登录后，可以以博主身份（带有博主标识）回复评论，且不需要填写昵称和邮箱即可提交；在 Markdown 中加入 <meting-js server="netease" type="song" id="歌曲id" theme="#25CCF7"></meting-js>（注意以正文形式添加，而不是代码片段）可在文章中添加 APlayer 音乐播放器，netease 为网易云音乐，其它配置及具体用法参考 MetingJS；提供两种隐藏文字效果：用 @@ 包住文字会渲染成“黑幕”，鼠标悬浮才显示，用 %% 包住文字会被“蓝色覆盖层”遮盖，只有鼠标选中状态才反色显示。
项目配图：配图 1 为 NBlog logo。
— 本文由 AI 根据公开来源辅助整理，命令、版本与许可证请在使用前到原始页面复核。
安装 / 开始使用
开发环境准备与启动步骤（按来源顺序）：
- 创建 MySQL 数据库 nblog，并执行 /blog-api/nblog.sql 初始化表数据。
- 修改配置信息 /blog-api/src/main/resources/application-dev.properties（数据库、Redis、token.secretKey、spring.mail.host/port 等均在此文件）。
- 安装 Redis 并启动。
- 启动后端服务。
步骤 5 · 分别在 blog-cms 和 blog-view 目录下执行
npm install 安装依赖。
步骤 6 · 分别在 blog-cms 和 blog-view 目录下执行
npm run serve 启动前后台页面。
Telegram Bot 快捷操作启用步骤：
- 向 @BotFather 申请一个 Bot，得到该 Bot 的 token，格式如 1234567890:qwertyuiopasdfghjklzxcvbnm。
- 与该 Bot 私聊，随便发个消息，然后打开链接 https://api.telegram.org/bot<botToken>/getUpdates （替换链接中的 token），在 result -> message -> chat -> id 得到 chatId。
- 将获取的 token 和 chatId 填入 application-dev.properties，并启用 comment.notify.channel=tg。
- 由于目前仅提供 webhook 的方式获取消息更新，application-dev.properties 中的 blog.api 需要填写后端 API 的地址，并且必须是 https（Telegram 的要求），也就是说如果本地没有公网 IP 或内网穿透或反向代理，在本地环境无法测试，建议直接部署到服务器。
- 国内通常无法访问 TG 的 API，来源提供两种方式：正向代理——配置 http.proxy.server，通过你的代理发送请求；反向代理——可直接使用作者跑在 Cloudflare Workers 上的反代，默认配置即可，示例代码已放在 blog-api/cfworker-tg-api-open.js，可自行搭建（22.05.12 更新：近两天大陆绝大多数地区 *.workers.dev 域名已被墙，若仍想使用此反代方式访问 cf worker，需要将 Worker 绑定路由至自己的域名）。
注意事项与常见问题：
- MySQL 确保数据库字符集为 utf8mb4（“站点设置”及“文章详情”等许多表字段需要 utf8mb4 格式字符集才能支持 emoji 表情，否则导入 sql 文件时即使成功导入，也会有部分字段内容不完整，导致前端页面渲染数据时报错）。
- 确保 Maven 和 NPM 能够成功导入现版本依赖，请勿升级或降低依赖版本。
- 数据库中默认用户名密码为 Admin、123456；因为是个人博客，没打算做修改密码的页面，可在 top.naccl.util.HashUtils 下的 main 方法手动生成密码存入数据库。
- 注意修改 application-dev.properties 的配置信息。
- 注意修改 token.secretKey，否则无法保证 token 安全性。
- spring.mail.host 及 spring.mail.port 的默认配置为阿里云邮箱，其它邮箱服务商参考关键字 spring mail 服务器（邮箱配置用于接收/发送评论提醒）。
- 如需部署，注意将 /blog-view/src/plugins/axios.js 和 /blog-cms/src/util/request.js 中的 baseUrl 修改为你的后端 API 地址。
- 大部分个性化配置可以在后台“站点设置”中修改，小部分由于考虑到首屏加载速度（如首页大图）需要修改前端源码。
