V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
lisongeee
V2EX  ›  分享创造

一个 基于 cloudflare workers 和 vue ssr 的网络访问计数器

  •  
  •   lisongeee ·
    lisonge · 2021-10-30 13:36:32 +08:00 · 905 次点击
    这是一个创建于 880 天前的主题,其中的信息可能已经有所发展或是发生改变。

    自己写的 svg 模板 看看动画效果 -> visit-counter

    渲染效果主要看你在 url.query 传过来的 svg 模板

    做这个主要是因为前几天也在 V2EX 看到一个 计数器,我在下面评论 说可以 一步到胃 直接把渲染模板传过来

    我看没什么响应,就自己去实现了,起初是想做一个全局替换的,后来仔细研究了一些 svg 效果,全局替换效果辣鸡

    于是想到了 vue 的 ssr 渲染函数,把你的渲染模板通过 url.query 传递到后端

    我还没测过实际 http path 最大长度是多少,但是 我在 Edge@95 发长度 8000 的 url 请求没问

    当然 模板 越小越好,可以提前 html minimize

    数据存储是 cloudflare workers kv, 在 workers 里可以很便捷地使用,基本是 workers 的配套了

    有什么错误或者需要改进的地方,请各位大佬 指正,谢谢。

    https://github.com/lisonge/visit-counter.git

    附上 展示的 svg 模板,可再次刷新此界面查看效果,也可以刷到 99 看看 99 到 100 动画效果

    <svg
          xmlns="http://www.w3.org/2000/svg"
          :width="13 * (count + 1 + '').length + 5"
          height="16"
        >
          <g>
            <text
              v-for="n in (count + '').length"
              :key="n"
              style="font-size: 13px"
              :x="
                (n - 1) * 13 +
                ((count + '').length < (count + 1 + '').length ? 13 : 0) +
                5
              "
              y="13"
            >
              {{ (count + "")[n - 1] }}
              <animate
                attributeName="y"
                from="13"
                to="-4"
                :begin="((count + '').length - n) * 300 + 400 + 'ms'"
                dur="700ms"
                fill="freeze"
                v-if="(count + '')[n - 1] != (count + 1 + '')[n - 1]"
              />
            </text>
            <text
              v-for="n in (count + 1 + '').length"
              :key="n"
              style="font-size: 13px"
              :x="(n - 1) * 13 + 5"
              y="30"
            >
              {{ (count + 1 + "")[n - 1] }}
              <animate
                attributeName="y"
                from="30"
                to="13"
                :begin="((count + '').length - n) * 300 + 500 + 'ms'"
                dur="700ms"
                fill="freeze"
                v-if="(count + '')[n - 1] != (count + 1 + '')[n - 1]"
              />
            </text>
          </g>
        </svg>
    
    2 条回复    2021-10-30 18:32:11 +08:00
    jwenjian
        1
    jwenjian  
       2021-10-30 17:36:30 +08:00
    你说的是这个吗 ? https://v2ex.com/t/681899#reply89 如果是的话,主要因为我很久没来 v 站了 :)
    lisongeee
        2
    lisongeee  
    OP
       2021-10-30 18:32:11 +08:00
    @jwenjian 不是
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   989 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 21:58 · PVG 05:58 · LAX 14:58 · JFK 17:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.