![Cover](/_next/image?url=https%3A%2F%2Fahdark-blog-old-attachments.ahdark.net%2Fuploads%2F2022%2F05%2F20220509185344573.png&w=3840&q=75)
记录一次自建短链接系统
序
4月9日,我注册了 ahd.im 域名并打算以此为基础搭建短链接系统。
但当我在 GitHub 等平台搜索了一圈,却没有找到令我满意的作品。
大多数UI丑陋或是算法效率低下,难以满足我的愿景,因此我决定着手写一套自己的短链接系统。
选择
这是我第一次独立完成一套全栈系统,其摸索的过程自然会为我全栈开发能力积累经验。因此,选择一套高效、高兼容、普适的技术栈自然是极为重要的一步。
后端
对于后端,最重要的是保证代码质量和执行效率。
PHP 效率太低,代码混乱,不被我欣赏。
ExpressJS 不适合写较大的系统应用,其并发也不强,且代码中同步异步容易混乱。
Golang 尽管性能较强,但不符合我的代码习惯。
C++ 应该就没有一个能用的Web开发框架。
最后,我选择了使用 Java Spring Boot 框架撰写后端功能,使用 MyBatis + MySQL 进行数据控制。
前端
前端便没有那么多选择了。
jQuery 我不是很熟悉,且当今时代高级前端框架林立,我没有理由选择一个即将被时代淘汰的框架。
Vue 我不喜欢,就没学。
AngularJS 我学了,但还是不喜欢。
React 我很喜欢。
于是,前端框架的选择就轻松地完成了。
UI
对于用户端,看了许多公众号文章,发现了阿里的 Ant Design 似乎很不错,于是便选用了 Ant Design 。
对于管理端,因为我实在没有想象力,不知道 Ant Design 如何设计,而且没有学习时间(实际上就是没心情研究了),就用回了 Material UI。
技术栈
由上,我确定了我开发所需的技术栈:
- 前端
- React
- TypeScript
- Ant Design
- Matarial UI
- 后端
- Spring Boot
- MyBatis
- 数据
- MySQL
开发
因为一模的原因,拖到了5月初才开始进行开发工作。学习 Ant Design 的函数、功能,Java 语法和 Spring Boot 使用也耗费了不少时间。
大约是一周以后,我正式着手进行 AHdark/Link 的 Development Progress 。
![Image](/_next/image?url=https%3A%2F%2Fahdark-blog-old-attachments.ahdark.net%2Fuploads%2F2022%2F05%2F20220509173127920.png&w=1920&q=75)
后端
![Image](/_next/image?url=https%3A%2F%2Fahdark-blog-old-attachments.ahdark.net%2Fuploads%2F2022%2F05%2F20220509173154287.png&w=1920&q=75)
后端
![Image](/_next/image?url=https%3A%2F%2Fahdark-blog-old-attachments.ahdark.net%2Fuploads%2F2022%2F05%2F20220509173141256.png&w=1920&q=75)
后端
![Image](/_next/image?url=https%3A%2F%2Fahdark-blog-old-attachments.ahdark.net%2Fuploads%2F2022%2F05%2F20220509173216337.png&w=1920&q=75)
后端
![Image](/_next/image?url=https%3A%2F%2Fahdark-blog-old-attachments.ahdark.net%2Fuploads%2F2022%2F05%2F20220509173319504.png&w=1920&q=75)
前端
![Image](/_next/image?url=https%3A%2F%2Fahdark-blog-old-attachments.ahdark.net%2Fuploads%2F2022%2F05%2F20220509173334624.png&w=1920&q=75)
前端
![Image](/_next/image?url=https%3A%2F%2Fahdark-blog-old-attachments.ahdark.net%2Fuploads%2F2022%2F05%2F20220509173353953.png&w=1920&q=75)
前端
前后端分离并同时进行开发,自然需要在本地和测试服务器进行诸多配置。
我使用的 IntelliJ Idea 高效地适配了 Java 和 React 开发,使得我可以在一个专业编辑器上同时进行前后端的开发。
高效的 Idea 编辑器也使得我代码中极少出现错误,减少了反复编译的次数。
不要小看 idea 的内存占用,随便写几行代码就破 4GB 了,真不是个正常玩意。
前端通过 Git Submodule 内嵌于后端项目目录中,尽管在每天晚上需要进行 Sync Commit 修改后端保存的前端Git版本以保证前后端一致性,但仍确保了项目一致性和开发稳定性。
模块化
模块化开发可以使得我的开发进程更加规律化,避免因某一功能的修改引起整体代码大改的情况。
![Image](/_next/image?url=https%3A%2F%2Fahdark-blog-old-attachments.ahdark.net%2Fuploads%2F2022%2F05%2F20220509175056841.png&w=1920&q=75)
顶层路由
在前端顶层,我通过 React Router v5 区分用户端与管理端。
管理端
![Image](/_next/image?url=https%3A%2F%2Fahdark-blog-old-attachments.ahdark.net%2Fuploads%2F2022%2F05%2F20220509175150982.png&w=1920&q=75)
管理端 路由
管理端顶层,我将 Layout 渲染部分放置在 Switch 以外以避免切换页面时重复渲染。
同时将各个页面处理成 JSX.Element ,放置在不同的目录中。
如此,每次开发某一页面或组件,就可以只修改某一目录下的文件,避免了 Git Commit Log 混乱。
用户端
![Image](/_next/image?url=https%3A%2F%2Fahdark-blog-old-attachments.ahdark.net%2Fuploads%2F2022%2F05%2F20220509175358224.png&w=1920&q=75)
用户端 路由
在用户端,我通过 Router 区分页面,对各个页面进行分离。
后端程序
![Image](/_next/image?url=https%3A%2F%2Fahdark-blog-old-attachments.ahdark.net%2Fuploads%2F2022%2F05%2F20220509175511150.png&w=1920&q=75)
后端代码均严格依据规范进行开发,对 Controller 、 Service 等进行分层,以保证程序的稳定性。
@topjohncian 对于前端代码的大型优化
首先,在此感谢 @topjohncian 对于我前端代码的优化建议与分析。
之前,我使用 react-router-dom@v6 进行路由分离,在每个页面通过请求后端判断用户是否登陆。
这样的实现既不优雅也不高效,而且会降低用户体验。
经由他的帮助,他为我尝试制作 <AuthRoute>
<NoAuthRoute>
等中间件。
因为 react-router-dom@v6 的愚蠢特性,我们经过漫长的尝试后决定降级为v5,以获得更高的可扩展性。
![Image](/_next/image?url=https%3A%2F%2Fahdark-blog-old-attachments.ahdark.net%2Fuploads%2F2022%2F05%2F20220509180517485.png&w=1920&q=75)
AuthRoute Element
部署
在经历漫长的开发过程后,我开始着手进行部署工作。
其中重要的一项内容是 Debug ,尽管我尽力寻找 Bug 并予以更改,但部署到生产环境时仍有不少 Bug 等待修复。
在几小时后,程序迭代出更新的版本,我修复了绝大多数的未解决的 Bug 。
生产环境与测试环境不在同一云服务商,以此避免测试环境提权影响到生产环境。
你可以前往 https://ahd.im 预览实际效果。
短链接生成目前仅开放给注册用户,且并未开放注册,因此您可能无法体验到短链接生成和站点管理的过程。
![Image](/_next/image?url=https%3A%2F%2Fahdark-blog-old-attachments.ahdark.net%2Fuploads%2F2022%2F05%2F20220509180942164.png&w=1920&q=75)
用户端 - 首页
![Image](/_next/image?url=https%3A%2F%2Fahdark-blog-old-attachments.ahdark.net%2Fuploads%2F2022%2F05%2F20220509181013911.png&w=1920&q=75)
用户端 - 设置
![Image](/_next/image?url=https%3A%2F%2Fahdark-blog-old-attachments.ahdark.net%2Fuploads%2F2022%2F05%2F20220509181105153.png&w=1920&q=75)
管理端 - 仪表盘
![Image](/_next/image?url=https%3A%2F%2Fahdark-blog-old-attachments.ahdark.net%2Fuploads%2F2022%2F05%2F20220509181143616.png&w=1920&q=75)
管理端 - 用户管理
关于项目
Link 短链接系统 为闭源项目,使用 React+SpringBoot 前后端分离开发。
其 GitHub 私有仓库 分别位于 https://github.com/AH-dark/Link 和 https://github.com/AH-dark/Link-Frontend ,但你无法打开获取源代码。
主要开发者为 @AHdark 。
项目的成功实现离不开 @topjohncian 的协助。
感谢您的阅读,我们会持续更新本项目,并视情况决定是否开源。
本项目已在2022年5月28日全量开源。