一个 基于 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>