一个基于 Firebase Realtime Database 的实时投票系统，用于课堂练习作品的全体投票，支持选出 TOP3 最佳作品。
- ✅ 实时同步：所有用户可以实时看到投票数据变化
- ✅ 简单导入：管理员可以粘贴名单（每行一个名字）快速导入候选人
- ✅ 灵活投票：每人可以给多个作品投票，但每个作品最多投一票
- ✅ TOP3 展示：自动高亮显示票数最高的三个作品（金🥇、银🥈、铜🥉）
- ✅ 身份识别：通过简单的名字输入进行身份标识
- ✅ 投票控制：管理员可以开启/关闭投票、重置数据
- ✅ 响应式设计：支持手机和电脑访问
vote/
├── index.html # 投票主页面
├── admin.html # 管理员页面
├── app.js # 投票逻辑
├── admin.js # 管理员逻辑
├── firebase-config.js # Firebase 配置
├── styles.css # 样式文件
└── README.md # 本文档
- 访问 Firebase Console
- 点击"添加项目"或"创建项目"
- 输入项目名称（例如：classroom-voting）
- 根据提示完成项目创建
- 在 Firebase Console 左侧菜单中，点击"构建" → "Realtime Database"
- 点击"创建数据库"
- 选择数据库位置（建议选择离您最近的区域）
- 选择"以测试模式启动"（方便快速开始）
⚠️ 注意：测试模式允许任何人读写数据，仅适合开发和课堂使用- 生产环境请配置适当的安全规则
- 在 Firebase Console 中，点击项目设置（齿轮图标）
- 滚动到"您的应用"部分
- 点击"添加应用" → 选择 Web 图标（</>）
- 输入应用昵称（例如：voting-app），无需设置 Firebase Hosting
- 点击"注册应用"
- 复制显示的配置代码
打开 firebase-config.js 文件，将配置信息替换为您的 Firebase 配置：
const firebaseConfig = {
apiKey: "YOUR_API_KEY", // 替换为您的 API Key
authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
databaseURL: "https://YOUR_PROJECT_ID-default-rtdb.firebaseio.com",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_PROJECT_ID.appspot.com",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID"
};- 用浏览器打开
admin.html（管理员页面） - 粘贴候选人名单（每行一个名字），点击"导入候选人"
- 将
index.html的链接分享给投票者 - 投票者打开链接，输入姓名后即可开始投票
- 在"导入候选人名单"区域的文本框中粘贴名单
- 格式：每行一个名字，例如：
张三 李四 王五 - 点击"📥 导入候选人"按钮
- 关闭/开启投票：控制投票者是否可以投票
- 重置所有投票：清空所有票数，但保留候选人名单
- 清空所有候选人：删除所有候选人和投票数据
- 清空所有数据：删除所有数据（包括设置）
- 实时查看所有候选人的票数
- TOP3 作品会自动高亮显示（金🥇、银🥈、铜🥉）
- 统计信息显示候选人总数、总投票数、投票人数
- 输入姓名：在首页输入您的真实姓名
- 开始投票：点击"开始投票"按钮
- 投票：点击作品卡片进行投票
- 已投票的作品会显示 ✓ 标记和蓝色背景
- 再次点击可以取消投票
- 查看结果：实时查看所有作品的票数和 TOP3 排名
- 用户信息栏：显示当前投票人姓名和已投票数量
- 作品卡片：
- 普通状态：白色背景
- 已投票：蓝色渐变背景 + ✓ 标记
- TOP1：金色左边框 + 🥇 徽章
- TOP2：银色左边框 + 🥈 徽章
- TOP3：铜色左边框 + 🥉 徽章
- 实时更新：所有数据变化会立即同步到所有用户
- 统计卡片：实时显示候选人总数、总投票数、投票人数
- 结果展示：按票数排序显示所有候选人
- 操作按钮：提供完整的管理功能
{
"candidates": {
"candidate_id_1": {
"name": "张三",
"votes": 5,
"order": 0
}
},
"voters": {
"voter_name_1": {
"votedFor": ["candidate_id_1", "candidate_id_3"]
}
},
"settings": {
"votingEnabled": true
}
}- 使用 Firebase Transaction 确保数据一致性
- 防止重复投票
- 支持取消投票
- 实时同步所有客户端
-
Firebase 安全规则
- 初始配置使用测试模式，任何人都可以读写数据
- 仅适合课堂环境和开发测试
- 生产环境请配置适当的安全规则
-
投票者身份
- 使用简单的名字输入，可能存在重名问题
- 建议在课堂环境使用，确保姓名唯一性
-
数据持久化
- Firebase 数据会永久保存
- 需要手动清理旧数据
-
免费额度
- Firebase 免费计划（Spark Plan）足够课堂使用
- 并发连接数限制：100 个
- 存储空间：1 GB
- 下载量：10 GB/月
如果需要更严格的安全控制，可以在 Firebase Console 的 Realtime Database → 规则中配置：
{
"rules": {
"candidates": {
".read": true,
".write": "auth != null"
},
"voters": {
".read": true,
".write": true
},
"settings": {
".read": true,
".write": "auth != null"
}
}
}A: 请检查 firebase-config.js 文件中的配置是否正确填写。
A:
- 检查浏览器控制台是否有错误信息
- 确认 Firebase Realtime Database 已创建
- 确认数据库规则允许读写
A:
- 检查网络连接
- 确认 Firebase 配置中的
databaseURL正确 - 刷新页面重新连接
A:
- 将所有文件上传到 Web 服务器
- 或使用 Firebase Hosting：
npm install -g firebase-tools firebase login firebase init hosting firebase deploy
- ✅ 课堂作品评选
- ✅ 团队内部投票
- ✅ 活动评选
- ✅ 小型比赛投票
- ✅ 意见收集
- 添加投票时间限制功能
- 支持匿名投票模式
- 导出投票结果为 Excel/CSV
- 添加投票历史记录
- 支持多轮投票
- 添加候选人描述/图片展示
- 添加用户认证（Firebase Authentication）
- 添加投票统计图表
- ✅ 初始版本发布
- ✅ 支持实时投票和数据同步
- ✅ 管理员页面和投票页面
- ✅ TOP3 高亮显示
- ✅ 响应式设计
本项目仅供学习和课堂使用。
如有问题或建议，请联系管理员。
祝您使用愉快！🎉