vue实现报名统计参数

Vue 实现报名统计参数

在 Vue 中实现报名统计功能，通常需要结合表单数据绑定、状态管理和后端 API 调用。以下是一个完整的实现方案：

数据绑定与表单处理

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <input v-model="formData.name" placeholder="姓名" required>
      <input v-model="formData.email" type="email" placeholder="邮箱" required>
      <select v-model="formData.course">
        <option value="vue">Vue 课程</option>
        <option value="react">React 课程</option>
      </select>
      <button type="submit">提交报名</button>
    </form>

    <div v-if="stats">
      <h3>报名统计</h3>
      <p>总人数: {{ stats.total }}</p>
      <p>Vue 课程: {{ stats.vue }}</p>
      <p>React 课程: {{ stats.react }}</p>
    </div>
  </div>
</template>

JavaScript 逻辑

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        email: '',
        course: 'vue'
      },
      stats: null
    }
  },
  methods: {
    async handleSubmit() {
      try {
        // 提交报名数据到后端
        const response = await axios.post('/api/registrations', this.formData)

        // 获取更新后的统计数据
        this.fetchStats()

        // 清空表单
        this.formData = {
          name: '',
          email: '',
          course: 'vue'
        }
      } catch (error) {
        console.error('报名失败:', error)
      }
    },
    async fetchStats() {
      try {
        const response = await axios.get('/api/registrations/stats')
        this.stats = response.data
      } catch (error) {
        console.error('获取统计失败:', error)
      }
    }
  },
  mounted() {
    // 组件加载时获取初始统计数据
    this.fetchStats()
  }
}
</script>

后端 API 示例（Node.js）

// 假设使用 Express
const express = require('express')
const app = express()
app.use(express.json())

let registrations = []

// 提交报名
app.post('/api/registrations', (req, res) => {
  registrations.push(req.body)
  res.status(201).send({ success: true })
})

// 获取统计数据
app.get('/api/registrations/stats', (req, res) => {
  const stats = {
    total: registrations.length,
    vue: registrations.filter(r => r.course === 'vue').length,
    react: registrations.filter(r => r.course === 'react').length
  }
  res.json(stats)
})

app.listen(3000)

高级功能实现

实时统计更新

使用 WebSocket 或 Socket.io 实现实时统计更新：

// 前端添加
created() {
  socket.on('stats-updated', (newStats) => {
    this.stats = newStats
  })
}

// 后端修改
app.post('/api/registrations', (req, res) => {
  registrations.push(req.body)
  io.emit('stats-updated', calculateStats())
  res.status(201).send({ success: true })
})

本地存储统计

使用 Vuex 管理报名状态：

// store.js
export default new Vuex.Store({
  state: {
    registrations: [],
    stats: {}
  },
  mutations: {
    ADD_REGISTRATION(state, payload) {
      state.registrations.push(payload)
      state.stats = calculateStats(state.registrations)
    }
  },
  actions: {
    async submitRegistration({ commit }, formData) {
      await axios.post('/api/registrations', formData)
      commit('ADD_REGISTRATION', formData)
    }
  }
})

function calculateStats(registrations) {
  return {
    total: registrations.length,
    vue: registrations.filter(r => r.course === 'vue').length,
    react: registrations.filter(r => r.course === 'react').length
  }
}

可视化统计图表

集成 ECharts 或 Chart.js 显示统计图表：

<template>
  <div>
    <canvas ref="chart" width="400" height="200"></canvas>
  </div>
</template>

<script>
import Chart from 'chart.js'

export default {
  props: ['stats'],
  watch: {
    stats: {
      handler(newStats) {
        this.renderChart(newStats)
      },
      immediate: true
    }
  },
  methods: {
    renderChart(stats) {
      new Chart(this.$refs.chart, {
        type: 'bar',
        data: {
          labels: ['Vue 课程', 'React 课程', '总计'],
          datasets: [{
            label: '报名人数',
            data: [stats.vue, stats.react, stats.total],
            backgroundColor: [
              '#41b883',
              '#61dafb',
              '#35495e'
            ]
          }]
        }
      })
    }
  }
}
</script>

以上实现涵盖了从基础表单处理到高级统计展示的完整流程，可根据实际需求选择适合的方案组合使用。