1. 项目概述去年帮学弟做毕业设计时接触到一个在线问卷调查系统的需求。这个系统需要同时满足普通用户参与调查和管理员后台管理的双重需求。经过两个月的开发迭代最终完成了一个基于SpringBootVue的全栈解决方案。现在把整个开发过程和关键技术点整理出来希望能给需要做类似项目的同学一些参考。这个系统主要解决了传统纸质问卷的三大痛点一是数据收集效率低二是统计工作繁琐三是问卷管理困难。系统实现了问卷创建、发布、填写、统计的全流程数字化管理员可以实时查看问卷回收情况和统计结果大大提升了调研工作的效率。2. 技术选型与架构设计2.1 后端技术栈选择SpringBoot作为后端框架主要考虑以下几点快速启动特性内嵌Tomcat无需单独部署自动配置减少了大量XML配置丰富的Starter依赖轻松集成各种组件// 典型SpringBoot启动类配置 SpringBootApplication MapperScan(com.survey.mapper) public class SurveyApplication { public static void main(String[] args) { SpringApplication.run(SurveyApplication.class, args); } }数据库选用MySQL 8.0主要考虑到事务支持完善对JSON类型的原生支持用于存储问卷题目结构成熟的社区生态2.2 前端技术栈Vue.js作为前端框架的优势响应式数据绑定组件化开发模式丰富的生态系统Vue Router, Vuex等// 典型Vue组件结构 export default { data() { return { questions: [] } }, methods: { async fetchQuestions() { const res await axios.get(/api/questions) this.questions res.data } }, created() { this.fetchQuestions() } }2.3 系统架构图前端(Vue) ←HTTP→ 后端(SpringBoot) ←JDBC→ MySQL ↑ ↑ | | Axios SpringSecurity (JWT认证)3. 核心功能实现3.1 问卷管理模块3.1.1 问卷创建流程基础信息设置标题、说明、有效期题目设计支持单选、多选、填空等题型逻辑跳转设置根据答案跳转到指定题目样式定制主题色、LOGO等// 问卷实体类设计 Entity public class Questionnaire { Id GeneratedValue private Long id; private String title; private String description; OneToMany(mappedBy questionnaire) private ListQuestion questions; // 其他字段和方法... }3.1.2 题目类型设计采用JSON格式存储题目配置便于前端渲染{ type: multiple_choice, question: 您常用的编程语言有哪些, options: [Java, Python, JavaScript, C], required: true, max_select: 3 }3.2 用户答卷模块3.2.1 答题逻辑实现实时保存机制每道题作答后自动保存到本地存储断点续答通过用户ID和问卷ID恢复未提交的答卷提交验证检查必答题是否完成// 答题保存逻辑 watch: { answers: { handler(newVal) { localStorage.setItem(temp_${this.questionnaireId}, JSON.stringify(newVal)) }, deep: true } }3.2.2 防重复提交设计客户端限制提交按钮禁用状态服务端校验基于用户ID问卷ID的唯一索引Token机制每个问卷生成唯一提交令牌3.3 数据分析模块3.3.1 数据统计方案实时计算使用MySQL窗口函数缓存优化高频访问数据存入Redis定时任务每日凌晨生成统计快照-- 问卷回答统计SQL示例 SELECT q.id AS question_id, COUNT(r.id) AS response_count, JSON_OBJECTAGG( IFNULL(r.answer_value, NULL), COUNT(*) ) AS answer_distribution FROM questions q LEFT JOIN responses r ON q.id r.question_id WHERE q.questionnaire_id ? GROUP BY q.id3.3.2 可视化展示使用v-charts组件实现饼图选项分布柱状图多题对比折线图时间趋势4. 关键技术实现4.1 权限控制系统4.1.1 RBAC模型设计角色管理员、普通用户权限细粒度到每个API接口关系用户-角色-权限三级关联// SpringSecurity配置 Configuration EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter { Override protected void configure(HttpSecurity http) throws Exception { http.authorizeRequests() .antMatchers(/admin/**).hasRole(ADMIN) .antMatchers(/api/**).authenticated() .anyRequest().permitAll() .and() .addFilter(new JwtAuthenticationFilter(authenticationManager())) .addFilter(new JwtAuthorizationFilter(authenticationManager())); } }4.1.2 JWT认证流程登录成功后生成Token前端存储Token在localStorage每次请求携带在Authorization头服务端校验Token有效性4.2 高性能问卷提交4.2.1 批量插入优化使用MyBatis的批量操作特性insert idbatchInsertResponses INSERT INTO responses (question_id, user_id, answer_value) VALUES foreach collectionlist itemitem separator, (#{item.questionId}, #{item.userId}, #{item.answerValue}) /foreach /insert4.2.2 异步处理设计核心流程同步完成数据分析等耗时操作放入消息队列使用Spring的Async注解实现4.3 富文本编辑支持4.3.1 题目描述富文本集成Quill编辑器自定义工具栏图片上传处理XSS防护过滤// 富文本编辑器配置 const toolbarOptions [ [bold, italic, underline], [blockquote, code-block], [{ list: ordered}, { list: bullet }], [link, image] ] this.editor new Quill(#editor, { modules: { toolbar: toolbarOptions }, theme: snow })5. 部署与性能优化5.1 生产环境部署5.1.1 服务器配置2核4G云服务器Nginx反向代理分离部署前端静态资源server { listen 80; server_name survey.example.com; location / { root /var/www/survey-frontend; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://localhost:8080; proxy_set_header Host $host; } }5.1.2 数据库优化索引优化为常用查询字段添加索引分表策略按时间范围分表读写分离使用Spring AbstractRoutingDataSource5.2 性能调优实践5.2.1 缓存策略Redis缓存热点数据本地缓存短期不变数据多级缓存失效策略Cacheable(value questionnaire, key #id) public Questionnaire getById(Long id) { return questionnaireMapper.selectByPrimaryKey(id); }5.2.2 前端性能优化组件懒加载路由级别代码分割图片懒加载// 路由懒加载配置 const QuestionnaireList () import(./views/QuestionnaireList.vue) const QuestionnaireDetail () import(./views/QuestionnaireDetail.vue)6. 开发经验与问题解决6.1 典型问题记录6.1.1 跨域问题解决方案开发阶段配置Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) .allowedMethods(*) .allowedHeaders(*); } }生产环境通过Nginx解决add_header Access-Control-Allow-Origin $http_origin; add_header Access-Control-Allow-Credentials true;6.1.2 大问卷加载优化分页加载题目虚拟滚动技术问题分组懒加载6.2 开发心得前后端分离开发时一定要先定义好API接口规范复杂表单状态管理使用Vuex能大幅降低复杂度MyBatis Generator生成的代码需要二次封装问卷逻辑跳转最好采用可视化配置方式生产环境一定要做好防爬虫措施7. 扩展功能建议微信小程序集成通过小程序快速传播问卷模板市场用户可分享和复用问卷模板团队协作多人共同管理问卷项目AI分析自动生成数据分析报告多语言支持国际化问卷需求这个项目从技术选型到最终上线历时两个月期间遇到了不少挑战但也积累了很多全栈开发的经验。特别是对于复杂表单状态的管理和前后端数据交互方面有了更深入的理解。如果重新做一次我会在初期更注重组件化和模块化的设计这样后期功能扩展会更加顺畅。
SpringBoot+Vue在线问卷调查系统开发实践
1. 项目概述去年帮学弟做毕业设计时接触到一个在线问卷调查系统的需求。这个系统需要同时满足普通用户参与调查和管理员后台管理的双重需求。经过两个月的开发迭代最终完成了一个基于SpringBootVue的全栈解决方案。现在把整个开发过程和关键技术点整理出来希望能给需要做类似项目的同学一些参考。这个系统主要解决了传统纸质问卷的三大痛点一是数据收集效率低二是统计工作繁琐三是问卷管理困难。系统实现了问卷创建、发布、填写、统计的全流程数字化管理员可以实时查看问卷回收情况和统计结果大大提升了调研工作的效率。2. 技术选型与架构设计2.1 后端技术栈选择SpringBoot作为后端框架主要考虑以下几点快速启动特性内嵌Tomcat无需单独部署自动配置减少了大量XML配置丰富的Starter依赖轻松集成各种组件// 典型SpringBoot启动类配置 SpringBootApplication MapperScan(com.survey.mapper) public class SurveyApplication { public static void main(String[] args) { SpringApplication.run(SurveyApplication.class, args); } }数据库选用MySQL 8.0主要考虑到事务支持完善对JSON类型的原生支持用于存储问卷题目结构成熟的社区生态2.2 前端技术栈Vue.js作为前端框架的优势响应式数据绑定组件化开发模式丰富的生态系统Vue Router, Vuex等// 典型Vue组件结构 export default { data() { return { questions: [] } }, methods: { async fetchQuestions() { const res await axios.get(/api/questions) this.questions res.data } }, created() { this.fetchQuestions() } }2.3 系统架构图前端(Vue) ←HTTP→ 后端(SpringBoot) ←JDBC→ MySQL ↑ ↑ | | Axios SpringSecurity (JWT认证)3. 核心功能实现3.1 问卷管理模块3.1.1 问卷创建流程基础信息设置标题、说明、有效期题目设计支持单选、多选、填空等题型逻辑跳转设置根据答案跳转到指定题目样式定制主题色、LOGO等// 问卷实体类设计 Entity public class Questionnaire { Id GeneratedValue private Long id; private String title; private String description; OneToMany(mappedBy questionnaire) private ListQuestion questions; // 其他字段和方法... }3.1.2 题目类型设计采用JSON格式存储题目配置便于前端渲染{ type: multiple_choice, question: 您常用的编程语言有哪些, options: [Java, Python, JavaScript, C], required: true, max_select: 3 }3.2 用户答卷模块3.2.1 答题逻辑实现实时保存机制每道题作答后自动保存到本地存储断点续答通过用户ID和问卷ID恢复未提交的答卷提交验证检查必答题是否完成// 答题保存逻辑 watch: { answers: { handler(newVal) { localStorage.setItem(temp_${this.questionnaireId}, JSON.stringify(newVal)) }, deep: true } }3.2.2 防重复提交设计客户端限制提交按钮禁用状态服务端校验基于用户ID问卷ID的唯一索引Token机制每个问卷生成唯一提交令牌3.3 数据分析模块3.3.1 数据统计方案实时计算使用MySQL窗口函数缓存优化高频访问数据存入Redis定时任务每日凌晨生成统计快照-- 问卷回答统计SQL示例 SELECT q.id AS question_id, COUNT(r.id) AS response_count, JSON_OBJECTAGG( IFNULL(r.answer_value, NULL), COUNT(*) ) AS answer_distribution FROM questions q LEFT JOIN responses r ON q.id r.question_id WHERE q.questionnaire_id ? GROUP BY q.id3.3.2 可视化展示使用v-charts组件实现饼图选项分布柱状图多题对比折线图时间趋势4. 关键技术实现4.1 权限控制系统4.1.1 RBAC模型设计角色管理员、普通用户权限细粒度到每个API接口关系用户-角色-权限三级关联// SpringSecurity配置 Configuration EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter { Override protected void configure(HttpSecurity http) throws Exception { http.authorizeRequests() .antMatchers(/admin/**).hasRole(ADMIN) .antMatchers(/api/**).authenticated() .anyRequest().permitAll() .and() .addFilter(new JwtAuthenticationFilter(authenticationManager())) .addFilter(new JwtAuthorizationFilter(authenticationManager())); } }4.1.2 JWT认证流程登录成功后生成Token前端存储Token在localStorage每次请求携带在Authorization头服务端校验Token有效性4.2 高性能问卷提交4.2.1 批量插入优化使用MyBatis的批量操作特性insert idbatchInsertResponses INSERT INTO responses (question_id, user_id, answer_value) VALUES foreach collectionlist itemitem separator, (#{item.questionId}, #{item.userId}, #{item.answerValue}) /foreach /insert4.2.2 异步处理设计核心流程同步完成数据分析等耗时操作放入消息队列使用Spring的Async注解实现4.3 富文本编辑支持4.3.1 题目描述富文本集成Quill编辑器自定义工具栏图片上传处理XSS防护过滤// 富文本编辑器配置 const toolbarOptions [ [bold, italic, underline], [blockquote, code-block], [{ list: ordered}, { list: bullet }], [link, image] ] this.editor new Quill(#editor, { modules: { toolbar: toolbarOptions }, theme: snow })5. 部署与性能优化5.1 生产环境部署5.1.1 服务器配置2核4G云服务器Nginx反向代理分离部署前端静态资源server { listen 80; server_name survey.example.com; location / { root /var/www/survey-frontend; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://localhost:8080; proxy_set_header Host $host; } }5.1.2 数据库优化索引优化为常用查询字段添加索引分表策略按时间范围分表读写分离使用Spring AbstractRoutingDataSource5.2 性能调优实践5.2.1 缓存策略Redis缓存热点数据本地缓存短期不变数据多级缓存失效策略Cacheable(value questionnaire, key #id) public Questionnaire getById(Long id) { return questionnaireMapper.selectByPrimaryKey(id); }5.2.2 前端性能优化组件懒加载路由级别代码分割图片懒加载// 路由懒加载配置 const QuestionnaireList () import(./views/QuestionnaireList.vue) const QuestionnaireDetail () import(./views/QuestionnaireDetail.vue)6. 开发经验与问题解决6.1 典型问题记录6.1.1 跨域问题解决方案开发阶段配置Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) .allowedMethods(*) .allowedHeaders(*); } }生产环境通过Nginx解决add_header Access-Control-Allow-Origin $http_origin; add_header Access-Control-Allow-Credentials true;6.1.2 大问卷加载优化分页加载题目虚拟滚动技术问题分组懒加载6.2 开发心得前后端分离开发时一定要先定义好API接口规范复杂表单状态管理使用Vuex能大幅降低复杂度MyBatis Generator生成的代码需要二次封装问卷逻辑跳转最好采用可视化配置方式生产环境一定要做好防爬虫措施7. 扩展功能建议微信小程序集成通过小程序快速传播问卷模板市场用户可分享和复用问卷模板团队协作多人共同管理问卷项目AI分析自动生成数据分析报告多语言支持国际化问卷需求这个项目从技术选型到最终上线历时两个月期间遇到了不少挑战但也积累了很多全栈开发的经验。特别是对于复杂表单状态的管理和前后端数据交互方面有了更深入的理解。如果重新做一次我会在初期更注重组件化和模块化的设计这样后期功能扩展会更加顺畅。
