ShortLink 短链接生成器功能实现详解前言在日常网络活动中我们经常需要与他人分享链接但面对那些一串看似无章法的长网址复制粘贴既不便利也不专业。短链接ShortLink正是为这种场景而生。本文将详解 toolion 项目中 ShortLink 功能的实现思路、技术细节及使用场景。什么是 ShortLinkShortLink短链接 https://toolion.cn/shortlink/是将长网址转换为简洁短址的工具主要解决链接美化将冗长 URL 转换为简短易记的地址空间节省 在受限的字符限制如微博、Twitter中展示链接专业形象 使用干净的链接提升品牌形象点击统计 追踪链接访问来源与行为数据隐私保护 隐藏真实的查询参数或隐私信息功能特性1. 短链接创建基于 OpenID 验证支持登录用户与游客用户用户类型链接归属保存限制登录用户绑定到账户最多 5 条游客用户无归属无限创建2. 访问统计提供完整的 30 天数据分析访问趋势 按日点击量变化来源分析 微信、微博、Twitter、Facebook、Google 等平台设备分布 桌面、平板、手机 三端操作系统 Windows、macOS、Linux、Android、iOS 等浏览器类型 Chrome、Safari、Firefox、Edge 等地域分布 按国家/地区统计Top 103. 链接管理登录用户可对已保存的链接进行查看列表 展示已创建的短链接编辑更新 修改目标 URL 或标题删除链接 从账户中移除4. 数据导出支持将统计数据导出为 CSV 文件便于离线分析。技术实现架构图┌─────────────────┐ │ 前端调用 │ │ - 创建链接 │ │ - 查看统计 │ │ - 导出数据 │ └───────┬─────────┘ │ HTTP API ▼ ┌─────────────────┐ │ Express 路由 │ │ - POST /api/shortlinks │ │ - GET /api/shortlinks/my│ │ - PUT /api/shortlinks/:code│ │ - DELETE /api/shortlinks/:code│ │ - GET /api/shortlinks/stats/:code│ │ - GET /s/:code (重定向)│ └───────┬─────────┘ │ Prisma ORM ▼ ┌─────────────────┐ │ PostgreSQL 数据库│ │ - shortLink 表 │ │ - clickEvent 表 │ └─────────────────┘数据库设计shortLink 表存储短链接的基本信息CREATETABLEshort_link(id BIGSERIALPRIMARYKEY,codeVARCHAR(8)UNIQUENOTNULL,-- 6 位随机码long_urlTEXTNOTNULL,-- 原链接titleVARCHAR(255),-- 链接标题可选user_idBIGINT,-- 所属用户null 表示游客created_atTIMESTAMPDEFAULTNOW());clickEvent 表记录每一次访问事件CREATETABLEclick_event(id BIGSERIALPRIMARYKEY,short_link_idBIGINTREFERENCESshort_link(id),ipVARCHAR(45),-- 访问 IPuser_agentVARCHAR(500),-- User-AgentrefererVARCHAR(2048),-- 引用来源countryVARCHAR(50),-- 国家cityVARCHAR(50),-- 城市deviceVARCHAR(20),-- 设备类型osVARCHAR(50),-- 操作系统browserVARCHAR(50),-- 浏览器clicked_atTIMESTAMPDEFAULTNOW());核心代码实现1. 短码生成使用 Node.js 内置的crypto模块生成 8 位随机码functiongenerateCode():string{returncrypto.randomBytes(4).toString(hex);// 4 bytes 8 hex chars}2. 链接创建exportasyncfunctioncreateShortLink(req:Request,res:Response){const{longUrl,title}req.body;// 验证 URL 格式if(!isValidUrl(longUrl)){returnres.status(400).json({code:400,message:无效的 URL 格式});}// 尝试生成唯一 shortCodeletcode:string;for(letattempts0;attempts5;attempts){codegenerateCode();constfoundawaitprisma.shortLink.findUnique({where:{code}});if(!found)break;}// 创建短链接constlinkawaitprisma.shortLink.create({data:{code,longUrl,title,userId}});res.status(201).json({code:0,data:link});}3. 访问重定向与埋点exportasyncfunctionredirectLink(req:Request,res:Response){const{code}req.params;constlinkawaitprisma.shortLink.findUnique({where:{code}});if(!link){returnres.status(404).send(Link not found);}// 异步记录点击事件prisma.clickEvent.create({data:{shortLinkId:link.id,ip:req.headers[x-forwarded-for]||req.socket.remoteAddress,userAgent:req.headers[user-agent],referer:req.headers[referer],...parseUserAgent(req.headers[user-agent])}}).catch((){});// 忽略错误不阻塞重定向res.redirect(302,link.longUrl);}4. 统计数据聚合exportasyncfunctiongetLinkStats(req:Request,res:Response){// 总点击量consttotalClicksawaitprisma.clickEvent.count({where:{shortLinkId:link.id}});// 独立访客数constuniqueIpsawaitprisma.clickEvent.findMany({where:{shortLinkId:link.id},distinct:[ip],select:{ip:true}});// 最近 30 天趋势数据constrecentClicksawaitprisma.clickEvent.findMany({where:{shortLinkId:link.id,clickedAt:{gte:thirtyDaysAgo}}});// 按渠道、设备、地区等分组统计...}前端实现亮点1. 响应式数据视图使用 Chart.js 实现多维度数据可视化// 访问趋势折线图newChart(ctx,{type:line,data:{labels:data.trend.map(dd.date.slice(5)),datasets:[{label:点击量,data:data.trend.map(dd.clicks),borderColor:#6366f1,fill:true}]}});// 来源分析环形图newChart(ctx,{type:doughnut,data:{labels:data.sources.map(ss.name),datasets:[{data:data.sources.map(ss.clicks),backgroundColor:colors}]}});2. 无感复制navigator.clipboard.writeText(url).then(function(){btn.classList.add(copied);btn.textContent✓ 已复制;setTimeout((){btn.textContent 复制;btn.classList.remove(copied);},2000);});API 参考创建短链接POST /api/shortlinks请求体{longUrl:https://example.com/very/long/url,title:链接标题可选}响应{code:0,data:{id:123,code:a1b2c3d4,longUrl:https://example.com/very/long/url,title:链接标题,createdAt:2024-01-01T12:00:00.000Z,clicks:0}}获取我的链接GET /api/shortlinks/my响应{code:0,data:{links:[{id:123,code:a1b2c3d4,longUrl:https://example.com,title:示例链接,clicks:42,createdAt:2024-01-01T12:00:00.000Z}]}}获取统计数据GET /api/shortlinks/stats/:code响应{code:0,data:{link:{...},overview:{totalClicks:128,uniqueVisitors:96},trend:[{date:2024-01-01,clicks:10},...],sources:[{name:微信,clicks:64},...],countries:[{name:中国,clicks:48},...],devices:[{name:mobile,clicks:72},...],oses:[{name:iOS,clicks:32},...],browsers:[{name:Safari,clicks:48},...]}}使用场景社交媒体分享 在微博、Twitter 分享网址受字符限制文档与简历 在 PDF 或图片中嵌入美观短链接产品推广 通过短链接监控营销活动效果隐私保护 隐藏搜索引擎抓取的痕迹保护原始链接信息内部协作 团队内部使用美观的短链接进行沟通配置说明配置项说明/s/:code短链接跳转路由/api/shortlinks短链接 REST API用户登录后可保存链接至账户最多 5 条最佳实践及时使用 短链接无时效限制可长期保存及时更新 发现错误的目标链接及时通过“我的链接”更新合理管理 定期清理不再使用的短链接查看统计 通过统计数据优化链接使用策略总结toolion 的 ShortLink 功能通过简洁的 API 接口和丰富的统计数据为用户提供了高效、专业的链接管理方案。从创建、跳转、统计到管理完整的功能闭环让链接分享和分析变得简单而可视化。未来可以考虑的功能扩展自定义短码链接分组管理访问密码保护高级字段统计工具狮 · 工具箱https://toolion.cn/shortlink/