博文

目前显示的是标签为“Url-Shorten-Worker”的博文

Linux 命令行 curl 用POST方法 调用短链系统 API 添加文件

图片
我们已经有了 利用免费worker搭建的短链系统 , 通过 配置参数设置为网络记事本 Pastebin , 用于保存自己的翻墙节点订阅信息, 或者是clash的配置文件. 在某些场景下, 你在Linux环境下已经有了订阅信息的文件(或者clash的配置文件), 不想搞什么复制粘贴, 鼠标点点点, 就想命令行直接一键上传到短链系统(网络记事本 Pastebin)中. 那么, 可以使用 curl 命令, 用POST方法 调用短链系统的 API

无服务器 自建短链服务 Url-Shorten-Worker 变身日记本 NetJournal 支持Markdown

图片
上一篇我们解决了网络日记本 NetJournal 从无到有的核心后台逻辑 . 现在要来解决使用效果了. 谁也不想日记本里面只能用文字+emoji+ascii艺术吧.  那想一想, 最好的解决方案就是 Markdown 了. 启发 找 GPT 一问, 给了一个很好的例子. https://devv.ai/zh/search?threadId=dbr3kt6te3uo 核心代码就是这一小段 document.getElementById('markdown-content').addEventListener('input', function () {   const markdownContent = document.getElementById('markdown-content').value;   const htmlPreview = document.getElementById('html-preview');   htmlPreview.innerHTML = marked.parse(markdownContent); }); 实践 把这一段抄到我们的index.html里面去, 添加一个card, 里面显示我们当前输入的Markdown文本的效果. 还可以把这样的显示效果融合到显示列表中. function buildValueMarkdown(longUrl) {   let valueMarkdown = document.createElement('div')   valueMarkdown.classList.add("form-control")     valueMarkdown.innerHTML = marked.parse(longUrl)   return valueMarkdown } buildValueItemFunc = buildValueMarkdown 在调试过程中, 发现一个问题. 如果我把日记内容写得比较复杂, 里面就会带上一些 [] ! () # 这类符号, 并且还有换行. 当我在index.html调用API去查询单条记录的时候, 报错说json格式有什么问题. 但是我用 loadKV 去查询全部的时候,

无服务器 自建短链服务 Url-Shorten-Worker 变身网络日记本 NetJournal

图片
前面我们已经实现了 网络记事本 PasteBin , 用于托管自己的一段文本. 演示站:  https://pastebin.icdyct.cloudns.asia/tieludasiliqiuweiyue 如果想作为自己的一份日记本的话, 用起来会有一点不顺手. 比如, 如果你把这个页面作为主要的操作页面, 而不是从别的地方写好了再复制粘贴过来, 那么这个页面并不能让你写一点了保存一下, 再写一点了再保存一下. 你点保存的时候会提示 key 存在冲突. 还有一点就是, 当你确定要修改某一篇日记时, 还要去显示列表中找到它, 有点不方便. 思路 一是实现一下, 在向数据库保存key-value时, 不要检测key是否已存在(在之前的短链系统中, 是检测了的) 二是增加读取指定key-value的小功能. 点击了 Load 按钮之后, 从数据库中把 value 读出来, 再把数据放到原本的操作界面上.  后续操作就可以按以前系统的操作方式使用就好了. 实践 worker.js 增加一个配置项 overwrite_kv 设置为 true 时, 添加key-value时就不检测key是否存在了. main.js 里面加一个读指定key-value的函数.  index.html 里面添加几个页面元素就不细讲了. ======= 完 Github:  https://github.com/crazypeace/url-Shorten-Worker/ 演示站:  https://journal.crazypeace.workers.dev/journaljournal

无服务器 自建短链服务 Url-Shorten-Worker 优化已保存数据的列表的显示 (2 END)

图片
上一篇, 我们找到了合适的代码来显示不同类型的内容. 有的是大段文字, 用textarea来显示; 有的是图片, 用img来显示. 但是我们使用一个怎样的代码结构呢? 我想了一下准备这样: 1. 把不同的显示方式包装为不同的函数, 放到 main.js 中. 如: function buildValueTxt(longUrl) {} function buildValueImg(longUrl) {} function buildValueTxtarea(longUrl) {} 2. 设置一个函数变量, 在不同的 index.html 中, 赋值为不同的函数, 如: 在短链的 index.html 中 buildValueItemFunc = buildValueTxt 在 Pastebin 的 index.html 中 buildValueItemFunc = buildValueTxtarea 在图床的 index.html 中 buildValueItemFunc = buildValueImg 3. 在 main.js 中, 使用同样的代码逻辑: // 长链接信息 Long url child.appendChild(buildValueItemFunc(longUrl))

无服务器 自建短链服务 Url-Shorten-Worker 优化已保存数据的列表的显示 (1)

图片
在 短链系统, 网络记事本系统, 图床系统 中, 已保存数据的列表的显示方式 需求是不同的. 记事本系统, 应该用一个多行文本框来显示 value. 如下: 图床系统, 应该以图片的形式显示 value. 如下: 短链系统就是原来的显示方式. 以文本形式显示全部value即可. 代码已经有了. 功能也是对的.  现在问题是, 怎么合理的设计代码结构, 让 worker.js 里面的配置项可以控制列表的显示方式. 设置什么系统的配置项是在 worker.js 里面. 最多还有一项, 控制加载哪个 index.html 但是实现列表显示的功能在 main.js 里面.  main.js 这个文件在 Github 上. 在 index.html 文件里面指定加载. 如果把 main.js 的文件内容搬出来放到 index.html, 然后不同的系统使用不同的 index.html , 小改一下 JS 代码的逻辑, 实现显示效果的差异.  这样是能够实现效果没错, 但 main.js 里面大段相同的代码要复制到每个 index.html 里面, 太不优雅了.  如果以后, 相同部分的代码需要修改, 那就是霰弹枪伤, 要打开这么多个index.html一个一个的改, 如果改错了, 漏掉了, 就有问题了. - To Be Continued

无服务器 自建短链服务 Url-Shorten-Worker 变身图床 Image Hosting 优化使用界面

图片
需求 上一步我们已经实现了图床的核心功能 , 保存和读取数据. 但是为了把图片转换为Base64数据, 还要 另外开一个页面 , 这也太... 所以我们把这个页面"借鉴"到自己图床的操作页面上. 思路 建一个 card (Bootstrap里的class). 把 左边页面中的功能 "借鉴"过来. 再建一个 "Next" 按钮, 用于把新card里面的数据同步到原有的元素中. 实践 代码的细节就不讲了. 都是一些细细碎碎. 唯一有点的可说的价值的就是, 被借鉴的网页是使用 Bulma 的CSS框架 的. 我考虑了一下, 我的项目里还是继续使用 Bootstrap. 为了更好的 input file组件, 我转为使用 Bootstrap V5 (之前使用的是v4). 然后显示操作结果的弹窗就有一些异常了. 请教了一下GPT, 再结合  Bootstrap的官方文档 , 里面有一些属性的名字有变化. 新建了一个“主题”,theme/imghost ======== 完 Github: https://github.com/crazypeace/url-Shorten-Worker/ 演示站: https://imghost.crazypeace.workers.dev/imghostimghost

无服务器 自建短链服务 Url-Shorten-Worker 变身图床 Image Hosting 基于base64编码

图片
需求 在 NodeSeek 上发贴, 是要自备图床的. 我们已经实现了单纯的KV数据库 . 那么, 同样的原理, 图床不就是一样的事情吗? 发给系统一个path, 系统还给你一个图片的数据. 思路 我设计在KV中保存图片的base64数据. 因为这样可以在KV的后台中直接管理; 人眼阅读后台数据时, 不会有奇怪的字符; 在复制粘贴, 不同的系统之间复制转移, 会比较方便. 坏处是, 数据量会变大, 变大 33%. 实践 图片转base64先利用其它网站实现, 如  https://oktools.net/image2base64 这样一个gif图片 得到下面这一大段base64数据. 我们在pastebin的基础上, 使用这些base64数据当作value, 设置233.gif当作key. 保存之后, 我们可以通过233.gif再获取这些base64数据, 像这样: 求助 GPT, 得到下面这段代码来把 base64 数据转化为一个图片返回给http请求. 把这段代码的函数添加到worker.js function base64ToBlob(base64String) {   var parts = base64String.split(';base64,');   var contentType = parts[0].split(':')[1];   var raw = atob(parts[1]);   var rawLength = raw.length;   var uInt8Array = new Uint8Array(rawLength);   for (var i = 0; i < rawLength; ++i) {     uInt8Array[i] = raw.charCodeAt(i);   }   return new Blob([uInt8Array], { type: contentType }); } 然后在返回http请求之前, 多处理这么一步, 就行了. 效果如下: ======== 完 把代码整理漂亮一点, 再上传. 用一个配置项设置系统的类型. Github:  https://github.com/crazypeace/url-Shorten-Worker/ 演示站:  https://im

无服务器 自建短链服务 Url-Shorten-Worker path为 'password' 时 让查询结果为空

图片
问题 今天调试 Pastebin 发现一个bug, 如果直接把path改为'password', 就会显示KV中的密码. 以前短链系统的时候, 因为短链系统会把查出来的value做302跳转, 而密码并不是一个网址, 在跳转时就会出问题, 所以就没有暴露这个bug. 修正 在按path查询了KV之后, 如果path是'password', 让查询结果为空.  这样后续处理就和 path 不存在是一样的. ======= 完 Github:  https://github.com/crazypeace/url-Shorten-Worker/ 演示站:  https://pastebin.icdyct.cloudns.asia/tieludasiliqiuweiyue https://pastebin.icdyct.cloudns.asia/password 的结果是和错误的path一样的了.

无服务器 自建短链服务 Url-Shorten-Worker 变身网络记事本 Pastebin 优化界面

图片
Url-Shorten-Worker 原作者本来就设计了可以支持不同的主题. 其实就是加载不同的index.html 默认是空, 也就是加载默认的 Repo 根目录下的 index.html 我们在 theme 下新建一个目录, pastebin, 再把 index.html 复制一份进来, 以此为基础做一些修改. 因为如果是当网络记事本PasteBin使用的话, value常常遇到大段文字的情况, 所以我修改为 textarea 元素. 最终效果如下, ======== 完 Github:  https://github.com/crazypeace/Url-Shorten-Worker 演示站:  https://pastebin.icdyct.cloudns.asia/tieludasiliqiuweiyue  

无服务器 自建短链服务 Url-Shorten-Worker 保护password

图片
需求 有PR提到, password应该要保护起来. https://github.com/crazypeace/Url-Shorten-Worker/pull/6 也有评论提到, 要避免显示password. 思路 定一个 protect_keylist  const protect_keylist = [   "password", ] 判断list是否包含指定元素, 用 protect_keylist.includes(req_key) 在 add, del, qry 时, 判断key属于 protect_keylist 就返回报错. 在 qryall 时, 遇到 protect_keylist 就不要放到返回结果中. ======== 完 Github:  https://github.com/crazypeace/Url-Shorten-Worker 演示站:  https://1way.eu.org/bodongshouqulveweifengci  你用 loadKV 查不到 password 的结果

无服务器 自建短链服务 Url-Shorten-Worker 优化-count显示

图片
需求 当 visit_count 和 load_kv 同时打开的时候, 会显示出这样的结果. 评论也提到希望隐藏. 思路 在 qryall 拼凑返回数据时, 跳过 '-count' 结尾的数据. ======== 完 Github:  https://github.com/crazypeace/Url-Shorten-Worker 演示站:  https://1way.eu.org/bodongshouqulveweifengci   你能查看访问次数, 但是看不到 -count 的查询结果

无服务器 自建短链服务 Url-Shorten-Worker 变身网络记事本 Pastebin 托管你的翻墙节点订阅

图片
需求 相信大家已经用过很多网络记事本的应用了. 比如:  https://gist.github.com/ https://pastebin.ubuntu.com/ 其实我很早就有这样的想法. 短链服务本质上就是输入一个Key, 返回一个Value. 只不过多做了一步, 把Value当作目标网址, 自动跳转. 那么如果我们不做跳转呢? 仅仅是显示Key对应的Value, 那么就是一个简单的网络记事本了.

无服务器 自建短链服务 Url-Shorten-Worker 增加读取Cloudflare KV 中全部记录的功能

图片
需求 饮食健康 2024年1月2日 GMT+8 03:52:00 希望能添加从cloudflare查询以往添加的短链接的功能,不然如果清除了浏览器缓存或在另一台电脑上想要查询和管理短链接的话必须登录cloudflare才行,比较麻烦。 我一开始设计这个短链系统的时候, 是作为可以和熟悉的人共同使用的, 所以我使用浏览器的localStorage的好处是, 每个人都只看到自己添加过的短链. 不会互相干扰, 我后来添加了删除短链的功能, 你也不会误删别人的短链. 但是, 既然有人特别提出来了, 那么我再想想, 如果这个系统是只给我自己一个人用呢, 那么这个读取KV的需求是合理的.

无服务器 自建短链服务 Url-Shorten-Worker 支持阅后即焚snapchat mode 配合二维码生成工具 制作一次性二维码

图片
需求 https://t.me/blacktechsharing/183161 思路 二维码实际上就是以一种图片的方式写的一串字符. 这串字符可以是一个网址. 既然这个二维码图片已经发给别人了, 你不可以跑到别人的电脑或者手机里面去删掉图片, 那么"一次性二维码"是怎么实现的呢? 二维码图片不变, 那么二维码对应的网址A不变. 你访问网址A就是访问一个服务器. 这个服务器可以让来访问网址A的人都跳转到一个新的网址B. 我们定义网址B才是真正有实际意义的网址. 让服务器只允许第一次访问网址A的人跳转到网址B, 以后再来访问网址A, 跳转都失效. 这样就实现了 "一次性二维码".

无服务器 自建短链服务 Url-Shorten-Worker 支持访问计数 visit count 支持查询短链 API接口增删查齐全 可以作为独立短链API服务

图片
感谢 https://github.com/EasyChris/Url-Shorten-Worker 实现基本的计数功能. 我在此基础上, 继续优化了操作页面, 可以在操作页面读出访问计数, 不需要到KV后台去看访问计数了. 效果

调试 Url-Shorten-Worker API报错 from origin 'null' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

图片
问题  想调试 Url-Shorten-Worker, 把 index.html 保存在本地电脑上, 调用服务器https://1way.eu.org/的API, 报错 Access to fetch at 'https://1way.eu.org/bodongshouqulveweifengci' from origin 'null' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

无服务器 自建短链服务 Url-Shorten-Worker 增加按钮可以删除某条短链

图片
源码 GitHub:  https://github.com/crazypeace/Url-Shorten-Worker 搭建教程:  https://zelikk.blogspot.com/2022/07/url-shorten-worker-hide-tutorial.html localStorage里只写短链的随机字符串 略 显示urlList的部分不用<ul>里面套<li>了。改为<div>里面套<div> 略 显示短链的时候,前面加个删除按钮 先把自动加载localStorage关了,然后在html里试着写一下,看看效果。 <div class="card-text">   <div classs="list-group" id="urlList">      <div class="list-group-item">       <button type="button" class="btn btn-danger">X</button>       <span>some text</span>     </div>     <div class="list-group-item">       <button type="button" class="btn btn-danger">X</button>       <span>some text some text some text some text some text some text some text some text some text some text some text </span>     </div>   </div> </div> API支持删除短链 POST增加字段 cmd: 取值add, del; keyPhrase: 在add时,是自定义短链;在del

无服务器 自建短链服务 Url-Shorten-Worker 小改进 | Bootstrap List group | 长链接文本框预搜索localStorage | 代码优化

图片
源码 GitHub: https://github.com/crazypeace/Url-Shorten-Worker 搭建教程: https://zelikk.blogspot.com/2022/07/url-shorten-worker-hide-tutorial.html 效果:

无服务器 自建短链服务 Url-Shorten-Worker 页面缓存曾经记录的短链接 localStorage

图片
源码 GitHub: https://github.com/crazypeace/Url-Shorten-Worker 搭建教程: https://zelikk.blogspot.com/2022/07/url-shorten-worker-hide-tutorial.html 效果: 不同的浏览器页面,缓存不互通。这样,不同的使用者互相之间不知道用本服务创建了什么短链。

无服务器 自建短链服务 Url-Shorten-Worker 美化 Bootstrap 设计框架 照猫画虎

图片
源码 GitHub: https://github.com/crazypeace/Url-Shorten-Worker 搭建教程: https://zelikk.blogspot.com/2022/07/url-shorten-worker-hide-tutorial.html 准备美化一下  https://github.com/crazypeace/Url-Shorten-Worker/ 看了一下源项目,使用的是 Bootstrap 4 参考: https://getbootstrap.com/docs/4.0/components/input-group/ 我们准备抄这个设计格式 找到对应的示例是: <div class="input-group mb-3">   <div class="input-group-prepend">     <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>   </div>   <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"> </div>  最终效果:

The Hotest in Last 30 Days

无服务器 自建短链服务 Url-Shorten-Worker 完整的部署教程

ClouDNS .asia免费域名 托管到CloudFlare开CDN白嫖Websocket WS通道翻墙 / desec.io