⇧点蓝色字关注“橘子的分享”
想必大家一定看到过类似这样子的短信，这里面有一个链接，我们称之为短链接，因为它的原始链接是非常长的！https://galaxy-h5.geely.com/galaxy-car-control-h5/pages/car-share/index?id=xxxxx，这个就是你看到的短信链接的真实网址了！
那你有没有想过，这个短链接是怎么来的，为什么输入这个短链接就能跳转到了真实的这个长链接呢？
短链接比较短，占用字符少，而且还容易记住，这些都是优势，所以被广泛应用的。那么它是怎么实现的？
我们可以这么理解，当我们输入这个短链接的时候，肯定是哪里能够匹配到短链接对应的长链接，然后访问长链接即可。
所以我就按照这个思路写了一个生成短链接的工具，并且访问短链接就能跳转到长链接所对应的网址了！
我写了一个页面，你可以输入你的长链接，点击生成短链接，就能生成一个对应的短链接，然后可以点击复制，将这个短链接复制到剪切板上面，方便下次 ctrl + v
那么这个对应关系是这么弄的呢，其实很简单，当你点击生成短链接的时候，后端接口，就会生成一个对应的短链接，然后保存到数据库中。
async create(createShorturlDto: CreateShorturlDto) {
const res = await this.shortUrlManager.findOneBy(ShortUrl, { longUrl: createShorturlDto.longUrl });
if (res) {
return new HttpException(res.shortUrl, CODE_NUMBER.SUCCESS);
} else {
const savaData = new ShortUrl();
savaData.shortUrl = generateRandomStr(6);
savaData.longUrl = createShorturlDto.longUrl;
const data = await this.shortUrlManager.save(savaData);
return new HttpException(data.shortUrl, CODE_NUMBER.SUCCESS);
}
然后，你使用短链接进行访问的是，将会重定向短链接到长连接上去。
@Get(':code')
async findOneJump(@Param('code') code: string, @Res() res: Response) {
const result = await this.shorturlService.findOneJump(code);
if (!result) {
throw new BadRequestException('短链接不存在');
} else {
res.redirect(result.longUrl);
}
通过这样子的方式就能使用短链接访问原始的长链接网址啦！
你可以从上面的gif图片看到，输入了短链接后，会自动重定向到真正的长链接网址啦！
大家可以点击下面这个短链接网址试试看，或者点击阅读原文，访问我的短链接生成网站，自己来生成一个试试看！
短链接网址：https://api.orangecj.cn/qmLaIe
生成短链接的工具网址：https://www.orangecj.cn/shortUrl
2024-11-14
2024-11-13
2024-10-13
2024-10-09
2024-09-22
2024-09-08
2024-08-16
2024-08-15
2024-08-13
2024-08-12
▌本文来源：橘子的分享微信公众号
DECEMBER
点个在看你最好看
