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

源码 GitHub: https://github.com/crazypeace/Url-Shorten-Worker

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错误信息。


评论

The Hot3 in Last 30 Days

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

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