Why do this ?
博客写好了之后也需要经常的去回顾,所以我也经常在手机上浏览自己的博客加深对知识的印象,可是每次阅读到最后的时候,那一排长长的地址的布局让人绝望,于是我就想能不能通过将长URL转换为短URL,使得页面更加的简练。
让人难受的布局:
转换后的布局:
How to do?
在早之前自己就准备弄一个短网址转换的工具(虽然网上有很多,但是自己写真的很想写!!!),这次博客这地址就让我直接动工了,然后直接查找相关的博客看看别人怎么实现的。这里参考了短网址(short URL)系统的原理及其实现
刚开始本来是想写个前端页面输入长URL得到短URL,直接将转换后的短URL放在那个位置,但是自己真不太会,写来好丑。。。于是就想直接调用一个接口返回js,然后这个js去获取a标签的值,然后在将该值通过js原生ajax调用另一个接口得到转换后的短URL,再将URL写入a标签。
How to use
(1)话不多说,可以直接直接用我搭的服务
给文章的签名档上的地址a标签一个id=“url”
,然后调用我的服务返回一个js脚本即可。
代码示例如下:
地址:<a href="{url}" target="_blank" id="url">{url}</a><br>
<script src="http://surl.zhqy.xyz/url/js" charset="utf-8"></script>
<script>setUrl();</script>
图片示例如下:
(2)拉取我的源代码,直接修改部署到自己的服务器
githup地址:https://github.com/geektomya/surl.git
欢迎stars呀,顺便帮我看看代码风格,,感觉自己风格不太好😭🙏
数据库配置
mysql
中新建数据库surl
,字符集utf8 -- UTF-8 Unicode
,排序规则utf8_general_ci
然后运行doc中的数据库脚本
项目配置
application.yml
中修改为你的数据库,然后在Message中修改INDEX
,PERURL
,PERINJS
其中的PERURL
修改为你的短URL的前缀(我这里后面用nginx监听这个服务,直接写了域名)PERINJS
同理也可以写成域名/url/
的形式,这里要注意 /url/
后面的/
一定不能少。
服务器配置
upstream shortUrl {
server localhost:8087; # 监听端口
}
server {
listen 80;
server_name surl.zhqy.xyz; # 域名
access_log off;
location / {
proxy_pass http://shortUrl$request_uri;
proxy_set_header Host $host:$server_port;
proxy_set_header X-Real-IP $remote_addr;
client_max_body_size 10m;
}
}
当然这里你需要给你的域名一个新的二级域名解析到这里
solo配置
地址:<a href="{url}" target="_blank" id="url">{url}</a><br>
<script src="http://域名/url/js" charset="utf-8"></script>
<script>setUrl();</script>
将域名修改为你的域名配置即可