文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何使用MySQL和JavaScript实现一个简单的在线投票功能

码农的荣耀

码农的荣耀

2024-04-13 14:09

关注

这篇文章将为大家详细讲解有关如何使用MySQL和JavaScript实现一个简单的在线投票功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

如何使用 MySQL 和 JavaScript 实现简单的在线投票功能

概述

在线投票功能允许用户通过网络投出他们的选票。本指南将介绍如何使用 MySQL 和 JavaScript 实现一个简单的在线投票系统。

步骤 1:设置 MySQL 数据库

CREATE TABLE votes (
  id INT NOT NULL AUTO_INCREMENT,
  candidate_id INT NOT NULL,
  user_id INT NOT NULL,
  timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (id)
);

CREATE TABLE candidates (
  id INT NOT NULL AUTO_INCREMENT,
  name VARCHAR(255) NOT NULL,
  PRIMARY KEY (id)
);

步骤 2:创建 JavaScript 前端

<!DOCTYPE html>
<html>
<head>
  <title>Online Voting System</title>
</head>
<body>
  <h1>Online Voting</h1>
  <select id="candidate">
    <option value="1">Candidate 1</option>
    <option value="2">Candidate 2</option>
  </select>
  <button type="button" id="submit-vote">Submit Vote</button>
</body>
</html>
const submitVoteButton = document.getElementById("submit-vote");

submitVoteButton.addEventListener("click", async () => {
  const candidateId = document.getElementById("candidate").value;
  const userId = 1; // Replace with actual user ID

  const response = await fetch("vote", {
    method: "POST",
    body: JSON.stringify({ candidateId, userId }),
    headers: { "Content-Type": "application/json" }
  });

  const data = await response.json();

  alert(data.message);
});

步骤 3:创建 Node.js 后端

const express = require("express");
const bodyParser = require("body-parser");
const mysql = require("mysql");

const app = express();

const pool = mysql.createPool({
  host: "localhost",
  user: "root",
  password: "",
  database: "voting_system"
});

app.use(bodyParser.json());

app.post("/vote", async (req, res) => {
  const { candidateId, userId } = req.body;

  try {
    await pool.query("INSERT INTO votes (candidate_id, user_id) VALUES (?, ?)", [candidateId, userId]);
    res.json({ message: "Vote submitted successfully" });
  } catch (err) {
    console.error(err);
    res.status(500).json({ message: "Error submitting vote" });
  }
});

app.listen(3000);

步骤 4:运行应用程序

node server.js

测试投票功能

SELECT * FROM votes;

以上就是如何使用MySQL和JavaScript实现一个简单的在线投票功能的详细内容,更多请关注编程学习网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯