使用Vue.js构建在线投票和调查问卷

Vue.js 是一种流行的 JavaScript 框架，用于构建用户界面。它的简洁性和灵活性使得它成为开发者们喜爱的选择。在本文中，我们将探讨如何使用 Vue.js 构建一个在线投票和调查问卷的应用程序。我们将使用 Vue.js 的核心功能和相关插件来实现这个功能强大的应用程序。

准备工作

在开始之前，我们需要确保已经安装了 Node.js 和 Vue CLI。如果你还没有安装这些工具，请按照官方文档的指示进行安装。

创建Vue项目

首先，我们需要创建一个新的 Vue 项目。打开终端并执行以下命令：

vue create voting-survey-app

然后，选择你喜欢的预设配置，或者使用默认配置。等待项目创建完成后，进入项目目录：

cd voting-survey-app

添加所需的插件

我们将使用 Element UI 来构建用户界面，并使用 axios 来处理与后端的数据交互。在终端中执行以下命令来安装这些插件：

npm install element-ui axios

安装完成后，我们需要将这些插件导入到我们的 Vue 项目中。打开 main.js 文件，并添加以下代码：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'

Vue.use(ElementUI)
Vue.prototype.$http = axios

创建投票组件

现在，让我们创建一个简单的投票组件。在 src/components 目录下创建一个名为 Vote.vue 的文件，并添加以下代码：

<template>
  <div>
    <h2>{{ question }}</h2>
    <ul>
      <li v-for="option in options" :key="option.id">
        <label>
          <input type="radio" :value="option.id" v-model="selectedOption">
          {{ option.text }}
        </label>
      </li>
    </ul>
    <button @click="submitVote">提交投票</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      question: '你最喜欢的编程语言是什么？',
      options: [
        { id: 1, text: 'JavaScript' },
        { id: 2, text: 'Python' },
        { id: 3, text: 'Java' },
        { id: 4, text: 'C++' }
      ],
      selectedOption: null
    }
  },
  methods: {
    submitVote() {
      if (this.selectedOption) {
        this.$http.post('/api/vote', { optionId: this.selectedOption })
          .then(response => {
            // 处理投票成功的逻辑
          })
          .catch(error => {
            // 处理投票失败的逻辑
          })
      }
    }
  }
}
</script>

创建调查问卷组件

接下来，我们将创建一个调查问卷组件。在 src/components 目录下创建一个名为 Survey.vue 的文件，并添加以下代码：

<template>
  <div>
    <h2>{{ question }}</h2>
    <textarea v-model="answer" placeholder="请输入你的答案"></textarea>
    <button @click="submitAnswer">提交答案</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      question: '你最喜欢的编程语言是什么？',
      answer: ''
    }
  },
  methods: {
    submitAnswer() {
      if (this.answer) {
        this.$http.post('/api/answer', { answer: this.answer })
          .then(response => {
            // 处理提交答案成功的逻辑
          })
          .catch(error => {
            // 处理提交答案失败的逻辑
          })
      }
    }
  }
}
</script>

添加路由和视图

现在，我们需要配置路由和视图，以便在应用程序中导航到投票和调查问卷组件。打开 src/router/index.js 文件，并添加以下代码：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Vote from '../components/Vote.vue'
import Survey from '../components/Survey.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/vote', component: Vote },
  { path: '/survey', component: Survey }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

创建后端API

最后，我们需要创建后端 API 来处理投票和答案的提交。这里我们使用简化的示例，仅模拟数据的接收和处理。在 src 目录下创建一个名为 api.js 的文件，并添加以下代码：

import express from 'express'

const app = express()

app.use(express.json())

app.post('/api/vote', (req, res) => {
  // 处理投票的逻辑
  res.send('投票成功！')
})

app.post('/api/answer', (req, res) => {
  // 处理答案的逻辑
  res.send('答案提交成功！')
})

app.listen(3000, () => {
  console.log('后端服务器已启动，监听端口 3000')
})

运行应用程序

现在，我们已经完成了应用程序的开发。在终端中执行以下命令来启动前端和后端服务器：

npm run serve

打开浏览器并访问 http://localhost:8080，你将看到一个简单的投票和调查问卷应用程序。通过点击导航链接，你可以切换到投票和调查问卷页面，并提交你的投票和答案。

结论

在本文中，我们学习了如何使用 Vue.js 构建一个在线投票和调查问卷的应用程序。我们使用了 Vue.js 的核心功能和相关插件，以及后端 API 来处理数据的提交。希望这篇文章对你理解 Vue.js 的应用有所帮助！