Spring Boot + Vue「å‰åŽç«¯åˆ†ç¦»ï¼Œäººä¸åˆ†ç¦»ã€åšå®¢ç³»ç»Ÿ
自用åšå®¢ï¼Œé•¿æœŸç»´æŠ¤ï¼Œæ¬¢è¿Žå‹˜è¯¯
预览地å€ï¼š
å‰å°ï¼š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：主è¦ä½¿ç”¨ï¼Œé¡µé¢å¸ƒå±€æ ·å¼ï¼Œä¸ªäººæ„Ÿè§‰æŒºå¥½çœ‹çš„ UI 框架，比较适åˆå‰å°ç•Œé¢çš„å¼€å‘，è¯ä¹‰åŒ–çš„ css，å‰ä¸€ç‰ˆåšå®¢ç³»ç»Ÿä½¿ç”¨è¿‡ï¼Œå¯æƒœè¯¥æ¡†æž¶ Vue 版的开å‘完æˆåº¦ä¸é«˜ï¼Œè§ Semantic UI Vue
Element UI：部分使用，一些å°ç»„件，弥补了 Semantic UI çš„ä¸è¶³ï¼Œä¾¿äºŽå¿«é€Ÿå®žçŽ°æ•ˆæžœ
æ–‡ç« æŽ’ç‰ˆï¼šåŸºäºŽ typo.css 修改
| æ¡Œé¢ | Phone | Phone |
|---|---|---|
è‹¥è¦å¯ç”¨è¯¥åŠŸèƒ½ï¼Œå‚考以下æ¥éª¤ï¼š
- å‘ @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 - 由于目å‰ä»…æ
84C3
ä¾› 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 æ•°æ®åº“
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 ç¡®ä¿æ•°æ®åº“å—符集为
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 åœ°å€ - 大部分个性化é…ç½®å¯ä»¥åœ¨åŽå°â€œç«™ç‚¹è®¾ç½®â€ä¸ä¿®æ”¹ï¼Œå°éƒ¨åˆ†ç”±äºŽè€ƒè™‘到首å±åŠ 载速度（如首页大图）需è¦ä¿®æ”¹å‰ç«¯æºç
- 在å‰å°è®¿é—®
/login路径登录åŽï¼Œå¯ä»¥ä»¥åšä¸»èº«ä»½ï¼ˆå¸¦æœ‰åšä¸»æ ‡è¯†ï¼‰å›žå¤è¯„论，且ä¸éœ€è¦å¡«å†™æ˜µç§°å’Œé‚®ç®±å³å¯æ交 - 在 Markdown ä¸åŠ å…¥
<meting-js server="netease" type="song" id="æŒæ›²id" theme="#25CCF7"></meting-js>（注æ„以æ£æ–‡å½¢å¼æ·»åŠ ，而ä¸æ˜¯ä»£ç 片段）å¯ä»¥åœ¨æ–‡ç« ä¸æ·»åŠ APlayer 音ä¹æ’放器，netease为网易云音ä¹ï¼Œå…¶å®ƒé…ç½®åŠå…·ä½“用法å‚考 MetingJS - æ供了两ç§éšè—æ–‡å—效果：在 Markdown ä¸ä½¿ç”¨
@@包ä½æ–‡å—，文å—会被渲染æˆâ€œé»‘幕â€æ•ˆæžœï¼Œé¼ æ ‡æ‚¬æµ®åœ¨ä¸Šé¢æ—¶æ‰ä¼šæ˜¾ç¤ºï¼›ä½¿ç”¨%%包ä½æ–‡å—，文å—会被“è“色覆盖层â€é®ç›–，åªæœ‰é¼ æ ‡é€‰ä¸çŠ¶æ€æ‰ä¼šå色显示。例如：@@éšè—æ–‡å—@@，%%éšè—æ–‡å—%%
æ„Ÿè°¢ JetBrains æ供的 Open Source License
感谢上é¢æ到的æ¯ä¸ªå¼€æºé¡¹ç›®