实现一个简单的投票应用：Vue 3 与实时数据
简介
在前端开发中，投票应用是一个经典的示例，既涉及用户交互，又能展示如何处理实时数据。在这篇博客中，我们将使用 Vue 3 的组合 API 和 setup 语法糖，构建一个简单的投票应用。该应用支持实时投票，用户可以选择不同的选项，并在投票后即时查看当前的统计结果。
项目结构
在开始之前，我们需要确定项目结构。我们的应用将由以下几个主要部分构成：
- 投票选项：用户可以选择的多个选项。
- 投票按钮：提交用户选择的投票。
- 显示结果：展示当前的投票统计结果。
1. 初始化项目
首先，使用 Vue CLI 创建一个新的 Vue 3 项目。在终端中运行以下命令：
npm install -g @vue/cli
vue create voting-app
选择 Vue 3 和 Babel。接着，进入项目目录并启动项目：
cd voting-app
npm run serve
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>
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>
5. 运行和测试应用
现在，我们可以重新启动开发服务器，查看投票应用的效果：
npm run serve
访问 http://localhost:8080，你应该能看到投票选项。选择一个选项，点击投票按钮后，你会看到投票结果实时更新。
6. 扩展功能
- 用户身份：可以考虑加入用户身份验证，确保每个用户只能投一次票。
- 存储数据：使用 Firebase 等云数据库存储投票数据，实现跨用户的实时更新。
- 投票截止：添加投票截止日期，禁止过期时间的投票。
结论
通过这篇博客，我们实现了一个简单但功能完整的投票应用。你可以通过以上的示例代码轻松上手 Vue 3 与组合 API。这个应用可以作为更复杂功能的基础，逐步扩展更多功能。