Bagaimana untuk membina sistem pengundian dalam talian menggunakan teknologi WebMan-Workerman-php.cn

Bagaimana untuk membina sistem pengundian dalam talian menggunakan teknologi WebMan

王林

Lepaskan： 2023-08-26 22:43:44

asal

960 orang telah melayarinya

Bagaimana untuk membina sistem pengundian dalam talian menggunakan teknologi WebMan

Cara menggunakan teknologi WebMan untuk membina sistem pengundian dalam talian

Pengenalan:
Dengan populariti Internet yang berterusan, bilangan pengguna Internet juga meningkat dengan pesat. Sama ada kerajaan, perusahaan, institusi atau individu, mereka secara beransur-ansur menyedari kepentingan sistem pengundian dalam talian. Artikel ini akan memperkenalkan cara menggunakan teknologi WebMan untuk membina sistem pengundian dalam talian yang mudah dan praktikal, dan melampirkan contoh kod yang berkaitan. Saya berharap pembaca dapat menguasai teknologi asas WebMan dengan membaca artikel ini dan mengaplikasikannya pada projek sebenar.

1. Idea pelaksanaan
Pelaksanaan sistem pengundian dalam talian memerlukan pembangunan bahagian hadapan dan bahagian belakang. Bahagian hadapan bertanggungjawab terutamanya untuk memaparkan pilihan pengundian dan mendapatkan pilihan pengundian pengguna, manakala bahagian belakang bertanggungjawab untuk menerima data yang diluluskan oleh bahagian hadapan dan menyimpan keputusan pengundian dalam pangkalan data. Berdasarkan idea ini, kita boleh memulakan kerja pembangunan khusus.

2. Pembangunan bahagian hadapan

Buat halaman hadapan
Pertama, kita perlu mencipta halaman hadapan untuk memaparkan pilihan pengundian dan mendapatkan pilihan pengundian pengguna. Anda boleh menggunakan HTML dan CSS untuk melaksanakan struktur dan gaya asas halaman.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>在线投票系统</title>
    <style>
        /* 样式代码 */
    </style>
</head>
<body>
    <h1>在线投票系统</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>

Salin selepas log masuk

Tambah pendengar acara
Untuk mendapatkan pilihan pengundian pengguna, kami perlu menambah pendengar acara dalam kod bahagian hadapan. Apabila pengguna mengklik butang hantar, acara serah dicetuskan dan nilai pilihan yang dipilih dihantar ke bahagian belakang.

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

Salin selepas log masuk

3. Pembangunan bahagian belakang

Buat API bahagian belakang
Seterusnya, kita perlu mencipta API bahagian belakang untuk menerima data yang diluluskan oleh bahagian hadapan, dan kemudian simpan keputusan pengundian ke pangkalan data. API boleh dibuat menggunakan rangka kerja bahagian belakang seperti Node.js atau Flask.

// 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('服务器已启动');
});

Salin selepas log masuk

Mengendalikan isu merentas domain CORS
Memandangkan bahagian hadapan dan bahagian belakang berada dalam domain yang berbeza, isu CORS (perkongsian sumber merentas domain) akan terlibat. Untuk mengelakkan sekatan keselamatan penyemak imbas, kami perlu menambah pemprosesan yang berkaitan dalam kod bahagian belakang.

// 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();
});

Salin selepas log masuk

4. Penggunaan dan ujian

Sebarkan halaman hujung hadapan
Sebarkan halaman hujung hadapan ke mana-mana pelayan fail statik, seperti Nginx, Apache, dll.
Deploy Backend API
Deploy backend API ke pelayan yang menyokong Node.js atau Flask. Pastikan API berjalan dengan betul dan boleh diakses melalui URL.
Uji
Lawati halaman hadapan dalam penyemak imbas anda, pilih pilihan yang sesuai dan klik butang hantar. Jika semuanya baik-baik saja, API bahagian belakang sepatutnya boleh menerima data yang diluluskan oleh bahagian hadapan dan menyimpan hasil undian ke pangkalan data.

Kesimpulan:
Melalui pengenalan dan contoh kod artikel ini, saya percaya bahawa pembaca telah memahami cara menggunakan teknologi WebMan untuk membina sistem pengundian dalam talian yang mudah. Sudah tentu, ini hanyalah contoh asas Sistem pengundian sebenar juga perlu mempertimbangkan isu-isu seperti keselamatan dan pengoptimuman prestasi. Diharapkan pembaca dapat menggunakan teknologi WebMan untuk projek yang lebih kompleks melalui kajian dan amalan lanjut untuk mencapai lebih banyak fungsi dan inovasi.

Atas ialah kandungan terperinci Bagaimana untuk membina sistem pengundian dalam talian menggunakan teknologi WebMan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!