如何使用MySQL和JavaScript实现一个简单的在线投票功能-编程学习网

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

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

概述

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

步骤 1：设置 MySQL 数据库

创建一个新数据库，例如 "voting_system"。
在该数据库中，创建以下表格：

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 前端

创建一个 HTML 文件，例如 "index.html"：

<!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>

创建一个 JavaScript 文件，例如 "script.js"：

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 后端

创建一个 Node.js 文件，例如 "server.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：运行应用程序