投票系统 - Cloudflare Workers

一个基于 Cloudflare Workers 和 KV 存储的简单投票系统。支持通过 URL 路径指定投票主题，用户可以投票并添加新选项。

功能特性

• 🗳️ 动态主题：通过 URL 路径指定投票主题（如 https://your-domain.com/测试/）
• 📊 实时投票：点击选项即可投票，票数实时更新
• ➕ 添加选项：用户可以添加新的投票选项
• 📈 自动排序：选项按票数从高到低自动排序
• 💾 持久存储：使用 Cloudflare KV 存储投票数据
• 📱 响应式设计：支持移动设备和桌面端
• 🎨 美观界面：现代化的界面设计

项目结构

votes/
├── src/
│   └── demo.html         # 演示网页
│   └── index.js          # Worker 主脚本
├── wrangler.toml         # Cloudflare Workers 配置
├── package.json          # 项目配置和依赖
└── README.md             # 项目说明

快速开始

1. 配置 KV 命名空间

1. 登录到 Cloudflare Dashboard
2. 创建一个新的 KV 命名空间，命名为 VOTES
3. 复制命名空间 ID
4. 更新 wrangler.toml 文件中的 KV 配置：

[[kv_namespaces]]
binding = "VOTES"
id = "your_actual_kv_namespace_id"
preview_id = "your_preview_kv_namespace_id"

2. 部署到 Cloudflare

1. Fork项目
2. 在 Cloudflare Dashboard 进入 Workers & Pages 页面
3. 点击创建，选择导入存储库

3. 设置自定义域名

1. 在自有域名下的DNS设置处添加CNAME类型，内容为：name.user.workers.dev
2. 在Workers路由下添加路由：your-domain.com/*

使用方法

访问投票页面

访问 https://your-domain.com/投票主题/，其中"投票主题"会显示在页面顶部。

例如：

• https://your-domain.com/今天晚饭吃什么/
• https://your-domain.com/最喜欢的编程语言/
• https://your-domain.com/周末去哪里玩/

投票

1. 在页面中点击任意现有选项进行投票
2. 票数会立即增加，选项会按票数重新排序

添加新选项

1. 在页面底部的文本框中输入新选项
2. 点击"添加选项"按钮或按回车键
3. 新选项会立即出现在列表中

API 说明

GET 请求

访问任意路径会显示对应主题的投票页面。

POST 请求

投票

POST /主题名/
Content-Type: application/x-www-form-urlencoded

action=vote&option=选项名

添加新选项

POST /主题名/
Content-Type: application/x-www-form-urlencoded

action=add&newOption=新选项名

数据存储

投票数据存储在 Cloudflare KV 中，格式如下：

{
  "选项1": 票数,
  "选项2": 票数,
  "选项3": 票数
}

存储键格式：votes:主题名

技术栈

• Cloudflare Workers：无服务器运行环境
• Cloudflare KV：键值存储数据库
• HTML/CSS/JavaScript：前端界面
• Wrangler：开发和部署工具

配置选项

wrangler.toml

name = "votes"                    # Worker 名称
main = "src/index.js"            # 入口文件
compatibility_date = "2024-01-01" # 兼容性日期

[[kv_namespaces]]
binding = "VOTES"                # KV 绑定名称
id = "your_kv_namespace_id"      # 生产环境 KV ID
preview_id = "your_preview_id"   # 预览环境 KV ID

开发脚本

• npm run dev：启动本地开发服务器
• npm run deploy：部署到 Cloudflare Workers
• npm run tail：查看 Worker 日志

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request！