使用 Vue.js 构建优雅问卷调查：便捷采集信息，轻松获取洞察

2023-10-15 04:29:06

在当今数字时代，信息收集和洞察挖掘变得越来越重要。问卷调查作为一种有效的工具，可以帮助企业、组织和研究人员收集宝贵的反馈并从中获取洞察，从而改进产品、服务和决策。使用 Vue.js 构建的问卷调查不仅拥有出色的用户体验，还能够实现数据收集的自动化，让您轻松获取所需的信息。

前提条件

在开始之前，您需要具备以下基础：

基础的 HTML、CSS 和 JavaScript 知识
Node.js 和 npm 的安装和使用经验
Vue.js 的基本概念和使用经验

步骤 1：项目初始化

使用以下命令创建一个新的 Vue.js 项目：

npx create-vue-app my-survey-app

cd my-survey-app

安装必要的依赖包：

npm install vue-router axios

步骤 2：创建问卷调查页面

在 src 目录下创建一个 Survey.vue 文件，作为问卷调查的主页面。
在 Survey.vue 文件中，添加以下代码：

<template>
  <div class="survey-container">
    <h1>问卷调查</h1>
    <form @submit.prevent="submitForm">
      <div class="question-container" v-for="(question, index) in questions" :key="index">
        <p>{{ question.text }}</p>
        <div class="answer-options">
          <label v-for="(option, optionIndex) in question.options" :key="optionIndex">
            <input type="radio" :name="question.name" :value="option.value">
            {{ option.text }}
          </label>
        </div>
      </div>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
import { ref } from 'vue'
import axios from 'axios'

export default {
  setup() {
    const questions = ref([
      {
        text: '您对我们的产品/服务满意吗？',
        name: 'q1',
        options: [
          { value: '非常满意', text: '非常满意' },
          { value: '满意', text: '满意' },
          { value: '一般', text: '一般' },
          { value: '不满意', text: '不满意' },
          { value: '非常不满意', text: '非常不满意' },
        ],
      },
      {
        text: '您认为我们的产品/服务有哪些需要改进的地方？',
        name: 'q2',
        options: [
          { value: '功能性', text: '功能性' },
          { value: '易用性', text: '易用性' },
          { value: '性能', text: '性能' },
          { value: '设计', text: '设计' },
          { value: '其他', text: '其他' },
        ],
      },
      {
        text: '您对我们的客服服务满意吗？',
        name: 'q3',
        options: [
          { value: '非常满意', text: '非常满意' },
          { value: '满意', text: '满意' },
          { value: '一般', text: '一般' },
          { value: '不满意', text: '不满意' },
          { value: '非常不满意', text: '非常不满意' },
        ],
      },
    ])

    const submitForm = async () => {
      const answers = []
      questions.value.forEach(question => {
        const selectedOption = document.querySelector(`input[name=${question.name}]:checked`)
        if (selectedOption) {
          answers.push({
            question: question.text,
            answer: selectedOption.value,
          })
        }
      })

      const response = await axios.post('/api/surveys', { answers })
      if (response.status === 200) {
        alert('问卷提交成功！')
      }
    }

    return {
      questions,
      submitForm,
    }
  },
}
</script>

步骤 3：创建路由

在 src/router/index.js 文件中，添加以下代码：

import { createRouter, createWebHistory } from 'vue-router'
import Survey from '../components/Survey.vue'

const routes = [
  {
    path: '/',
    name: 'Survey',
    component: Survey,
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router