正文

宝宝才艺秀，Vue框架轻松实现线上投票，助力萌娃脱颖而出

/0 浏览量
0806

在宝宝才艺秀活动中，线上投票功能不仅能够吸引更多观众参与，还能有效提升孩子们的舞台自信。本文将为您介绍如何利用Vue框架轻松实现线上投票系统，帮助萌娃们在舞台上脱颖而出。

一、项目准备

在开始之前，我们需要准备以下工具和资源：

  1. Vue.js：官方推荐版本为2.6.11。
  2. Vue CLI：用于快速搭建Vue项目。
  3. Element UI：基于Vue 2.0的组件库，方便我们快速搭建页面。
  4. Vue Router：Vue官方的路由管理器。
  5. Axios：基于Promise的HTTP客户端，用于发送请求。

二、搭建项目

  1. 创建项目：使用Vue CLI创建一个新项目。
vue create baby-talent-show
  1. 安装依赖：安装Element UI、Vue Router和Axios。
npm install element-ui vue-router axios --save
  1. 配置路由：在src/router/index.js中配置路由。
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Vote from '@/components/Vote'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/vote',
      name: 'vote',
      component: Vote
    }
  ]
})
  1. 配置Axios：在src/main.js中配置Axios。
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'

Vue.prototype.$http = axios

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

三、设计投票页面

  1. 创建Vote组件：在src/components目录下创建Vote.vue。
<template>
  <div>
    <el-table :data="votes" style="width: 100%">
      <el-table-column prop="name" label="宝宝姓名" width="180"></el-table-column>
      <el-table-column prop="score" label="得分" width="180"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="vote(scope.row)">投票</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      votes: []
    }
  },
  methods: {
    getVotes() {
      this.$http.get('/api/votes').then(res => {
        this.votes = res.data
      })
    },
    vote(vote) {
      this.$http.post('/api/vote', { id: vote.id }).then(res => {
        this.getVotes()
      })
    }
  },
  created() {
    this.getVotes()
  }
}
</script>
  1. 创建Home组件：在src/components目录下创建Home.vue。
<template>
  <div>
    <el-button @click="goToVote">进入投票页面</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    goToVote() {
      this.$router.push('/vote')
    }
  }
}
</script>
  1. 配置Element UI：在src/main.js中引入Element UI。
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

四、后端接口

  1. 创建API接口：在src/api目录下创建index.js。
import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://localhost:3000'
})

export default {
  getVotes() {
    return instance.get('/votes')
  },
  vote(data) {
    return instance.post('/vote', data)
  }
}
  1. 启动后端服务：使用Express框架创建一个简单的后端服务。
const express = require('express')
const app = express()

app.get('/votes', (req, res) => {
  res.json([
    { id: 1, name: '宝宝A', score: 0 },
    { id: 2, name: '宝宝B', score: 0 },
    { id: 3, name: '宝宝C', score: 0 }
  ])
})

app.post('/vote', (req, res) => {
  const { id } = req.body
  const votes = [
    { id: 1, name: '宝宝A', score: 0 },
    { id: 2, name: '宝宝B', score: 0 },
    { id: 3, name: '宝宝C', score: 0 }
  ]
  const vote = votes.find(v => v.id === id)
  vote.score += 1
  res.json(vote)
})

app.listen(3000, () => {
  console.log('Server running on port 3000')
})
  1. 运行后端服务：在终端运行以下命令启动后端服务。
node index.js

五、测试与优化

  1. 访问前端页面：在浏览器中访问http://localhost:8080，点击“进入投票页面”按钮，即可进入投票页面。
  2. 进行投票测试：在投票页面，为宝宝们进行投票，查看分数变化。
  3. 优化与完善：根据实际情况，对前端页面和后端接口进行优化和完善。

通过以上步骤，您已经成功利用Vue框架实现了线上投票系统，助力萌娃们在舞台上脱颖而出。希望本文对您有所帮助！

-- 展开阅读全文 --