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

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

渲染效果主要看你在 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>

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

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