无服务器 自建短链服务 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时，是指定删除的短链。

显示urlList的部分 按钮里面加 onclick事件

<div classs="list-group" id="urlList"> 

  <div class="list-group-item">

    <button type="button" class="btn btn-danger" onclick='deleteShortUrl("4rEbzm")'>X</button>

    <span>some text</span>

  </div>

  <div class="list-group-item">

    <button type="button" class="btn btn-danger" onclick='deleteShortUrl("8NKY34")'>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>

测试了一下效果，能生效，修改KV

加载localStorage到urlList的部分，用JS实现

function addUrlToList(shortUrl, longUrl) {

  let urlList = document.querySelector("#urlList")

  let child = document.createElement('div')

  child.classList.add("list-group-item")

  let btn = document.createElement('button')

  btn.setAttribute('type', 'button')

  btn.classList.add("btn", "btn-danger")

  btn.setAttribute('onclick', 'deleteShortUrl(\"' + shortUrl + '\")')

  btn.innerText = "X"

  child.appendChild(btn)

  let text = document.createElement('span')

  text.innerText = window.location.host + "/" +shortUrl + " " + longUrl

  child.appendChild(text)

  urlList.append(child)

}

 

规范API

API 添加短链出错时，status不是200, 错误信息不应该放到key里，应该另外保存error。

API 添加短链成功时，status为200, key单纯就是短链关键字段，不应该加上'/ '前缀。

显示API结果时，应该先判断status是否为200（成功），再确定显示key短链，还是显示error错误信息。

略