如何使用WebMan技術建立線上投票系統-Workerman-PHP中文網

首頁

php框架

Workerman

如何使用WebMan技術建立線上投票系統

王林

Aug 26, 2023 pm 10:43 PM

webman建構線上投票

如何使用WebMan技術建立線上投票系統

引言：
隨著網路的不斷普及，網民數量也迅速增加。無論是政府、企事業單位或個人，都逐漸意識到了線上投票系統的重要性。本文將介紹如何使用WebMan技術建立一個簡單而實用的線上投票系統，並附上相關的程式碼範例。希望讀者透過閱讀本文，能夠掌握基本的WebMan技術，並且能夠運用到實際專案中。

一、實現想法
線上投票系統的實作需要涉及前端和後端兩部分的開發。前端主要負責展示投票選項和獲取用戶的投票選擇，後端則負責接收前端傳遞的數據，並將投票結果保存在資料庫中。基於這個思路，我們可以開始進行具體的開發工作。

二、前端開發

建立前端頁面
首先，我們需要建立一個前端頁面用來展示投票選項和取得使用者的投票選擇。可以使用HTML和CSS來實作頁面的基本結構和樣式。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>在线投票系统</title>
    <style>
        /* 样式代码 */
    </style>
</head>
<body>
    <h1 id="在线投票系统">在线投票系统</h1>
    <form>
        <label for="option1">选项1：</label>
        <input type="radio" name="option" id="option1" value="1">
        <br>
        <label for="option2">选项2：</label>
        <input type="radio" name="option" id="option2" value="2">
        <br>
        <label for="option3">选项3：</label>
        <input type="radio" name="option" id="option3" value="3">
        <br>
        <button type="submit">提交</button>
    </form>
</body>
</html>

新增事件監聽
為了能夠取得使用者的投票選擇，我們需要在前端程式碼中加入事件監聽。當使用者點擊提交按鈕時，會觸發提交事件，並將選擇的選項的值傳遞給後端。

<script>
    document.querySelector('form').addEventListener('submit', function(event) {
        event.preventDefault();
        var selectedOption = document.querySelector('input[name="option"]:checked');
        if (selectedOption) {
            var selectedValue = selectedOption.value;
            // 将选项值传递给后端处理
            submitVote(selectedValue);
        } else {
            alert('请选择一个选项');
        }
    });

    function submitVote(option) {
        // 使用Ajax将选项值传递给后端
        // 代码示例略
    }
</script>

三、後端開發

建立後端API
接下來，我們需要建立後端API用於接收前端傳遞的數據，然後將投票結果保存到資料庫中。可以使用例如Node.js或Flask等後端框架來建立API。

// Node.js示例代码
const express = require('express');
const app = express();

app.post('/vote', function(req, res) {
    var option = req.body.option; // 前端传递的选项值
    // 将投票结果保存到数据库中
    // 代码示例略
    res.send('投票成功');
});

app.listen(3000, function() {
    console.log('服务器已启动');
});

處理CORS跨域問題
由於前端和後端在不同的域下，會涉及CORS（跨域資源共享）問題。為了避免瀏覽器的安全限制，我們需要在後端程式碼中加入相關的處理。

// Node.js示例代码
app.use(function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*'); // 允许任意域的请求
    res.header('Access-Control-Allow-Methods', 'GET,POST'); // 允许跨域的请求方法
    res.header('Access-Control-Allow-Headers', 'Content-Type'); // 允许传递指定的请求头
    next();
});

四、部署和測試