WebMan テクノロジーを使用してオンライン投票システムを構築する方法
はじめに:
インターネットの継続的な人気に伴い、インターネット ユーザーの数も増加しています。急速に。政府、企業、団体、個人のいずれであっても、オンライン投票システムの重要性を徐々に認識してきました。この記事では、WebMan テクノロジーを使用してシンプルで実用的なオンライン投票システムを構築する方法を紹介し、関連するコード例を添付します。この記事を読んで、WebMan の基本技術を習得し、実際のプロジェクトに応用していただければ幸いです。
1. 実装のアイデア
オンライン投票システムの実装には、フロントエンド部分とバックエンド部分の両方の開発が必要です。フロントエンドは主に投票オプションの表示とユーザーの投票選択肢の取得を担当し、バックエンドはフロントエンドから渡されたデータを受信し、投票結果をデータベースに保存する責任を負います。このアイデアに基づいて、具体的な開発作業を開始できます。
2. フロントエンド開発
- フロントエンド ページの作成
まず、投票オプションを表示し、ユーザーの投票選択肢を取得するためのフロントエンド ページを作成する必要があります。 。 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>3. バックエンド開発
- バックエンド API の作成
次に、渡されたデータを受け取るバックエンド API を作成する必要があります。フロントエンドにアクセスし、投票結果がデータベースに保存されます。 API は、Node.js や 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('服务器已启动');
});- 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();
});4. デプロイメントとテスト
- フロントエンド ページをデプロイする
フロントエンド ページを静的ファイル サーバー (Nginx、Apache など) にデプロイします。 、など。 - バックエンド API をデプロイする
バックエンド API を Node.js または Flask をサポートするサーバーにデプロイします。 API が適切に実行されており、URL 経由でアクセスできることを確認してください。 - テスト
ブラウザでフロントエンド ページにアクセスし、対応するオプションを選択して送信ボタンをクリックします。すべてが正常であれば、バックエンド API はフロントエンドから渡されたデータを受信し、投票結果をデータベースに保存できるはずです。
結論:
この記事の紹介とコード例を通じて、読者は WebMan テクノロジを使用してシンプルなオンライン投票システムを構築する方法を理解できたと思います。もちろん、これは単なる基本的な例であり、実際の投票システムでは、セキュリティやパフォーマンスの最適化などの問題も考慮する必要があります。読者の皆様がさらなる研究と実践を通じて、WebMan テクノロジーをより複雑なプロジェクトに適用して、より多くの機能と革新を実現できることを願っています。
以上がWebManテクノロジーを使用したオンライン投票システムの構築方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。
メモ帳++7.3.1
使いやすく無料のコードエディター
ホットトピック
7723
15164314139652129025123329