这篇文章将为大家详细讲解有关如何使用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实现一个简单的在线投票功能的详细内容,更多请关注编程学习网其它相关文章!