EasyPollVote [开发日志 #1]

Source: Dev.to

欢迎阅读第一篇 DEV LOG！

欢迎阅读我的全栈应用 EasyPollVote (EasyPV) 的第一篇 Dev Log！

什么是 EasyPollVote (EasyPV)？

EasyPollVote 是一个轻量级投票应用，允许你创建自定义投票并分享私密链接，任何人都可以投票——无需账号。

示例：
投票可以是 “你喜欢猫还是狗？”，选项为 “猫” 或 “狗”。 创建投票后，你分享链接，投票者即可立即提交选择。

注意： 功能集合可能会随时间演进。
当前重点： 学习如何使用 Supabase。

当前技术栈

项目基于 Next.js + Supabase 模板 开始。

当前进度

目前该应用是一个仅含硬编码值的原型。主要功能是将 GET 和 POST 请求与 Supabase 集成。

数据库表

提交表单目前要求填写 姓名、邮箱，以及在 皮卡丘 或 水箭龟 之间的选择。验证非常简陋，用户可以多次投票。

POST 请求（提交投票）

if (formData.vote == "") { // All values need to be submitted
   setMessage("Error: Please select a Pokémon to vote for.");
} else { // Upload the data to the database via POST request
   const res = await fetch("/vote", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(formData),
   });

   if (!res.ok) {
      setMessage("Error: Form submission failed. Please try again.");
   } else { // Form has been submitted and reset the form
      setMessage("Form submitted successfully! Thank you for voting.");
      setFormData({ name: "", email: "", vote: "" });
   }
}

GET 请求（显示投票总数）

useEffect(() => {
   async function fetchVotes() {
      const res = await fetch('/vote'); // your GET route
      const data = await res.json();

      // Count votes
      let pika = 0;
      let blast = 0;
      let totalVotes = 0;

      data.TotalVotes.forEach((row) => {
        if (row.Vote === 'Pikachu') pika++;
        if (row.Vote === 'Blastoise') blast++;
      });
      totalVotes = pika + blast;

      // Set the scores after calculation
      setTotalVotes(totalVotes);
      setPikachuVotes(pika);
      setBlastoiseVotes(blast);
      setLoading(false);
   }

   fetchVotes();
}, []);

所有数据库交互均位于 /api/vote 文件夹下（例如 route.ts）。

官方网站

在此查看线上项目：

欢迎使用虚假邮箱和姓名进行测试。所有功能均按预期工作，期待收到你的反馈！

有任何问题/评论/反馈吗？期待听到你的声音！

注意： 本帖由大学进行监控，仓库目前为私有，预计在初夏前开放。