用一个月的时间写一个自己的博客系统——Grtblog的技术介绍
AI Summary
代码如星斗织梦,Bug 似迷雾缠身
终见破晓启新章,全栈之路始成真
项目总览
作者历时月余重构个人博客系统,完成首个全栈中型项目(Github | 文档),融合复杂业务逻辑与用户体验优化。系统采用 Next.js 实现 SSG/SSR 混合渲染以平衡 SEO 与性能,后端基于 Spring Boot 生态(含微服务与权限管理),推荐算法通过 FastAPI + Word2Vec 实现,搜索依赖 ElasticSearch,中台管理选用 Umi.js + Ant Design Pro。
技术亮点
- 实时在线统计:通过
socket.io
监听页面事件,Java 后端动态管理聊天室,TS 前端同步人数状态,后因 CDN 问题修复(2025-01-05 更新)。 - 动态标签云:结合
framer-motion
动画库与随机算法,实现流动标签背景效果,代码简洁却富有表现力。 - 架构设计:前后端分离,数据库暂用 MySQL(计划迁移至 PostgreSQL),注重缓存策略以降低服务器压力。
挑战与展望
- 现存问题:WebSocket 性能波动、推荐逻辑待完善、移动端适配需优化。
- 踩坑记录:水合不匹配、OAuth2 集成、Next.js 代理配置等难题已整理为后续更新内容。
- 成长印记:从“玩具项目”到独立完成复杂系统,作者在技术深度与工程思维上实现跨越,未来志于深耕前端领域。
代码铸就星辰海,步履不停向光行
纵有千坑犹未惧,且将热血化长明
终于,历时一个多月的开发 bug 和测试,这个目前问题很多很不成熟很难用的系统终于上线了...也了结了我一直以来重构这个网站的小愿望,算是我的第一个全栈中小型项目,之前的感觉大多都是小型玩具项目,虽然也给学校学了好多项目,有几万用户和几千并发,但是这次算是略微复杂的业务逻辑,还要考虑用户体验,尤其是我还为了这个才学得怎么用 Next.js
(更新于2025-01-05,socket果然是cdn的问题,已经能正常用了
写在前面
总之就是,它还是如愿成功上线了,也证明这个我曾经天马行空的想法是可以实现的。目前还仍旧有许多问题,比如 WebSocket 似乎由于性能问题无法正常工作(在启用 ES 的第二天就出问题了,感觉是性能问题),点赞和推荐的逻辑还没有想好怎么实现,推荐只是留了接口还没有正式应用...开发的过程中遇到的问题还是很多的,接下来考虑慢慢更新一些,如果你也遇到了相关问题不妨看看我帮你踩好的坑。
技术选择
这是一个开源项目,地址在 Github
,我会长期进行维护。文档在grtblog
它采用了前后端分离的方式进行开发,
为了平衡 SSG 和 SSR 的优势,我选择了 Next.js 框架用于构建用户界面。这样可以在构建初期对于一些不频繁变更的内容生成静态页面,当然也可以增量生成。对于动态内容较多的页面也会采取 SSR 来保证内容网站的 SEO 完整,此外,构建页面时的请求结构能够被缓存,这样既能加速构建,也能减轻服务器压力。
后端方面采用了生态极佳性能也比较优秀的 Spring Boot,权限采用 Spring Security,使用 Spring Cloud 调用周边微服务等等,数据库选择了 mysql,后期计划迁移到我更偏爱的 postgresql
对于用户推荐部分,我用 word2vector 简单弄了一个推荐算法,使用 FastAPI,由主框架使用 API 调用;搜索则使用 ElasticSearch 实现,由主框架调用。
中台管理为了方便目前选择的阿里的 Umi.js + Ant Design Pro
一些细节
实时在线人数
悲,首先这个不知道为什么用不了了
这个采用了socket.io实现,原理就是加入聊天室传递信息,每次链接会发送消息,用定时任务防抖一下就好
其后端核心代码是这样,在用户进入页面发送enterpage事件,根据其传递的URI匹配页面并创建聊天室
而前端部分就是加入并获取信息咯
借助socketio的自定义事件就可以传递页面和人数的信息
标签云实现
说实话这个还挺好玩的,利用的是framer-motion这个库实现的动画,然后排版一下实现的效果
它的组成就是单个项目形成一行,反复渲染每一行直到填满区域
单个项目就简单设计就好
然后我们为其传递随机的图标和标签不够随机来凑的标签内容
对于左右半的内容使用一个isLeft来区分
最后利用数组方法来传递参数,渲染满区域~
简要总结与挖坑
这个项目可能还是入门项目吧..但是从设计到独立完成花费我的精力还是蛮多的,接下来会连续更新讲讲我这个项目的过程遇到的一系列问题
包括但不限于
水合不匹配问题,OAauth2实现,RSC的主题切换问题,移动端适配实现,推荐算法的简单实现,Nextjs的痛苦开发代理服务器问题,反代 301优化SEO问题,静态资源路径问题
一份学习一分收获吧,虽然现在我还很菜,但是还是不断学习不断进步
希望自己能成为独当一面的前端工程师,在热爱的领域闪闪发光,仅此而已