{"id":13486373,"url":"https://github.com/Naccl/NBlog","last_synced_at":"2025-03-27T20:33:07.991Z","repository":{"id":37442956,"uuid":"280652726","full_name":"Naccl/NBlog","owner":"Naccl","description":"🍓 Spring Boot + Vue 前后端分离博客系统 https://naccl.top","archived":false,"fork":false,"pushed_at":"2024-09-24T11:52:56.000Z","size":13542,"stargazers_count":2374,"open_issues_count":7,"forks_count":536,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-10-29T15:18:56.033Z","etag":null,"topics":["blog","jwt","mybatis","quartz","redis","springboot","springsecurity","vue"],"latest_commit_sha":null,"homepage":"https://naccl.top","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Naccl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-18T12:33:00.000Z","updated_at":"2024-10-29T12:35:28.000Z","dependencies_parsed_at":"2024-09-06T11:57:05.628Z","dependency_job_id":null,"html_url":"https://github.com/Naccl/NBlog","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Naccl%2FNBlog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Naccl%2FNBlog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Naccl%2FNBlog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Naccl%2FNBlog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Naccl","download_url":"https://codeload.github.com/Naccl/NBlog/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222313947,"owners_count":16965414,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blog","jwt","mybatis","quartz","redis","springboot","springsecurity","vue"],"created_at":"2024-07-31T18:00:44.790Z","updated_at":"2024-10-30T21:31:37.758Z","avatar_url":"https://github.com/Naccl.png","language":"Java","readme":"\u003cp align=\"center\"\u003e\n\t\u003ca href=\"https://naccl.top/\" target=\"_blank\"\u003e\n\t\t\u003cimg src=\"./pic/NBlog.png\" alt=\"NBlog logo\" style=\"width: 200px; height: 200px\"\u003e\n\t\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/JDK-1.8+-orange\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/SpringBoot-2.2.7.RELEASE-brightgreen\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/MyBatis-3.5.5-red\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Vue-2.6.11-brightgreen\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/license-MIT-blue\"\u003e\n\t\u003cimg src=\"https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2FNaccl%2FNBlog\u0026count_bg=%2344CC11\u0026title_bg=%23555555\u0026icon=notist.svg\u0026icon_color=%231296DB\u0026title=hits\u0026edge_flat=false\"\u003e\n\u003c/p\u003e\n\n\n\n\n## 简介\n\nSpring Boot + Vue「前后端分离，人不分离」博客系统\n\n自用博客，长期维护，欢迎勘误\n\n预览地址：\n\n前台：[https://naccl.top](https://naccl.top)\n\n后台：[https://admin.naccl.top](https://admin.naccl.top)\n\n\n\n## 后端\n\n1. 核心框架：[Spring Boot](https://github.com/spring-projects/spring-boot)\n2. 安全框架：[Spring Security](https://github.com/spring-projects/spring-security)\n3. Token：[jjwt](https://github.com/jwtk/jjwt)\n4. ORM 框架：[MyBatis](https://github.com/mybatis/spring-boot-starter)\n5. 分页插件：[PageHelper](https://github.com/pagehelper/Mybatis-PageHelper)\n6. NoSQL 缓存：[Redis](https://github.com/redis/redis)\n7. Markdown 转 HTML：[commonmark-java](https://github.com/commonmark/commonmark-java)\n8. 离线 IP 地址库：[ip2region](https://github.com/lionsoul2014/ip2region)\n9. 定时任务：[quartz](https://github.com/quartz-scheduler/quartz)\n10. UserAgent 解析：[yauaa](https://github.com/nielsbasjes/yauaa)\n\n\n\n邮件模板参考自 [Typecho-CommentToMail-Template](https://github.com/MisakaTAT/Typecho-CommentToMail-Template)\n\n\n\n## 前端\n\n核心框架：Vue2.x、Vue Router、Vuex\n\nVue 项目基于 @vue/cli4.x 构建\n\nJS 依赖及参考的 css：[axios](https://github.com/axios/axios)、[moment](https://github.com/moment/moment)、[nprogress](https://github.com/rstacruz/nprogress)、[v-viewer](https://github.com/fengyuanchen/viewerjs)、[prismjs](https://github.com/PrismJS/prism)、[APlayer](https://github.com/DIYgod/APlayer)、[MetingJS](https://github.com/metowolf/MetingJS)、[lodash](https://github.com/lodash/lodash)、[mavonEditor](https://github.com/hinesboy/mavonEditor)、[echarts](https://github.com/apache/echarts)、[tocbot](https://github.com/tscanlin/tocbot)、[iCSS](https://github.com/chokcoco/iCSS)\n\n**由 [@willWang8023](https://github.com/willWang8023) 维护的 Vue3 版本请查看 [blog-view-vue3](https://github.com/willWang8023/blog-view-vue3)**\n\n\n\n### 后台 UI\n\n后台基于 [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template) 二次修改后的 [my-vue-admin-template](https://github.com/Naccl/my-vue-admin-template) 模板进行开发（[于2021年11月1日重构](https://github.com/Naccl/NBlog/commit/b33641fe34b2bed34e8237bacf67146cd64be4cf)）\n\nUI 框架为 [Element UI](https://github.com/ElemeFE/element)\n\n\n\n### 前台 UI\n\n[Semantic UI](https://semantic-ui.com/)：主要使用，页面布局样式，个人感觉挺好看的 UI 框架，比较适合前台界面的开发，语义化的 css，前一版博客系统使用过，可惜该框架 Vue 版的开发完成度不高，见 [Semantic UI Vue](https://semantic-ui-vue.github.io/#/)\n\n[Element UI](https://github.com/ElemeFE/element)：部分使用，一些小组件，弥补了 Semantic UI 的不足，便于快速实现效果\n\n文章排版：基于 [typo.css](https://github.com/sofish/typo.css) 修改\n\n\n\n## Telegram Bot 快捷操作\n\n| 桌面                                                         | Phone                                                        | Phone                                                        |\n| ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |\n| ![桌面客户端效果图](./pic/TelegramBot.png \"桌面客户端效果图\") | ![手机客户端效果图1](./pic/TgBotPhone1.png \"手机客户端效果图1\") | ![手机客户端效果图2](./pic/TgBotPhone2.png \"手机客户端效果图2\") |\n\n若要启用该功能，参考以下步骤：\n\n1. 向 @BotFather 申请一个 Bot，得到该 Bot 的`token`，格式如`1234567890:qwertyuiopasdfghjklzxcvbnm`\n2. 与该 Bot 私聊，随便发个消息，然后打开此链接`https://api.telegram.org/bot\u003cbotToken\u003e/getUpdates`（替换链接中的 token），在`result -\u003e message -\u003e chat -\u003e id`得到`chatId`\n3. 将获取的`token`和`chatId`填入`application-dev.properties`，并启用`comment.notify.channel=tg`\n4. 由于目前仅提供 webhook 的方式获取消息更新，所以`application-dev.properties`中的`blog.api`需要填写后端 API 的地址，并且**必须是`https`(Telegram 的要求)**，也就是说如果你没有公网 IP 或内网穿透或反向代理，那么在本地环境是无法测试的，建议直接扔服务器上\n5. 国内通常情况下无法访问 TG 的 API，因此提供了两种方式\n   1. 正向代理：配置`http.proxy.server`，通过你的代理发送请求\n   2. 反向代理：可以直接使用我跑在 Cloudflare Workers 上的反代，默认配置即可。示例代码已放在`blog-api/cfworker-tg-api-open.js`，可自行搭建（**22.05.12 更新，近两天大陆绝大多数地区 `*.workers.dev` 域名已被墙，因此若仍想使用此反代方式访问 cf worker，需要将 Worker 绑定路由至自己的域名，详见[相关讨论](https://github.com/XIU2/CloudflareSpeedTest/issues/205)**）\n\n\n\n## 开发环境\n\n1. 创建 MySQL 数据库`nblog`，并执行`/blog-api/nblog.sql`初始化表数据\n2. 修改配置信息`/blog-api/src/main/resources/application-dev.properties`\n3. 安装 Redis 并启动\n4. 启动后端服务\n5. 分别在`blog-cms`和`blog-view`目录下执行`npm install`安装依赖\n6. 分别在`blog-cms`和`blog-view`目录下执行`npm run serve`启动前后台页面\n\n\n\n## 注意事项\n\n一些常见问题：\n\n- MySQL 确保数据库字符集为`utf8mb4`（”站点设置“及”文章详情“等许多表字段需要`utf8mb4`格式字符集来支持 emoji 表情，否则在导入 sql 文件时，即使成功导入，也会有部分字段内容不完整，导致前端页面渲染数据时报错）\n- 确保 Maven 和 NPM 能够成功导入现版本依赖，请勿升级或降低依赖版本\n- 数据库中默认用户名密码为`Admin`，`123456`，因为是个人博客，没打算做修改密码的页面，可在`top.naccl.util.HashUtils`下的`main`方法手动生成密码存入数据库\n- 注意修改`application-dev.properties`的配置信息\n  - 注意修改`token.secretKey`，否则无法保证 token 安全性\n  - `spring.mail.host`及`spring.mail.port`的默认配置为阿里云邮箱，其它邮箱服务商参考关键字`spring mail 服务器`（邮箱配置用于接收/发送评论提醒）\n- 如需部署，注意将`/blog-view/src/plugins/axios.js`和`/blog-cms/src/util/request.js`中的`baseUrl`修改为你的后端 API 地址\n- 大部分个性化配置可以在后台“站点设置”中修改，小部分由于考虑到首屏加载速度（如首页大图）需要修改前端源码\n\n\n\n## 隐藏功能\n\n- 在前台访问`/login`路径登录后，可以以博主身份（带有博主标识）回复评论，且不需要填写昵称和邮箱即可提交\n- 在 Markdown 中加入`\u003cmeting-js server=\"netease\" type=\"song\" id=\"歌曲id\" theme=\"#25CCF7\"\u003e\u003c/meting-js\u003e` （注意以正文形式添加，而不是代码片段）可以在文章中添加 [APlayer](https://github.com/DIYgod/APlayer) 音乐播放器，`netease`为网易云音乐，其它配置及具体用法参考 [MetingJS](https://github.com/metowolf/MetingJS)\n- 提供了两种隐藏文字效果：在 Markdown 中使用`@@`包住文字，文字会被渲染成“黑幕”效果，鼠标悬浮在上面时才会显示；使用`%%`包住文字，文字会被“蓝色覆盖层”遮盖，只有鼠标选中状态才会反色显示。例如：`@@隐藏文字@@`，`%%隐藏文字%%`\n\n\n\n## LICENSE\n\n[MIT](https://github.com/Naccl/NBlog/blob/master/LICENSE)\n\n\n\n## Thanks\n\n感谢 [JetBrains](https://www.jetbrains.com/?from=NBlog) 提供的 Open Source License\n\n感谢上面提到的每个开源项目\n","funding_links":[],"categories":["Java"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNaccl%2FNBlog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FNaccl%2FNBlog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNaccl%2FNBlog/lists"}