使用JavaScript开发网页投票系统-猿码集

1. 简介

投票应用程序是Web应用程序中最常见的应用程序之一。这里将使用JavaScript和一些其他Web技术来创建一个简单的投票应用程序。这个应用程序将允许用户投票并显示结果。

2. 开发工具

为了构建这个投票应用程序，需要使用一些Web技术，并使用以下工具：

2.1 Web服务器

要在本地运行这个应用程序，需要安装Web服务器。这里使用Node.js来作为Web服务器。可以从https://nodejs.org/en/download/下载和安装Node.js。

2.2 前端框架

这里使用Bootstrap作为前端UI框架。Bootstrap提供了一个现成的组件库，可以使开发过程更快捷。

2.3 数据库

为了存储投票结果，需要使用一个数据库。这里使用MongoDB作为数据库。可以从https://www.mongodb.com/download-center下载并安装MongoDB。

3. 投票应用程序架构

这个投票应用程序将分为前端和后端两个部分。前端将使用HTML、CSS和JavaScript编写，并使用Bootstrap来构建UI。后端将使用Node.js和MongoDB。

3.1 前端

前端将采用单页应用程序(SPA)的架构。当用户在UI中进行投票时，SPA将使用AJAX调用后端API来保存投票结果，并使用JavaScript更新UI以显示新的投票结果。

3.2 后端

后端将使用Node.js和MongoDB来存储投票结果。

API将提供以下功能：

获取投票选项列表

获取投票结果

保存投票结果

4. 前端实现

这个应用程序的前端将在页面上显示两个候选项以供用户进行投票，同时，将显示投票结果。候选项的缩写和名称将保存在一个数组中：


let candidates = [
  {abbr: 'A', name: 'Candidate A', count: 0},
  {abbr: 'B', name: 'Candidate B', count: 0}
];

这里使用了jQuery和Bootstrap来简化UI的编写。在这里假设已经下载了这两个库，然后将它们包含在HTML文件中：


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Vote Application</title>
    <!-- https://getbootstrap.com/docs/4.5/getting-started/introduction/ -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container my-4">
      <h1>Vote Application</h1>
      <div id="candidates"></div>
      <div id="result"></div>
    </div>
    <!-- https://code.jquery.com/ -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- https://getbootstrap.com/docs/4.5/getting-started/introduction/ -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
  </body>
</html>

4.1 显示候选项

在页面上显示候选项，首先需要创建一个函数来生成HTML代码：


function generateCandidatesHtml() {
  const candidatesHtml = candidates.map(candidate => {
    return `
      <div class="form-check">
        <input class="form-check-input candidate-checkbox" type="checkbox" id="${candidate.abbr}">
        <label class="form-check-label" for="${candidate.abbr}">${candidate.name}</label>
      </div>
    `;
  }).join('');
  return `
    <h2>Candidates</h2>
    <div class="form-group">
      ${candidatesHtml}
    </div>
    <button class="btn btn-primary vote-button">Vote</button>
  `;
}

接下来，在页面上调用generateCandidatesHtml() 函数来显示候选项：


$('#candidates').html(generateCandidatesHtml());

4.2 显示投票结果

显示投票结果，也需要创建一个函数来生成HTML代码：


function generateResultHtml() {
  let totalVotes = candidates.reduce((acc, candidate) => {
    return acc + candidate.count;
  }, 0);
  const resultHtml = candidates.map(candidate => {
    return `
      <li>
        ${candidate.abbr}: ${candidate.name} - ${candidate.count} 
        (${totalVotes === 0 ? '0' : ((candidate.count / totalVotes) * 100).toFixed(2)}%)
      </li>
    `;
  }).join('');
  return `
    <h2>Result</h2>
    <ul>
      ${resultHtml}
    </ul>
    <p>Total votes: ${totalVotes}</p>
  `;
}

然后在页面上调用generateResultHtml()函数来显示投票结果：


$('#result').html(generateResultHtml());

4.3 投票处理

处理投票需要在“投票”按钮上注册一个点击事件处理程序，该事件处理程序将使用AJAX调用后端API来保存投票结果，并使用JavaScript更新UI以显示新的投票结果。


$('.vote-button').click(function() {
  const selectedCandidates = $('.candidate-checkbox:checked').map(function() {
    return this.id;
  }).get();
  if (selectedCandidates.length === 0) {
    alert('Please select at least one candidate');
    return;
  }
  const requestData = {candidates: selectedCandidates};
  $.ajax({
    type: 'POST',
    url: '/api/vote',
    contentType: 'application/json',
    data: JSON.stringify(requestData),
    success: function() {
      $.ajax({
        type: 'GET',
        url: '/api/result',
        success: function(result) {
          candidates = result;
          $('#candidates').html(generateCandidatesHtml());
          $('#result').html(generateResultHtml());
        }
      });
    },
    error: function() {
      alert('Failed to save vote.');
    }
  });
});

5. 后端实现

后端将使用Node.js和MongoDB来存储投票结果。

5.1 安装依赖项

npm init -y npm install express mongodb body-parser

5.2 创建Express应用程序

接下来，创建一个Express应用程序：


const express = require('express');
const bodyParser = require('body-parser');
const mongodb = require('mongodb');
const app = express();
const port = process.env.PORT || 3000;
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.listen(port, () => {
  console.log(`Server started at http://localhost:${port}`);
});

5.3 连接MongoDB

接下来连接MongoDB数据库：


const mongodbUrl = 'mongodb://localhost:27017/voteapp';
const MongoClient = mongodb.MongoClient;
let db;
MongoClient.connect(mongodbUrl, (err, client) => {
  if (err) throw err;
  db = client.db();
});

5.4 创建API

创建API来处理投票请求和获取投票结果的请求：


app.post('/api/vote', (req, res) => {
  const candidates = req.body.candidates;
  const updates = candidates.map(candidate => {
    return {
      updateOne: {
        filter: {abbr: candidate},
        update: {$inc: {count: 1}}
      }
    };
  });
  db.collection('candidates').bulkWrite(updates)
    .then(result => {
      res.sendStatus(200);
    })
    .catch(err => {
      console.log(err);
      res.sendStatus(500);
    });
});
app.get('/api/result', (req, res) => {
  db.collection('candidates').find().toArray()
    .then(result => {
      res.json(result);
    })
    .catch(err => {
      console.log(err);
      res.sendStatus(500);
    });
});

6. 结论

本文演示了使用JavaScript和其他Web技术创建一个简单的投票应用程序。前端使用了Bootstrap，后端使用了Node.js和MongoDB，通过AJAX实现了前端与后端之间的交互。

使用JavaScript开发网页投票系统