校友信息管理系统与网页版投票功能的实现

小明：老王，最近我在做一个“校友信息管理系统”，想加一个投票功能，你觉得怎么做比较好？

老王：嗯，投票功能挺常见的，但要结合到校友系统里，得考虑用户权限、数据存储和前端展示。你用什么语言开发的？

小明：我用的是PHP和MySQL，前端是HTML和JavaScript。不过我对后端逻辑不太熟悉，特别是怎么处理投票的数据。

老王：那我们可以从数据库设计开始。首先，你需要一个投票表，比如叫votes，里面应该包含投票ID、问题内容、选项、创建时间等字段。

小明：那具体怎么建表呢？有没有例子？

老王：当然有，你可以这样写SQL语句：

CREATE TABLE votes (
    id INT AUTO_INCREMENT PRIMARY KEY,
    question VARCHAR(255) NOT NULL,
    option1 VARCHAR(255),
    option2 VARCHAR(255),
    option3 VARCHAR(255),
    option4 VARCHAR(255),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
    

小明：明白了，那用户怎么投票呢？是不是需要一个表来记录用户的投票结果？

老王：对，可以建一个vote_results表，用来保存每个用户的选择，避免重复投票。结构大概是这样的：

CREATE TABLE vote_results (
    id INT AUTO_INCREMENT PRIMARY KEY,
    user_id INT NOT NULL,
    vote_id INT NOT NULL,
    selected_option ENUM('option1', 'option2', 'option3', 'option4') NOT NULL,
    voted_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES users(id),
    FOREIGN KEY (vote_id) REFERENCES votes(id)
);
    

小明：这个表设计得很好，能防止重复投票。那前端怎么显示投票界面呢？

老王：前端可以用HTML和JavaScript实现。比如，从服务器获取投票题目和选项，然后动态生成单选按钮，用户点击后发送AJAX请求提交选择。

小明：那具体的代码怎么写呢？能给我个例子吗？

老王：好的，下面是一个简单的HTML页面，它会从服务器获取投票数据并显示出来：

<div id="vote-container"></div>

<script>
fetch('/get-votes.php')
    .then(response => response.json())
    .then(data => {
        let html = '<h3>' + data.question + '</h3>';
        for (let i = 1; i <= 4; i++) {
            html += '<label><input type="radio" name="option" value="' + i + '"> ' + data['option' + i] + '</label><br>';
        }
        html += '<button onclick="submitVote()">提交投票</button>';
        document.getElementById('vote-container').innerHTML = html;
    });
    
function submitVote() {
    const selected = document.querySelector('input[name="option"]:checked');
    if (!selected) {
        alert('请选择一个选项！');
        return;
    }

    fetch('/submit-vote.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ option: selected.value })
    }).then(response => {
        if (response.ok) {
            alert('投票成功！');
        } else {
            alert('投票失败，请重试！');
        }
    });
}
</script>
    

小明：这段代码看起来不错，那后端怎么处理呢？

老王：后端需要用PHP来接收数据，并插入到vote_results表中。同时还要检查用户是否已经投过票，避免重复提交。

小明：那具体怎么判断用户是否已投票？

老王：可以在提交投票时，根据用户ID查询vote_results表，看是否有对应的记录。如果有的话，就提示用户不能重复投票。

小明：那后端的PHP代码应该怎么写？

老王：下面是一个简单的例子，假设用户ID是从session中获取的：

prepare("SELECT * FROM vote_results WHERE user_id = ? AND vote_id = ?");
$stmt->execute([$user_id, 1]); // 假设当前投票ID为1
if ($stmt->rowCount() > 0) {
    echo json_encode(['status' => 'error', 'message' => '您已投过票！']);
    exit;
}

// 插入投票结果
$stmt = $pdo->prepare("INSERT INTO vote_results (user_id, vote_id, selected_option) VALUES (?, ?, ?)");
$stmt->execute([$user_id, 1, $option]);

echo json_encode(['status' => 'success', 'message' => '投票成功！']);
?>
    

小明：这样就能防止重复投票了。那前端怎么显示投票结果呢？

老王：你可以再写一个PHP接口，返回各个选项的投票数量，前端用图表或者柱状图展示。

小明：那具体怎么统计投票数呢？

老王：可以用SQL的COUNT函数，比如统计option1的投票数：

SELECT COUNT(*) AS count FROM vote_results WHERE vote_id = 1 AND selected_option = 'option1';
    

小明：明白了，这样就能得到每个选项的票数了。那前端怎么把这些数据显示出来呢？

老王：你可以用JavaScript从服务器获取数据，然后用ECharts或Chart.js这类库绘制图表。这里给你一个简单的例子：

fetch('/get-vote-results.php')
    .then(response => response.json())
    .then(data => {
        const ctx = document.getElementById('myChart').getContext('2d');
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['选项1', '选项2', '选项3', '选项4'],
                datasets: [{
                    label: '投票数',
                    data: [data.option1, data.option2, data.option3, data.option4],
                    backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0']
                }]
            },
            options: {
                responsive: false,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    });
    

小明：太好了，这样就能直观地看到投票结果了。那整个系统的架构是怎么样的？

老王：整体来说，系统分为前端和后端。前端负责展示数据和用户交互，后端处理业务逻辑和数据库操作。使用PHP作为后端语言，MySQL作为数据库，前端用HTML、CSS和JavaScript。

小明：那用户登录后才能投票，对吧？

老王：是的，你需要在用户登录后设置session，这样才能识别用户身份。同时，在投票前也要验证用户是否已登录。

小明：明白了，那如果我要扩展这个系统，比如添加多个投票活动，该怎么处理？

老王：可以增加一个votes表，每个投票活动都有一个唯一的ID，用户可以选择不同的投票活动进行投票。这样系统就更灵活了。

小明：这真是一个不错的思路。那我现在知道了如何在校友信息管理系统中实现网页版投票功能，感觉收获很大！

老王：没错，技术就是这样一步步积累起来的。如果你还有其他问题，随时来找我讨论。