1. 项目概述与技术栈选型
这套HTML问卷调查系统信息管理系统采用当前主流的前后端分离架构，由SpringBoot后端+Vue前端+MySQL数据库组成。作为一个开箱即用的解决方案，它特别适合需要快速搭建在线问卷平台的中小企业和教育机构。
技术栈选择体现了现代Web开发的黄金组合：
- SpringBoot 2.7.x：简化了传统Spring应用的初始搭建和开发过程，内置Tomcat服务器，通过自动配置机制大幅减少了XML配置
- Vue 3.x：采用Composition API编写，配合Vue Router和Axios实现SPA应用，前端工程使用Vite构建工具
- MySQL 8.0：关系型数据库存储问卷结构和提交数据，采用InnoDB引擎保证事务完整性
- Element Plus：作为UI组件库提供美观的表单控件和布局系统
提示：系统要求JDK 11+和Node.js 16+环境，数据库推荐MySQL 8.0以上版本以获得更好的JSON字段支持
2. 系统架构与核心功能模块
2.1 后端SpringBoot工程结构
code复制survey-backend/
├── src/main/java
│ ├── com.survey.controller # 控制器层
│ ├── com.survey.service # 业务逻辑层
│ ├── com.survey.repository # 数据访问层
│ ├── com.survey.entity # 实体类
│ └── com.survey.config # 配置类
├── src/main/resources
│ ├── application.yml # 主配置文件
│ └── application-dev.yml # 开发环境配置
核心API设计遵循RESTful规范：
POST /api/surveys- 创建新问卷GET /api/surveys/{id}- 获取问卷详情POST /api/submissions- 提交问卷答案GET /api/statistics/{surveyId}- 获取统计结果
2.2 前端Vue工程结构
code复制survey-frontend/
├── public/ # 静态资源
├── src/
│ ├── api/ # 接口定义
│ ├── assets/ # 样式和图片
│ ├── components/ # 公共组件
│ ├── router/ # 路由配置
│ ├── stores/ # Pinia状态管理
│ ├── utils/ # 工具函数
│ ├── views/ # 页面组件
│ └── App.vue # 根组件
动态表单渲染采用递归组件设计，支持嵌套问题结构：
vue复制<template>
<div v-for="question in questions" :key="question.id">
<component
:is="getComponentType(question.type)"
:question="question"
@update="handleAnswerChange"
/>
</div>
</template>
3. 数据库设计与关键实现
3.1 MySQL表结构设计
sql复制CREATE TABLE `survey` (
`id` BIGINT NOT NULL AUTO_INCREMENT,
`title` VARCHAR(100) NOT NULL,
`description` TEXT,
`start_time` DATETIME,
`end_time` DATETIME,
`creator_id` BIGINT NOT NULL,
`status` TINYINT DEFAULT 0,
`config` JSON, -- 存储问卷样式配置
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
CREATE TABLE `question` (
`id` BIGINT NOT NULL AUTO_INCREMENT,
`survey_id` BIGINT NOT NULL,
`content` TEXT NOT NULL,
`type` ENUM('radio','checkbox','text','rating') NOT NULL,
`required` BOOLEAN DEFAULT false,
`options` JSON, -- 存储选项数据
`sort_order` INT DEFAULT 0,
PRIMARY KEY (`id`),
FOREIGN KEY (`survey_id`) REFERENCES survey(`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
3.2 SpringBoot与Vue的跨域处理
后端配置CORS策略：
java复制@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:5173")
.allowedMethods("*")
.allowCredentials(true);
}
}
前端axios实例配置：
javascript复制const service = axios.create({
baseURL: import.meta.env.VITE_API_URL,
timeout: 10000,
withCredentials: true
})
4. 部署与运行指南
4.1 开发环境准备
- 后端环境：
bash复制# 克隆项目
git clone https://github.com/example/survey-system.git
cd survey-backend
# 安装依赖（使用Maven）
mvn clean install
# 启动应用
mvn spring-boot:run -Dspring-boot.run.profiles=dev
- 前端环境：
bash复制cd survey-frontend
npm install
npm run dev
4.2 生产环境部署（以宝塔面板为例）
- 创建MySQL数据库并导入初始SQL
- 修改后端
application-prod.yml中的数据库连接配置 - 打包后端项目：
bash复制mvn package -DskipTests
- 将生成的
survey-backend-0.0.1-SNAPSHOT.jar上传至服务器 - 使用PM2管理Node进程：
bash复制npm run build
pm2 serve dist 8080 --spa
注意：Nginx配置需要添加以下规则处理前端路由：
nginx复制location / {
try_files $uri $uri/ /index.html;
}
5. 特色功能与扩展建议
5.1 动态问卷逻辑跳转
通过question表的logic字段存储跳转规则：
json复制{
"jumpRules": [
{
"sourceQuestionId": 1,
"selectedOption": "A",
"targetQuestionId": 3
}
]
}
前端实现跳转逻辑：
javascript复制const shouldShow = computed(() => {
const rules = currentQuestion.value.logic?.jumpRules || []
return rules.every(rule => {
const answer = answers.value[rule.sourceQuestionId]
return !answer || !answer.includes(rule.selectedOption)
})
})
5.2 数据可视化扩展
集成ECharts实现统计图表：
vue复制<template>
<div ref="chartDom" style="width:600px;height:400px;"></div>
</template>
<script setup>
import * as echarts from 'echarts'
const chartDom = ref(null)
onMounted(() => {
const chart = echarts.init(chartDom.value)
chart.setOption({
tooltip: {},
xAxis: { data: ['选项A', '选项B', '选项C'] },
yAxis: {},
series: [{ type: 'bar', data: [45, 30, 25] }]
})
})
</script>
6. 常见问题排查
-
前端无法连接后端API：
- 检查
VITE_API_URL环境变量是否配置正确 - 确认后端CORS配置包含前端地址
- 使用浏览器开发者工具查看网络请求详情
- 检查
-
MySQL时区问题：
yaml复制# application.yml
spring:
datasource:
url: jdbc:mysql://localhost:3306/survey?serverTimezone=Asia/Shanghai
-
Vue组件未热更新：
- 确认使用的是Vite而非Webpack
- 检查组件是否在
components目录外定义 - 尝试手动刷新浏览器缓存
-
SpringBoot启动报Bean冲突：
java复制@SpringBootApplication(exclude = {
DataSourceAutoConfiguration.class,
DataSourceTransactionManagerAutoConfiguration.class
})
这套系统在实际教学中已稳定运行半年，处理过2000+份问卷提交。特别值得注意的是，在部署到阿里云ECS时，需要调整JVM参数以避免内存溢出：
bash复制java -jar -Xms256m -Xmx512m survey-backend.jar