实现一个简单的投票应用：Vue3与实时数据

在前端开发中，投票应用是一个经典的示例，它既涉及到用户交互，又能展示如何处理实时数据。在这篇博客中，我们将使用 Vue 3 的组合 API 和 setup 语法糖，来构建一个简单的投票应用。这个应用支持即刻投票，用户可以选择不同的选项，并且在投票后能实时看到当前的统计结果。

项目结构

在开始之前，我们需要确定一下项目结构。我们的应用将由以下几个主要部分构成：

  1. 投票选项 (选项可以是多个)
  2. 投票按钮
  3. 显示结果 (当前选票统计)
1. 初始化项目

首先，我们需要使用 Vue CLI 创建一个新的 Vue 3 项目。在终端中运行以下命令：

npm install -g @vue/cli
vue create voting-app
  • 1.
  • 2.

选择 Vue 3 和 Babel。

进入项目目录并启动项目：

cd voting-app
npm run serve
  • 1.
  • 2.
2. 创建投票应用组件

在 src/components 文件夹下创建一个新的组件 Voting.vue，用来实现我们的投票功能。

<template>
  <div class="voting-app">
    <h1>投票系统</h1>
    <div class="options">
      <label v-for="option in options" :key="option.text">
        <input
          type="radio"
          :value="option.text"
          v-model="selectedOption"
        />
        {{ option.text }}
      </label>
    </div>
    <button @click="submitVote">投票</button>
    <div v-if="results.length">
      <h2>投票结果</h2>
      <ul>
        <li v-for="(count, option) in results" :key="option">
          {{ option }}: {{ count }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
  name: 'Voting',
  setup() {
    const options = ref([
      { text: '选项 A' },
      { text: '选项 B' },
      { text: '选项 C' },
    ]);

    const selectedOption = ref(null);
    const results = reactive({});

    const submitVote = () => {
      if (selectedOption.value) {
        results[selectedOption.value] = (results[selectedOption.value] || 0) + 1;
        selectedOption.value = null; // 清空选中的选项
      } else {
        alert('请先选择一项投票！');
      }
    };

    return { options, selectedOption, results, submitVote };
  },
};
</script>

<style scoped>
.voting-app {
  max-width: 400px;
  margin: auto;
  text-align: center;
}

.options {
  margin-bottom: 20px;
}
</style>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
3. 解析代码

在上面的 Voting.vue 中，我们通过 Vue 3 的组合 API 来创建一个简单的投票系统。这里是各部分代码的解析：

  • 数据定义：
  • options：投票选项数组，使用 ref 进行响应式管理。
  • selectedOption：用户选择的选项，使用 ref 来保存当下选择。
  • results：存储投票结果，使用 reactive 创建响应式对象，它的键是选项文本，值是对应的票数。
  • 提交投票：
  • submitVote 函数在用户按下投票按钮后触发，检查是否已选择选项。如果已选择则将选中选项的票数加1，并重置选中状态。
  • HTML部分：
  • 渲染投票选项和结果。使用 v-for 指令动态生成选项和投票结果。
4. 在主应用中使用投票组件

现在我们已经创建了 Voting.vue 组件，接下来把它引入到主应用中。在 src/App.vue 中引入并使用它：

<template>
  <div id="app">
    <Voting />
  </div>
</template>

<script>
import Voting from './components/Voting.vue';

export default {
  name: 'App',
  components: {
    Voting,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
5. 运行和测试应用

现在我们可以重新启动开发服务器，查看我们的投票应用效果：

npm run serve
  • 1.

访问 http://localhost:8080，你应该能看到投票选项。选择一个选项，点击投票按钮后，你会看到投票结果实时更新。

6. 扩展功能
  • 用户身份：可以考虑加入用户身份验证，确保每个用户只能投一次票。
  • 存储数据：使用 Firebase 等云数据库存储投票数据，实现跨用户的实时更新。
  • 投票截止：添加投票截止日期，禁止过期时间的投票。
结尾

通过这一篇博客，我们实现了一个简单但功能完整的投票应用。你可以通过以上的示例代码轻松上手 Vue 3 与组合 API。这个应用可以作为更复杂功能的基础，逐步扩展更多功能。

 最后问候亲爱的朋友们，并诚挚地邀请你们阅读我的全新著作。 书籍简介

实现一个简单的投票应用：Vue3与实时数据_Vue