使用Cloudflare worker及KV实现一个投票应用
原创
项目需求背景
最初，目标是为网页添加一个简单的投票功能，用户可以通过点击按钮为特定项目投票。由于我们只需要保存票数且没有闲置服务器可用，因此考虑通过 Cloudflare 的 Worker KV 来实现此功能。
后端实现
步骤 1：创建 Cloudflare 账户
首先，注册一个 Cloudflare 账户。
步骤 2：创建 KV 空间
登录后，创建一个新的 KV 空间，名称可以自定义。
步骤 3：添加密钥
在 KV 空间中，新增一个密钥并命名为 vote，用于存储投票数据。
步骤 4：创建 Worker
在 Cloudflare 控制面板中创建一个新的 Worker。
步骤 5：绑定 KV 命名空间
在 Worker 的设置中，进入 "变量" 选项，并将 KV 空间绑定到 Worker 中。你可以自由命名绑定的变量名，这里假设命名为 voteApp。
初步代码实现
以下是 Worker 的初步代码，记得将 voteApp 替换为实际的变量名。
addEventListener("fetch", (event) => {
event.respondWith(
handleRequest(event).catch((err) => {
return new Response(err.stack, { status: 500 });
})
);
});
async function handleRequest(event) {
let t = await voteApp.get("vote");
t = parseInt(t) || 0;
const requestBody = await event.request.text();
const contains = requestBody.includes("TP");
if (contains) {
t += 1;
await voteApp.put("vote", t.toString());
return new Response(t.toString());
} else {
return new Response("投票失败");
}
}
该代码会检测请求体是否包含 TP，如果包含，则票数加一并更新存储在 KV 中。
改进：处理并发问题
为了避免并发请求时发生数据覆盖，可以使用 event.waitUntil 进行异步操作，从而确保投票数据更新时不会丢失。
if (contains) { event.waitUntil(voteApp.put("vote", (t + 1).toString())); returnnewResponse((t + 1).toString()); } else { returnnewResponse("投票失败"); }改进：增加缓存
为了提高效率，减少对 KV 的频繁读取，加入了缓存机制。当请求中没有缓存数据时，才去 KV 获取并更新数据。缓存数据可以存放一段时间，从而减少读取延迟。
async function handleRequest(event) {
const cache = caches.default;
const cacheKey = "vote_count";
let response = await cache.match(cacheKey);
if (!response) {
const data = await voteApp.get("vote");
let t = parseInt(await data.text()) || 0;
const requestBody = await event.request.text();
const contains = requestBody.includes("TP");
if (contains) {
event.waitUntil(voteApp.put("vote", (t + 1).toString()));
return new Response((t + 1).toString());
} else {
return new Response("投票失败");
}
await cache.put(cacheKey, new Response(t.toString()));
response = new Response(t.toString());
}
return response;
}
前端实现参考
前端代码实现展示当前票数，并提供一个按钮来增加票数。每次点击按钮时，前端会发送一个 POST 请求来更新票数并展示更新后的票数。
<p>当前票数: <span id="voteCount">0</span></p>
<button onclick="incrementVote()">增加票数</button>
<script>
document.getElementById("voteCount").textContent = "0";
fetch('/vote', { method: 'GET' })
.then(response => response.text())
.then(voteCount => {
document.getElementById("voteCount").textContent = voteCount;
})
.catch(error => {
console.error('显示票数失败', error);
});
function incrementVote() {
fetch('/vote', { method: 'POST' })
.then(response => response.text())
.then(voteCount => {
document.getElementById("voteCount").textContent = voteCount;
})
.catch(error => {
console.error('增加票数失败:', error);
});
}
</script>
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
