1. 项目背景与核心需求
本科毕业论文选择开发一个基于Vue和SpringBoot的在线调查问卷系统，这个选题非常契合当前前后端分离的开发趋势。在线问卷系统在实际应用中有着广泛的需求场景，从学术研究、市场调研到企业内部反馈收集都离不开这类工具。
传统的问卷系统往往存在几个痛点：开发周期长、界面交互体验差、移动端适配不足、数据分析功能薄弱。而采用Vue+SpringBoot的技术组合正好可以解决这些问题：
- Vue的响应式特性和丰富的UI组件库（如Element UI）能够快速构建直观友好的问卷界面
- SpringBoot的快速开发特性可以大幅缩短后端开发时间
- 前后端分离架构使系统更易于维护和扩展
- RESTful API设计方便多终端访问
2. 技术选型与架构设计
2.1 前端技术栈
选择Vue.js作为前端框架主要基于以下考虑：
- 渐进式框架特性适合从简单到复杂的问卷需求
- 组件化开发模式便于复用问卷题目组件
- 丰富的生态系统（Vue Router、Vuex、Axios）
- 与Element UI完美集成，快速构建专业UI
关键依赖包：
json复制"dependencies": {
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0",
"element-ui": "^2.13.2",
"axios": "^0.21.1",
"echarts": "^4.9.0"
}
2.2 后端技术栈
SpringBoot作为后端框架的优势：
- 自动配置减少XML配置
- 内嵌Tomcat简化部署
- 丰富的Starter依赖（如spring-boot-starter-web、spring-boot-starter-data-jpa）
- 完善的文档和社区支持
数据库选型考虑：
- MySQL：关系型数据库，适合结构化数据存储
- Redis：缓存问卷模板和热门问卷数据
2.3 系统架构设计
采用典型的三层架构：
- 表现层：Vue前端 + Nginx反向代理
- 业务逻辑层：SpringBoot RESTful API
- 数据访问层：MyBatis/JPA + MySQL/Redis
API设计遵循RESTful规范，主要接口包括：
- 问卷管理：/api/surveys
- 问题管理：/api/questions
- 答卷管理：/api/answers
- 用户管理：/api/users
3. 核心功能实现
3.1 问卷创建模块
实现拖拽式问卷设计器是核心难点，关键技术点：
- 使用Vue.Draggable实现题目拖拽排序
- 动态组件渲染不同类型题目
- 题目配置表单的数据绑定
vue复制<template>
<div class="question-container">
<draggable v-model="questions" @end="onDragEnd">
<question-item
v-for="(q, index) in questions"
:key="q.id"
:question="q"
@update="updateQuestion"
@delete="deleteQuestion"
/>
</draggable>
<question-type-selector @add="addQuestion"/>
</div>
</template>
3.2 问卷填写模块
关键技术实现：
- 响应式表单验证
- 分页逻辑控制
- 答题进度保存
javascript复制// 表单验证规则
const rules = {
'radio': [{ required: true, message: '请选择一项', trigger: 'blur' }],
'checkbox': [{
type: 'array',
required: true,
message: '请至少选择一项',
trigger: 'blur'
}],
'text': [{
required: true,
message: '请输入内容',
trigger: 'blur'
}]
}
3.3 数据分析模块
使用ECharts实现数据可视化：
- 单选题/多选题：饼图/柱状图
- 评分题：雷达图/折线图
- 交叉分析：热力图
javascript复制// 单选题统计图表配置
const pieOption = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
series: [{
name: '选项分布',
type: 'pie',
radius: ['50%', '70%'],
data: chartData
}]
}
4. 关键技术难点与解决方案
4.1 复杂逻辑跳转实现
问卷中经常需要根据前一题的答案决定后续题目显示，实现方案：
- 在后端定义逻辑规则模型
- 前端解析规则并动态渲染题目
- 使用Vue的v-if/v-show控制显示
javascript复制// 逻辑规则示例
{
"sourceQuestionId": 1,
"conditions": [
{
"optionValue": "A",
"targetQuestionId": 2
},
{
"optionValue": "B",
"targetQuestionId": 3
}
]
}
4.2 高并发提交处理
针对问卷提交高峰期的解决方案：
- Redis队列缓冲提交请求
- 数据库批量插入优化
- 接口限流（如Guava RateLimiter）
java复制// SpringBoot限流配置
@Configuration
public class RateLimitConfig {
@Bean
public RateLimiter answerRateLimiter() {
return RateLimiter.create(1000); // 每秒1000次提交
}
}
4.3 移动端适配方案
- 使用REM+Flex布局
- 媒体查询针对不同设备调整样式
- 禁用移动端缩放
css复制/* 移动端样式适配 */
@media screen and (max-width: 768px) {
.question-item {
padding: 10px;
margin-bottom: 15px;
}
.el-radio__label, .el-checkbox__label {
font-size: 14px;
}
}
5. 系统部署与优化
5.1 前端部署优化
- Nginx配置gzip压缩
- 启用HTTP/2
- 静态资源CDN加速
nginx复制server {
listen 443 ssl http2;
gzip on;
gzip_types text/plain application/javascript application/x-javascript text/css;
location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html;
}
}
5.2 后端性能优化
- JVM参数调优
- 数据库连接池配置
- 缓存策略优化
yaml复制# application-prod.yml
spring:
datasource:
hikari:
maximum-pool-size: 20
connection-timeout: 30000
redis:
cache:
time-to-live: 1h
5.3 监控与日志
- SpringBoot Actuator健康检查
- ELK日志收集
- Prometheus监控
java复制@Bean
public MeterRegistryCustomizer<PrometheusMeterRegistry> metricsCommonTags() {
return registry -> registry.config().commonTags("application", "survey-system");
}
6. 开发经验与心得
在实际开发过程中，有几个关键点值得特别注意：
-
组件设计原则：将问卷题目拆分为原子组件（单选、多选、填空等），通过props控制行为，确保高复用性。我在开发中期重构了一次组件结构，将原先耦合的逻辑拆分为独立的presentational和container组件，使代码更清晰。
-
状态管理策略：简单的问卷状态使用Vuex可能过度设计，但对于复杂的逻辑跳转和跨组件通信，集中式状态管理很有必要。我最终采用模块化的Vuex store，将问卷、题目、答案等状态分离管理。
-
性能优化实践：
- 使用v-if替代v-show减少初始渲染压力
- 对大列表题目使用虚拟滚动
- 防抖处理频繁触发的事件（如输入框自动保存）
-
调试技巧：
- 使用Vue DevTools检查组件层级和状态
- 为API请求添加请求/响应拦截器记录日志
- 利用Chrome性能分析工具定位渲染瓶颈
这个项目从技术选型到最终部署上线大约耗时3个月，其中最大的收获是深入理解了前后端分离架构的实际应用场景，以及如何根据项目规模做出合理的技术决策。对于本科毕业设计来说，建议控制功能范围，把核心模块做精而不是追求大而全。