vue.js实现投票

Vue.js 实现投票功能

使用 Vue.js 实现投票功能可以分为前端界面设计和后端数据交互两部分。以下是一个完整的实现方案，包括数据绑定、事件处理和状态管理。

创建投票组件

在 Vue 中创建一个投票组件，用于显示投票选项和处理用户选择。

<template>
  <div class="vote-container">
    <h3>{{ question }}</h3>
    <div v-for="(option, index) in options" :key="index" class="vote-option">
      <button @click="vote(index)" :disabled="voted">
        {{ option.text }} ({{ option.count }})
      </button>
    </div>
    <p v-if="voted">您已投票，谢谢参与！</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      question: "您最喜欢的编程语言是？",
      options: [
        { text: "JavaScript", count: 0 },
        { text: "Python", count: 0 },
        { text: "Java", count: 0 },
        { text: "C++", count: 0 }
      ],
      voted: false
    };
  },
  methods: {
    vote(index) {
      if (!this.voted) {
        this.options[index].count++;
        this.voted = true;
        // 这里可以添加API调用将投票结果发送到后端
      }
    }
  }
};
</script>

<style>
.vote-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}
.vote-option {
  margin: 10px 0;
}
button {
  padding: 8px 16px;
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
}
</style>

添加实时更新功能

为了显示实时投票结果，可以使用 Vue 的计算属性或监听器。

computed: {
  totalVotes() {
    return this.options.reduce((total, option) => total + option.count, 0);
  },
  percentages() {
    return this.options.map(option => {
      return {
        text: option.text,
        percent: this.totalVotes > 0 
          ? Math.round((option.count / this.totalVotes) * 100) 
          : 0
      };
    });
  }
}

在模板中添加结果显示：

<div v-if="totalVotes > 0">
  <h4>投票结果：</h4>
  <div v-for="(item, index) in percentages" :key="index">
    {{ item.text }}: {{ item.percent }}%
  </div>
</div>

与后端API集成

实际应用中需要将投票数据保存到服务器。可以使用 Axios 进行 API 调用。

安装 Axios：

npm install axios

在组件中添加 API 调用：

import axios from 'axios';

methods: {
  async vote(index) {
    if (!this.voted) {
      try {
        const response = await axios.post('/api/vote', {
          questionId: 1,
          optionIndex: index
        });
        this.options[index].count++;
        this.voted = true;
      } catch (error) {
        console.error('投票失败:', error);
      }
    }
  },
  async fetchVotes() {
    try {
      const response = await axios.get('/api/votes/1');
      this.options = response.data.options;
    } catch (error) {
      console.error('获取投票数据失败:', error);
    }
  }
},
created() {
  this.fetchVotes();
}

使用 Vuex 管理状态

对于更复杂的应用，可以使用 Vuex 集中管理投票状态。

创建 store 模块：

// store/modules/vote.js
export default {
  state: {
    question: "",
    options: [],
    voted: false
  },
  mutations: {
    SET_VOTE_DATA(state, payload) {
      state.question = payload.question;
      state.options = payload.options;
    },
    INCREMENT_VOTE(state, index) {
      state.options[index].count++;
      state.voted = true;
    }
  },
  actions: {
    async fetchVoteData({ commit }, questionId) {
      const response = await axios.get(`/api/votes/${questionId}`);
      commit('SET_VOTE_DATA', response.data);
    },
    async submitVote({ commit }, { questionId, optionIndex }) {
      await axios.post('/api/vote', { questionId, optionIndex });
      commit('INCREMENT_VOTE', optionIndex);
    }
  }
};

在组件中使用 Vuex：

computed: {
  ...mapState('vote', ['question', 'options', 'voted'])
},
methods: {
  ...mapActions('vote', ['fetchVoteData', 'submitVote']),
  async vote(index) {
    if (!this.voted) {
      await this.submitVote({ questionId: 1, optionIndex: index });
    }
  }
},
created() {
  this.fetchVoteData(1);
}

添加动画效果

使用 Vue 的过渡系统为投票结果添加动画效果。

<transition-group name="fade" tag="div">
  <div v-for="(item, index) in percentages" :key="index" class="result-item">
    {{ item.text }}: {{ item.percent }}%
    <div class="progress-bar">
      <div 
        class="progress" 
        :style="{ width: item.percent + '%' }"
      ></div>
    </div>
  </div>
</transition-group>

添加 CSS 过渡效果：

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.progress-bar {
  height: 20px;
  background: #eee;
  margin: 5px 0;
}
.progress {
  height: 100%;
  background: #42b983;
  transition: width 0.5s ease;
}

这个实现涵盖了从基础投票功能到进阶状态管理的各个方面，可以根据实际需求进行扩展和调整。