记录一次自建短链接系统
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 。
后端
后端
后端
后端
前端
前端
前端
前后端分离并同时进行开发，自然需要在本地和测试服务器进行诸多配置。
我使用的 IntelliJ Idea 高效地适配了 Java 和 React 开发，使得我可以在一个专业编辑器上同时进行前后端的开发。
高效的 Idea 编辑器也使得我代码中极少出现错误，减少了反复编译的次数。
不要小看 idea 的内存占用，随便写几行代码就破 4GB 了，真不是个正常玩意。
前端通过 Git Submodule 内嵌于后端项目目录中，尽管在每天晚上需要进行 Sync Commit 修改后端保存的前端Git版本以保证前后端一致性，但仍确保了项目一致性和开发稳定性。
模块化
模块化开发可以使得我的开发进程更加规律化，避免因某一功能的修改引起整体代码大改的情况。
顶层路由
在前端顶层，我通过 React Router v5 区分用户端与管理端。
管理端
管理端 路由
管理端顶层，我将 Layout 渲染部分放置在 Switch 以外以避免切换页面时重复渲染。
同时将各个页面处理成 JSX.Element ，放置在不同的目录中。
如此，每次开发某一页面或组件，就可以只修改某一目录下的文件，避免了 Git Commit Log 混乱。
用户端
用户端 路由
在用户端，我通过 Router 区分页面，对各个页面进行分离。
后端程序
后端代码均严格依据规范进行开发，对 Controller 、 Service 等进行分层，以保证程序的稳定性。
@topjohncian 对于前端代码的大型优化
首先，在此感谢 @topjohncian 对于我前端代码的优化建议与分析。
之前，我使用 react-router-dom@v6 进行路由分离，在每个页面通过请求后端判断用户是否登陆。
这样的实现既不优雅也不高效，而且会降低用户体验。
经由他的帮助，他为我尝试制作 <AuthRoute> <NoAuthRoute> 等中间件。
因为 react-router-dom@v6 的愚蠢特性，我们经过漫长的尝试后决定降级为v5，以获得更高的可扩展性。
AuthRoute Element
部署
在经历漫长的开发过程后，我开始着手进行部署工作。
其中重要的一项内容是 Debug ，尽管我尽力寻找 Bug 并予以更改，但部署到生产环境时仍有不少 Bug 等待修复。
在几小时后，程序迭代出更新的版本，我修复了绝大多数的未解决的 Bug 。
生产环境与测试环境不在同一云服务商，以此避免测试环境提权影响到生产环境。
你可以前往 https://ahd.im 预览实际效果。
短链接生成目前仅开放给注册用户，且并未开放注册，因此您可能无法体验到短链接生成和站点管理的过程。
用户端 - 首页
用户端 - 设置
管理端 - 仪表盘
管理端 - 用户管理
关于项目
Link 短链接系统 为闭源项目，使用 React+SpringBoot 前后端分离开发。
其 GitHub 私有仓库 分别位于 https://github.com/AH-dark/Link
和 https://github.com/AH-dark/Link-Frontend ，但你无法打开获取源代码。
主要开发者为 @AHdark 。项目的成功实现离不开 @topjohncian 的协助。
感谢您的阅读，我们会持续更新本项目，并视情况决定是否开源。
本项目已在2022年5月28日全量开源。
