Skip to main content

Command Palette

Search for a command to run...

归档 | 自己写的短链网址前后端源码

Published
3 min read
归档 | 自己写的短链网址前后端源码

🚀自己写的短链网址前后端源码🚀 (目前已直接对接 oss)

[目前已支持使用 notiondatabase 做数据源]
[目前已支持 Python 函数 直接进行 308 跳转 🚀]
[如果域名有备案推荐使用 308 跳转(腾讯云函数)]

示例地址: http://tuo.icodeq.com/dream

界面

1

原理
  • 新版原理为 vercel 获取到数据,然后 308 跳转 (用旧版的话把 index-location 改成 index 就行了。
  • 原理很简单,就是利用 404 页面 会捕获所有请求这一特性

  • 然后再用 window.location.href 获取到当前访问的 url

  • 接着去获取一个 json 文件,利用上面的当前访问 url 查字典,查不到就跳转到默认主页

  • 查到字典了就 window.location.replace()

Json 格式 (专门写了一个工具来生成和维护这个数据,见 Releases )
{
    "dream": "https://dream-plan.cn/",
    "abcd": "https://tuostudy.vercel.app/api?path=/📺 020# 单词视频/📁 扇贝单词(新)/托福中级.mp4&raw=true",
    "abcde": "https://tuostudy.vercel.app/📺 020# 单词视频/📁 官方原版(同步)/📁 人教版高中英语单词必修1~选修11",
    "test": "https://tuostudy.vercel.app/🔊 030# 课本音频/📁 英语",
    "test2": "https://tuostudy.vercel.app/🔊 030# 课本音频/📁 英语/📁 03# 高考听力/2019年",
    "vip": "https://tuostudy.vercel.app/📺 020# 单词视频/📁 不背单词(超全)/📁 07# 固定搭配词组短语系列(付费)",
    "vip1": "https://tuostudy.vercel.app/api?path=/📺 020# 单词视频/📁 不背单词(超全)/📁 07# 固定搭配词组短语系列(付费)/中考词组.mp4&raw=true",
    "shanbei": "https://tuostudy.vercel.app/📜 050# 单词文本/📁 02# 扇贝单词(新)/",
    "xiaoxuetxt": "https://tuostudy.vercel.app/📜 050# 单词文本/📁 01# 墨墨单词(超全)/📁 03# 带中文释义版/1.全国各大教材版本中小学同步/人教版/",
    "xiaoxuemp3": "https://tuostudy.vercel.app/🔊 030# 课本音频/📁 英语/📁 01# 中小学同步单词课文录音/小学/人教版/"
}
代码

用法

  • 新版文档用法为将 /api/308/index.py 中的 OSS 链接改成自己的然后部署至 vercel 就能用了
以下为旧版用法(index-location
  1. 修改 404.htmlindex.html 中的这些部分 ( urllong 的值)

    ajax({
            method: 'GET',
            url: 'https://tuo-site.oss-cn-beijing.aliyuncs.com/data.json',
            success: function (OriginalFromActivity) {
                //在这里对获取的数据经常操作
                console.log(OriginalFromActivity)
                url = window.location.href.split('/').pop()
                long = OriginalFromActivity[url]
                if(long === undefined) { // 只能用 === 运算来测试某个值是否是未定义的
                     long = 'https://tuostudy.vercel.app'}
                console.log(long)
                window.location.replace(long)
                }
 })
  1. 修改 网页前端,改成自己喜欢的样子

  2. 将网页部署到 github 或者 gitee 或者 vercel 上面

  3. 打开 在 图欧君短链生成器-v4.x 下载的 图欧君短链生成器-v4.x , 或者直接运行 /python-CLI 目录下的源码

  4. 根据提示开始添加短链 ( OSS 详情设置请参阅官网配置,若不是使用的 OSS ,请使用 local 版本)

本工具有四种模式

1. 自定义生成短链
2. 设置要生成的短链位数 ,自动生成短链
3. 删除或修改短链模式
4. 查阅模式(只读模式)
0. 退出
  1. ~添加短链完成后将 data.json 文件传到 Github 或者 Gitee 或者 Vercel 或者 OSS 或者随便一个云存储~

  2. 本工具自动同步 oss ,详情参阅 https://github.com/zkeq/Tuostudy-Short-url/releases/tag/v4.0.0 🚀🚀🚀🚀

  3. 请确保你第六步上传数据得到的 url 可以直接访问并且第一步填写的 url 中的值完全一样

  4. (下文有 notion 做数据源)

  5. 🚀 enjoy 🚀

后续维护

  • 请在 图欧君短链生成器-v4.x 中进行后续操作。

另一种思路(不大推荐)

使用 notiondatabase 做数据源

Notion 模板:你也可以试着修改这个数据库来增加记录

  1. 创建一张 database 表(注意格式. 字段:Short:str url:url );创建一个集成;给集成加 读权限

  2. 获取到你的 notion sk

  3. SKdatabaseid 填入 /api/notion/index.py

  4. databese 数据表格式如下图

2

  1. 直接访问 /api/notion/?dream 即可跳转(后端渲染完成后返回) 具体参见:/api/notion

  2. 或使用 /api/notion-back-json 做数据源(后端只做数据库) 具体参见:/api/notion-back-json

  3. 数据源返回示例 https://tuo.icodeq.com/api/notion-back-json

直接使用 308 跳转 /api/308

  1. /api/308 目录下的函数部署至 vercel腾讯云函数

  2. 自行选用数据库对接

  3. 有备案域名的话更推荐 腾讯云函数 因为链接很干净

  4. vercel 的话,应该是要把函数文件放在 api 目录下才会生效,那么链接就变长了一点,不够优雅

  5. 腾讯云不备案生成的链接就是个笑话

  6. 你管这玩意叫短链?😂 https://service-cetfbmjm-1303831731.gz.apigw.tencentcs.com/release/helloworld-1645706447/dream

注:这里的腾讯云和 notion 可以分别替代 vercelOSS 具体用法自行理解。

vercel 示例: https://tuo.icodeq.com/api/308?dream

接口示例

序号说明示例
1404根目录主链接http://tuo.icodeq.com/dream
2根目录索引http://tuo.icodeq.com/?dream
3vercel-oss-apihttp://tuo.icodeq.com/api/?dream
3vercel-notion-apihttp://tuo.icodeq.com/api/notion/?dream

源码以及相关链接

序号说明链接
1Github 仓库 (会更新)https://github.com/zkeq/Tuostudy-Short-url
2Gitee 仓库 (会更新)https://gitee.com/zkeq/Tuostudy-Short-url
3本文PDF格式https://lanzoul.com/iDzgM003x1yh

赞助

感谢 JetBrains 为本项目提供的许可证。

JetBrains Logo (Main) logo. PyCharm logo.

14 views

More from this blog

MySQL | 表的内连接

数据操作语言:表连接查询(一) 从多张表中提取数据 从多张表提取数据,必须指定关联的条件。如果不定义关联条件就会出现无条件连接,两张表的数据会交叉连接,产生 笛卡尔积。 规定了连接条件的表连接语句,就不会出现笛卡尔积。 # 查询每名员工的部门信息 SELECT e.empno,e.ename,d.dname FROM t_emp e JOIN t_dept d ON e.deptno=d.deptno; 表连接的分类 表连接分为两种:内连接 和 外连接 内连接是结果集中只保留符合...

May 16, 20221 min read13
MySQL | 表的内连接

MySQL | 分组查询的应用

数据操作语言:分组查询 为什么要分组? 默认情况下汇总函数是对全表范围内的数据做统计 GROUP BY 子句的作用是通过一定的规则将一个数据集划分成若干个小的区域,然后针对每个小区域分别进行数据汇总处理 SELECT deptno,AVG(sal) FROM t_emp GROUP BY deptno; SELECT deptno,ROUND(AVG(sal)) FROM t_emp GROUP BY deptno; -- ROUND 取整 逐级分组 数据库支持多列分组条件,执行的时候...

Apr 27, 20221 min read10
MySQL | 分组查询的应用

MySQL | 聚合函数的使用

数据操作语言:聚合函数 什么是聚合函数 聚合函数在数据的查询分析中,应用十分广泛。聚合函数可以对 数据求和、求 最大值 和 最小值 、求 平均值 等等。 求公司员工的评价月收入是多少? SELECT AVG(sal+IFNULL(comm,0)) FROM t_emp; SELECT AVG(sal+IFNULL(comm,0)) AS avg FROM t_emp; SUM 函数 SUM 函数用于求和,只能用户数字类型,字符类型的统计结果为 0 ,日期类型统计结果是毫秒数相加 SE...

Apr 26, 20221 min read8
MySQL | 聚合函数的使用
U

Untitled Publication

173 posts