当前位置：首页 > news >正文

SpringBoot+Vue3构建企业级在线问卷系统实战

news 2026/8/4 5:02:54

1. 项目概述：前后端分离在线问卷调查系统

这个基于SpringBoot+Vue+MyBatis+MySQL技术栈的在线问卷调查系统，是我在2022年实际交付的一个企业级项目。相比传统单体架构，前后端分离的设计让系统具备了更好的扩展性和维护性。前端采用Vue3+Element Plus实现响应式界面，后端基于SpringBoot2.7提供RESTful API，通过MyBatis-Plus与MySQL8.0交互，整套系统从开发到部署都遵循了当前主流的企业级实践标准。

系统核心功能包括：

可视化问卷设计器（支持拖拽题型）
多维度答卷统计分析
基于RBAC的权限管理体系
分布式文件存储（问卷附件）
微信小程序端数据采集

提示：项目源码已通过GPL-3.0协议开源，文末会提供获取方式。部署时建议使用Docker容器化方案，可以避免80%的环境兼容性问题。

2. 技术架构深度解析

2.1 前端技术选型

Vue3组合式API + TypeScript的选用经过了严格验证：

性能考量：相比Vue2，Vue3的打包体积减少41%，渲染速度提升55%
开发体验：
- 使用<script setup>语法糖减少30%的样板代码
- Pinia状态管理替代Vuex，类型提示更完善
UI组件库：Element Plus的表格组件完美适配问卷数据展示需求

关键配置示例（vite.config.ts）：

export default defineConfig({ plugins: [ vue({ template: { compilerOptions: { // 兼容Element Plus的命名空间 isCustomElement: tag => tag.startsWith('el-') } } }) ], server: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } } })

2.2 后端技术栈设计

SpringBoot的配置优化值得特别关注：

spring: datasource: url: jdbc:mysql://localhost:3306/survey?useSSL=false&serverTimezone=Asia/Shanghai username: root password: 加密密码需通过Jasypt处理 redis: host: 127.0.0.1 port: 6379 password: ${REDIS_PASSWORD:} cache: type: redis redis: time-to-live: 300000 # 问卷缓存5分钟

MyBatis-Plus的增强功能应用：

自动填充（创建时间/更新时间）
逻辑删除注解@TableLogic
性能分析插件拦截慢SQL

3. 核心功能实现细节

3.1 动态问卷引擎设计

问卷模型采用JSON Schema存储：

{ "questions": [ { "type": "radio", "title": "您的年龄段是？", "options": ["18岁以下", "18-25岁", "26-35岁"], "required": true, "validation": { "minSelect": 1, "maxSelect": 1 } } ], "settings": { "limitIp": true, "startTime": "2023-07-01T00:00:00", "theme": "default" } }

后端处理逻辑：

@PostMapping("/submit") public Result submitSurvey(@RequestBody SurveySubmitDTO dto) { // 1. 验证问卷状态 Survey survey = surveyService.getById(dto.getSurveyId()); if (survey.getStatus() != 1) { throw new BusinessException("该问卷已停止收集"); } // 2. IP限制检查 String ip = IpUtils.getIpAddr(request); if (survey.getLimitIp() && answerService.exists(new LambdaQueryWrapper<Answer>() .eq(Answer::getSurveyId, dto.getSurveyId()) .eq(Answer::getIpAddress, ip))) { throw new BusinessException("同一IP只能提交一次"); } // 3. 答案校验（基于JSON Schema） SchemaValidator.validate(dto.getAnswers(), survey.getSchema()); // 4. 持久化 return answerService.saveAnswer(dto); }

3.2 可视化统计模块

使用ECharts实现动态图表渲染：

<template> <div ref="chart" style="width:100%;height:400px"></div> </template> <script setup> import * as echarts from 'echarts' import { onMounted, ref } from 'vue' const props = defineProps(['data']) const chart = ref(null) onMounted(() => { const instance = echarts.init(chart.value) instance.setOption({ tooltip: { trigger: 'item' }, series: [{ type: 'pie', data: props.data.map(item => ({ value: item.count, name: item.option })) }] }) }) </script>

4. 生产环境部署方案

4.1 后端部署要点

JVM参数优化（application.yml）：

server: tomcat: max-threads: 200 min-spare-threads: 10 compression: enabled: true mime-types: application/json,text/html

Nginx配置示例：

upstream backend { server 127.0.0.1:8080 weight=5; keepalive 32; } server { listen 80; server_name survey.example.com; location /api { proxy_pass http://backend; proxy_http_version 1.1; proxy_set_header Connection ""; } location / { root /var/www/survey-frontend; try_files $uri $uri/ /index.html; } }

4.2 前端部署注意事项

静态资源缓存策略：

location /assets { alias /var/www/survey-frontend/assets; expires 1y; add_header Cache-Control "public"; }

解决Vue路由History模式404问题：

location / { try_files $uri $uri/ /index.html; }

5. 典型问题排查指南

问题现象	可能原因	解决方案
前端访问API跨域	未正确配置CORS	检查SpringBoot的`@CrossOrigin`或Nginx代理设置
文件上传失败	Nginx限制大小	调整`client_max_body_size 20m`
图表数据不更新	浏览器缓存	在请求URL添加时间戳参数
微信扫码登录失败	域名未备案	确保公众号配置的域名已备案

6. 性能优化实战记录

MySQL索引优化：

-- 慢查询日志发现的典型问题 EXPLAIN SELECT * FROM survey WHERE status = 1 AND create_time > '2023-01-01' ORDER BY update_time DESC; -- 优化方案 ALTER TABLE survey ADD INDEX idx_status_time (status, create_time);

Redis缓存策略：

@Cacheable(value = "survey", key = "#id", unless = "#result == null") public Survey getById(Long id) { return baseMapper.selectById(id); } @CacheEvict(value = "survey", key = "#entity.id") public boolean updateById(Survey entity) { return retBool(baseMapper.updateById(entity)); }

7. 安全防护措施

SQL注入防护：
- 始终使用MyBatis参数绑定
- 禁止拼接SQL语句
XSS防护：

@Bean public FilterRegistrationBean<XssFilter> xssFilter() { FilterRegistrationBean<XssFilter> registration = new FilterRegistrationBean<>(); registration.setFilter(new XssFilter()); registration.addUrlPatterns("/*"); return registration; }

CSRF防护（Spring Security配置）：

@Override protected void configure(HttpSecurity http) throws Exception { http.csrf().csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse()); }