如何使用MySQL和JavaScript实现一个简单的在线投票功能
码农的荣耀
2024-04-13 14:09
短信预约 Java-IT技能 免费直播动态提醒
这篇文章将为大家详细讲解有关如何使用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：运行应用程序
- 在终端中运行以下命令：
node server.js- 打开浏览器，访问 "http://localhost:3000"。
- 从下拉菜单中选择候选人，然后单击 "Submit Vote" 按钮。
测试投票功能
- 打开 MySQL 数据库并运行以下查询：
SELECT * FROM votes;- 你应该看到一个新条目，其中包含所投选票的信息。
以上就是如何使用MySQL和JavaScript实现一个简单的在线投票功能的详细内容，更多请关注编程学习网其它相关文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
