SpringBoot+Vue全栈问卷系统：从架构设计到部署实战-平芜编程栈

简介：本资源是一套面向高校Java课程设计实践的完整问卷调查系统实现方案，适用于SpringBoot与Vue前后端分离开发教学场景，帮助学生掌握权限管理、动态表单构建、数据可视化等核心工程能力。压缩包共394个文件，含57个Java后端业务类、18个Vue组件页面、48个JS交互逻辑脚本、131个XML配置文件（含MyBatis映射与Maven依赖）、33个PNG/SVG图表资源及1个完整SQL数据库脚本，整体大小19.13MB，结构清晰、模块解耦度高。已有449人学习下载，资源中已集成租户隔离、密码加密存储（密钥固定为23232323）、问卷实时预览与多维度统计分析等实用功能，配套application.yml配置说明与SQL初始化脚本，开箱即用。

1. 项目背景与核心价值：为什么是SpringBoot+Vue的问卷系统？

最近在整理硬盘，翻出来一个几年前带学生做课程设计时留下的项目源码包，名字就叫“基于SpringBoot+Vue的问卷调查系统”。当时觉得这不过是个标准的“增删改查”作业，现在重新审视，发现它其实是一个绝佳的、麻雀虽小五脏俱全的全栈实战案例。对于正在学习Java Web开发，尤其是想从零开始理解前后端分离架构的同学来说，这个项目里藏着不少教科书里不会细讲的“门道”。

你可能觉得，一个问卷系统有什么复杂的？不就是创建问卷、发布、让人填、然后看结果吗？这话没错，但正是这种业务逻辑清晰、功能边界明确的特点，让它成为了技术练手的完美沙盒。你不用在复杂的业务规则上纠缠，可以集中精力去实践和体会一个现代Web应用的核心技术栈是如何协同工作的。SpringBoot负责后端API和数据处理，Vue负责前端交互和页面渲染，两者通过HTTP接口“握手”，中间夹着一个数据库作为数据仓库。这个模式，如今是绝大多数企业级应用的标配。

我之所以特别看重这个技术组合，是因为它精准地踩在了“易学”和“实用”的平衡点上。SpringBoot通过自动配置和起步依赖，极大地简化了传统Spring MVC繁琐的XML配置，让你能快速搭建一个稳健的后端服务。而Vue的渐进式框架特性和响应式数据绑定，让前端开发变得直观且高效，尤其适合从jQuery时代过渡过来的开发者。用它们俩搭一个问卷系统，你几乎能接触到全栈开发中的所有基础环节：数据库设计、RESTful API编写、跨域处理、前端路由、组件通信、数据可视化……每一个环节都能挖出值得深究的细节。

所以，这份源码和数据库，与其说是一个“课程设计作业”，不如说是一个全栈开发的微型实验室。接下来，我会带你深入这个实验室，不仅告诉你代码怎么跑起来，更会拆解每个关键部分的设计思路、实现细节，以及我当年和学生们一起踩过的那些坑。你会发现，实现一个功能只是开始，如何实现得优雅、健壮、易于维护，才是真正的挑战。

2. 系统架构全景与核心技术选型解析

拿到一个项目源码，最忌讳的就是一头扎进代码里。我们先退一步，从上帝视角看看这个系统的全貌。一个基于SpringBoot和Vue的问卷系统，其架构本质是经典的前后端分离模式。下图清晰地展示了数据流和组件间的协作关系：

[用户浏览器] | | (HTTP请求/响应, JSON数据) v [Vue前端应用] | (Axios等HTTP客户端) v [Nginx反向代理] (可选，用于部署和解决跨域) | | (转发API请求) v [SpringBoot后端应用] | | (JDBC/MyBatis等) v [MySQL数据库]

2.1 后端技术栈：为什么是SpringBoot？

SpringBoot是这个后端服务的基石。它的核心价值在于“约定大于配置”。在传统的Spring项目中，你可能需要为数据源、事务管理器、MVC视图解析器等写上一大堆XML或Java配置。而在SpringBoot项目中，一个简单的spring-boot-starter-web和spring-boot-starter-data-jpa（或mybatis-spring-boot-starter）依赖，就几乎搞定了一切。

内嵌容器：SpringBoot默认内嵌了Tomcat，这意味着你的应用本身就是一个可执行的JAR文件，无需额外部署到外部Tomcat。开发时直接运行main方法，生产环境用java -jar命令启动，部署复杂度直线下降。
自动配置：只要你在pom.xml里声明了相关的“starter”，SpringBoot就会根据类路径下的jar包，自动配置所需的Bean。比如，只要引入了spring-boot-starter-data-jpa并在application.properties中配置了spring.datasource相关信息，一个可用的DataSource和EntityManager就准备好了。
起步依赖：这些“starter”本质是一组经过测试的、版本兼容的依赖包。它解决了最让人头疼的依赖冲突问题，让你能专注于业务开发。

在这个问卷系统中，SpringBoot主要承担以下职责：

提供RESTful API：通过@RestController注解的类，处理前端发来的关于问卷、问题、答卷的增删改查请求。
业务逻辑处理：在Service层实现问卷发布的逻辑、答卷提交的校验、统计结果的聚合计算等。
数据持久化：通过JPA或MyBatis与MySQL数据库交互，将问卷结构、答卷内容持久化存储。
事务管理：确保例如“提交一份答卷”这个操作（可能涉及向多个表插入数据）的原子性。

2.2 前端技术栈：为什么是Vue？

Vue.js是一个渐进式的JavaScript框架。所谓“渐进式”，意味着你可以根据项目复杂度，逐步采用它的功能。对于这个问卷系统，我们很可能会用到它的核心功能：

响应式数据绑定：这是Vue的招牌特性。你只需要在data()中声明你的数据（比如一份问卷的问题列表questionList），然后在模板中用v-model绑定到表单输入框，数据与视图就会自动同步。这在动态添加/删除问题、实时预览问卷样式时非常有用。
组件化开发：一个复杂的页面可以拆分成多个独立、可复用的组件。例如，一个“单选题”组件、一个“多选题”组件、一个“问卷头部信息”组件。这极大地提高了代码的可维护性和复用性。在问卷设计器页面，你可能会看到类似<single-choice :question="item" @update="handleUpdate">的用法。
Vue Router：用于实现单页面应用（SPA）的前端路由。不同页面（如问卷列表页、设计页、统计页）之间的切换，不再需要向后端请求完整的HTML，而是由前端路由加载对应的Vue组件，体验更流畅。通常，路由配置会放在src/router/index.js文件中。
Vuex（可选但推荐）：用于管理跨组件的共享状态。例如，当前登录的用户信息、全局的通知提示状态等。在稍复杂的问卷系统中，可能会用它来管理“当前正在编辑的问卷”这个状态，避免在组件间层层传递props。
Axios：一个基于Promise的HTTP客户端，是Vue生态中与后端API通信的首选。它比原生fetchAPI更易用，功能更全（如请求/响应拦截器）。

2.3 数据库选型：为什么是MySQL？

MySQL是一个成熟、稳定、开源的关系型数据库，在Web开发领域拥有极高的占有率。对于问卷系统，其数据结构非常适合用关系模型来表达：

问卷表 (survey)：存储问卷的元信息，如标题、描述、创建时间、截止时间、状态（草稿/已发布/已结束）等。
问题表 (question)：存储属于某个问卷的问题。字段包括问题文本、问题类型（单选、多选、文本）、是否必答、排序号等。这里通过survey_id外键关联到问卷表。
选项表 (option)：存储选择题的选项。字段包括选项文本、关联的问题ID (question_id)。一个问题对应多个选项。
答卷表 (answer_sheet)：记录一次完整的提交。包含提交时间、IP地址（用于简单去重）、关联的问卷ID (survey_id)。
答案表 (answer)：记录每个问题的具体答案。这是核心表，设计上需要灵活。对于选择题，可能存储选中的选项ID (option_id)；对于文本题，直接存储文本内容 (content)。同时需要关联到答卷ID (answer_sheet_id) 和问题ID (question_id)。

这种设计清晰地将“结构”（问卷、问题、选项）和“数据”（答卷、答案）分离，便于进行复杂的统计查询，比如“统计问题A每个选项的选择人数”。

注意：一个常见的坑点：在答案表的设计上，初学者可能会为每种题型设计不同的表（如answer_choice,answer_text）。虽然符合范式，但在查询统计时会非常麻烦，需要多次UNION。更通用的做法是像上面描述的那样，使用一个宽表，用不同的字段来适应不同类型答案的存储（option_id和content可能只有一个有值），并在业务逻辑层进行解释。这体现了数据库设计中“反范式化以优化查询性能”的常见权衡。

3. 从零到一：环境搭建与项目启动全指南

假设你现在拿到了那个问卷调查系统源码+数据库.zip文件，解压后应该能看到类似如下的目录结构：

survey-system/ ├── backend/ # SpringBoot后端项目 │ ├── src/ │ ├── pom.xml │ └── application.properties ├── frontend/ # Vue前端项目 │ ├── src/ │ ├── public/ │ ├── package.json │ └── vue.config.js └── database/ # 数据库脚本 └── survey_system.sql

3.1 后端SpringBoot项目启动

导入项目：使用 IntelliJ IDEA 或 Eclipse (STS) 打开backend文件夹。现代IDE通常能自动识别为Maven或Gradle项目并开始导入依赖。

检查与配置application.properties：这是SpringBoot的核心配置文件。你需要重点关注以下配置，并根据你的本地环境修改：

# 服务器端口，避免冲突 server.port=8080 # 数据库连接配置（关键！） spring.datasource.url=jdbc:mysql://localhost:3306/survey_system?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai spring.datasource.username=root spring.datasource.password=your_password # 改成你的MySQL密码 spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver # JPA相关配置（如果使用JPA） spring.jpa.hibernate.ddl-auto=update # 首次启动可用'create'或'update'，生产环境务必改为'validate'或'none' spring.jpa.show-sql=true # 开发时开启，方便看生成的SQL spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL8Dialect # MyBatis配置（如果使用MyBatis） # mybatis.mapper-locations=classpath:mapper/*.xml # mybatis.configuration.map-underscore-to-camel-case=true

重要提示：spring.jpa.hibernate.ddl-auto=update在开发时很方便，Hibernate会根据你的实体类(@Entity)自动创建或更新表结构。但绝对不要在生产环境使用！生产环境应该使用固定的SQL脚本（即database/survey_system.sql）来初始化数据库，并将此配置改为validate（校验实体与表结构是否匹配）或none。

创建数据库：打开你的MySQL客户端（如命令行、Navicat、Workbench），执行CREATE DATABASE survey_system CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;。utf8mb4编码支持存储所有Emoji表情，对于问卷这种用户可能输入任意字符的场景很重要。
运行项目：找到后端项目中的主启动类，通常命名为XxxApplication（如SurveyApplication），上面有@SpringBootApplication注解。直接运行它的main方法。看到控制台输出类似Tomcat started on port(s): 8080的信息，且没有报错，说明后端启动成功。

3.2 前端Vue项目启动

安装Node.js：确保你的电脑已安装Node.js（建议LTS版本）和npm。可以在命令行输入node -v和npm -v检查。
安装依赖：在命令行中，进入frontend目录，运行npm install。这个命令会根据package.json文件下载所有项目依赖的第三方库（如vue, vue-router, axios, element-ui等）。网络状况会影响下载速度，如果太慢可以配置淘宝镜像：npm config set registry https://registry.npmmirror.com。
检查前端配置：打开frontend/vue.config.js文件（如果没有就检查package.json中的代理配置，或查看src目录下如何设置API基地址）。这里通常配置了开发服务器的代理，用于解决前端开发时的跨域问题：
```
module.exports = { devServer: { port: 8081, // 前端开发服务器端口 proxy: { '/api': { // 将所有以/api开头的请求代理到后端 target: 'http://localhost:8080', // 后端API地址 changeOrigin: true, pathRewrite: { '^/api': '' // 重写路径，去掉/api前缀 } } } } };
```
这意味着，你在前端代码中用axios.get('/api/surveys')发起请求，开发服务器会将其转发到http://localhost:8080/surveys。
运行项目：在frontend目录下，运行npm run serve。命令执行成功后，命令行会输出App running at: - Local: http://localhost:8081。用浏览器打开这个地址，应该能看到问卷系统的前端界面。

3.3 首次启动常见问题排查

后端启动报错：Failed to configure a DataSource：这通常是因为application.properties中的数据库连接信息错误，或者MySQL服务没有启动。检查用户名、密码、数据库名，并确保MySQL服务正在运行。
前端npm install报错：可能是网络问题或node版本不兼容。尝试删除node_modules文件夹和package-lock.json文件，清空npm缓存 (npm cache clean --force)，然后重新npm install。也可以尝试使用yarn进行安装。
前端页面能打开，但接口报404或跨域错误：
- 检查后端服务是否真的在8080端口成功启动。
- 检查前端代理配置 (vue.config.js) 中的target地址是否正确。
- 如果后端没有配置全局跨域支持，代理是必须的。在后端，你也可以通过@CrossOrigin注解或在配置类中添加WebMvcConfigurer来允许跨域，但开发阶段用代理更简单安全。
页面样式错乱或功能异常：打开浏览器开发者工具（F12），查看“控制台(Console)”和“网络(Network)”标签页。控制台的红字错误信息是定位前端问题的关键。网络标签页可以看到每个请求的状态码和响应内容，帮助判断是前端请求发错了，还是后端处理出错了。

4. 核心功能模块深度剖析与代码实现

项目跑起来了，我们终于可以深入代码腹地。一个问卷系统的核心业务流围绕“设计->发布->填写->分析”展开，对应到代码层面，就是几个关键模块。

4.1 问卷管理模块：实体关系映射与API设计

这是系统的基石，核心是问卷(Survey)、问题(Question)、选项(Option)三个实体。它们之间的关系是一对多（一份问卷有多个问题，一个问题有多个选项）。在SpringBoot中，我们通常使用JPA的注解来定义这种关系。

// Survey.java (问卷实体) @Entity @Table(name = "survey") @Data // 使用Lombok简化getter/setter public class Survey { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String title; private String description; private Integer status; // 0:草稿 1:已发布 2:已结束 @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss") private LocalDateTime createTime; @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss") private LocalDateTime endTime; // 关键：定义与Question的一对多关系，cascade表示级联操作 @OneToMany(mappedBy = "survey", cascade = CascadeType.ALL, orphanRemoval = true) @OrderBy("orderNum asc") // 按orderNum排序 private List<Question> questions = new ArrayList<>(); } // Question.java (问题实体) @Entity @Table(name = "question") @Data public class Question { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String content; private Integer type; // 1:单选 2:多选 3:文本 private Boolean required; private Integer orderNum; @ManyToOne @JoinColumn(name = "survey_id") @JsonIgnore // 避免序列化时无限循环 private Survey survey; @OneToMany(mappedBy = "question", cascade = CascadeType.ALL, orphanRemoval = true) @OrderBy("orderNum asc") private List<Option> options = new ArrayList<>(); } // Option.java (选项实体) @Entity @Table(name = "option") @Data public class Option { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String content; private Integer orderNum; @ManyToOne @JoinColumn(name = "question_id") @JsonIgnore private Question question; }

设计心得：

@JsonIgnore的使用：在双向关联中，如果不加@JsonIgnore，序列化一个Survey时，会包含questions，每个question又包含survey，导致无限循环和栈溢出。通常我们在“多”的一方（Question,Option）忽略对“一”的引用。
级联与孤儿删除：cascade = CascadeType.ALL意味着对父实体（如Survey）的保存、更新、删除操作会级联到子实体（Question）。orphanRemoval = true意味着当从父实体的集合中移除一个子实体（如从survey.getQuestions()中移除一个question）时，这个子实体会被自动删除。这在实现“问卷设计器”时非常有用：前端传回整个问卷结构（包含增删改的问题和选项），后端只需repository.save(survey)，JPA会自动处理好所有关联实体的持久化。
排序：@OrderBy("orderNum asc")确保了从数据库查询出来的问题列表和选项列表是按照我们设定的顺序排列的，这对问卷的展示至关重要。

对应的，控制器(Controller) 会提供一组RESTful API：

GET /api/surveys：获取问卷列表（可分页、按状态过滤）。
POST /api/surveys：创建新问卷。
GET /api/surveys/{id}：获取单个问卷的完整结构（包含问题、选项），用于编辑或填写。
PUT /api/surveys/{id}：更新问卷（即保存设计）。
DELETE /api/surveys/{id}：删除问卷。
PUT /api/surveys/{id}/publish：发布问卷（将状态改为“已发布”）。

4.2 问卷填写与答卷提交模块：事务与数据一致性

这是系统的高并发敏感点。当用户提交一份答卷时，后端需要在一个数据库事务中完成以下操作：

创建一条AnswerSheet记录，记录本次提交。
遍历请求中的答案列表，为每个答案创建一条Answer记录，并关联到刚创建的AnswerSheet和对应的Question。

// AnswerSheet.java (答卷表头) @Entity @Table(name = "answer_sheet") @Data public class AnswerSheet { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private Long surveyId; private String ipAddress; private LocalDateTime submitTime; } // Answer.java (答案详情) @Entity @Table(name = "answer") @Data public class Answer { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private Long sheetId; // 关联 AnswerSheet.id private Long questionId; private Long optionId; // 选择题答案，存储选中的选项ID private String content; // 文本题答案，存储文本内容 // 注意：optionId和content通常只有一个有值，取决于问题类型 }

// SurveySubmissionService.java @Service @Transactional // 声明式事务，确保方法内的所有数据库操作要么全成功，要么全回滚 public class SurveySubmissionService { @Autowired private AnswerSheetRepository sheetRepository; @Autowired private AnswerRepository answerRepository; @Autowired private SurveyRepository surveyRepository; public AnswerSheet submitAnswer(Long surveyId, List<AnswerDTO> answerList, String ip) { // 1. 校验问卷是否存在且处于“已发布”状态 Survey survey = surveyRepository.findById(surveyId) .orElseThrow(() -> new RuntimeException("问卷不存在")); if (!survey.getStatus().equals(1)) { throw new RuntimeException("问卷未发布或已结束"); } // 2. 创建答卷表头 AnswerSheet sheet = new AnswerSheet(); sheet.setSurveyId(surveyId); sheet.setIpAddress(ip); sheet.setSubmitTime(LocalDateTime.now()); sheet = sheetRepository.save(sheet); // 3. 遍历并保存每个答案 List<Answer> answers = new ArrayList<>(); for (AnswerDTO dto : answerList) { Answer answer = new Answer(); answer.setSheetId(sheet.getId()); answer.setQuestionId(dto.getQuestionId()); // 根据问题类型，将答案存入不同字段 Question q = // ... 这里最好能预先加载所有问题用于校验 if (q.getType() == 1 || q.getType() == 2) { // 单选/多选 answer.setOptionId(dto.getSelectedOptionId()); } else if (q.getType() == 3) { // 文本 answer.setContent(dto.getTextContent()); } // 这里可以添加更多校验，如必填项检查、选项是否属于该问题等 answers.add(answer); } answerRepository.saveAll(answers); // 批量保存 return sheet; } }

踩坑实录：事务与性能

事务边界：@Transactional注解确保了submitAnswer方法是一个事务。如果保存Answer列表时中途出错，之前保存的AnswerSheet也会回滚，数据库不会留下脏数据。这是保证数据一致性的关键。
N+1查询问题：在上面的示例中，为了校验每个答案对应的Question类型，如果我们在循环内去查询数据库，就会产生著名的“N+1查询问题”（1次查答卷 + N次查问题）。正确的做法是在方法开始时，一次性查询出该问卷所有的问题，放入一个Map<Long, Question>中，在循环内直接从Map中获取，将数据库交互从O(N)降到O(1)。
批量保存：使用saveAll一次性保存所有Answer实体，比在循环中多次调用save性能高得多。

4.3 数据统计与分析模块：复杂查询与DTO封装

统计功能是问卷系统的价值所在。常见的需求如：“统计某个问题各个选项的选择人数和比例”、“查看文本题的答案列表”。这需要编写复杂的查询语句。

如果使用JPA，可以在Repository中定义查询方法：

public interface AnswerRepository extends JpaRepository<Answer, Long> { // 统计某个问题每个选项的被选次数 @Query("SELECT a.optionId, COUNT(a.id) FROM Answer a WHERE a.questionId = :questionId AND a.optionId IS NOT NULL GROUP BY a.optionId") List<Object[]> countSelectionsByOption(@Param("questionId") Long questionId); // 获取某个文本题的所有答案内容 List<Answer> findByQuestionIdAndContentIsNotNull(Long questionId); }

如果使用MyBatis，则需要在XML映射文件中编写SQL：

<!-- AnswerMapper.xml --> <select id="countSelectionsByOption" resultType="map"> SELECT option_id as optionId, COUNT(id) as count FROM answer WHERE question_id = #{questionId} AND option_id IS NOT NULL GROUP BY option_id </select>

查询到的原始数据（如List<Object[]>）通常不适合直接返回给前端。我们需要将其封装成更友好的数据结构，这就是数据传输对象(DTO)的用武之地。

// QuestionStatDTO.java @Data public class QuestionStatDTO { private Long questionId; private String questionContent; private Integer questionType; // 对于选择题 private List<OptionStat> optionStats; // 对于文本题 private List<String> textAnswers; @Data public static class OptionStat { private Long optionId; private String optionContent; private Long count; // 选择人数 private Double percentage; // 百分比 } }

在Service层，我们将Repository查询到的原始数据，组装成QuestionStatDTO对象。这个过程可能涉及多次查询和内存计算，但为前端提供了结构清晰、可直接用于图表渲染的数据。

4.4 前端Vue组件设计与状态管理

前端页面可以大致分为几个路由组件：

SurveyList.vue：问卷列表页，展示所有问卷，提供创建、编辑、发布、删除、查看统计的入口。
SurveyDesigner.vue：问卷设计器，核心交互页面。这里需要动态增删问题、调整问题顺序、编辑问题和选项。
SurveyFill.vue：问卷填写页面，根据问卷结构动态渲染单选、多选、文本输入框等表单控件。
SurveyAnalysis.vue：问卷分析页，展示统计图表和文本答案。

以SurveyDesigner.vue为例，其核心状态是当前正在编辑的问卷对象currentSurvey。这个对象的结构与后端Survey实体对应。当用户添加一个问题时，我们向currentSurvey.questions数组push一个新的问题对象；当用户修改问题文本时，我们直接修改对应数组元素的数据。Vue的响应式系统会自动更新DOM。

<template> <div> <h2>{{ currentSurvey.title || '新问卷' }}</h2> <div v-for="(question, qIndex) in currentSurvey.questions" :key="question.tempId"> <!-- 问题标题输入框 --> <input v-model="question.content" placeholder="请输入问题"> <!-- 问题类型选择 --> <select v-model="question.type" @change="handleQuestionTypeChange(question)"> <option value="1">单选题</option> <option value="2">多选题</option> <option value="3">文本题</option> </select> <!-- 动态渲染选项列表 --> <div v-if="question.type == 1 || question.type == 2"> <div v-for="(option, oIndex) in question.options" :key="option.tempId"> <input v-model="option.content" :placeholder="`选项${oIndex + 1}`"> <button @click="removeOption(qIndex, oIndex)">删除</button> </div> <button @click="addOption(qIndex)">添加选项</button> </div> <button @click="removeQuestion(qIndex)">删除此题</button> </div> <button @click="addQuestion">添加问题</button> <button @click="saveSurvey">保存问卷</button> </div> </template> <script> import { mapState } from 'vuex'; export default { computed: { ...mapState(['currentSurvey']) // 假设使用Vuex管理当前编辑的问卷 }, methods: { addQuestion() { const newQuestion = { tempId: Date.now(), // 前端临时ID，用于v-for key content: '', type: 1, options: [{ tempId: Date.now() + 1, content: '' }] }; this.$store.commit('ADD_QUESTION', newQuestion); }, addOption(qIndex) { const newOption = { tempId: Date.now(), content: '' }; this.$store.commit('ADD_OPTION', { qIndex, option: newOption }); }, handleQuestionTypeChange(question) { // 当问题类型从“选择”变为“文本”时，清空选项数组 if (question.type == 3) { question.options = []; } else if (question.type != 3 && (!question.options || question.options.length === 0)) { // 从“文本”变回“选择”时，初始化一个空选项 question.options = [{ tempId: Date.now(), content: '' }]; } }, async saveSurvey() { try { // 准备提交的数据，可能需要过滤掉前端临时添加的tempId字段 const payload = JSON.parse(JSON.stringify(this.currentSurvey)); // 调用后端保存API await this.$axios.put(`/api/surveys/${this.currentSurvey.id || ''}`, payload); this.$message.success('保存成功'); } catch (error) { this.$message.error('保存失败：' + error.message); } } } }; </script>

前端开发经验谈：

临时ID：在新增问题或选项时，它们还没有后端生成的数据库ID。为了给v-for一个稳定的key，我们使用Date.now()或uuid生成一个临时ID。在提交给后端时，这个字段应该被过滤掉（或者后端忽略它）。
深拷贝与响应式：在saveSurvey方法中，我们使用了JSON.parse(JSON.stringify(...))来获得currentSurvey的一个深拷贝。这是因为Vuex中的状态是响应式的，直接修改它然后提交可能会引发意料之外的副作用。提交一个副本是更安全的做法。当然，更优雅的方式是使用Vuex的Action进行提交。
组件拆分：当SurveyDesigner.vue变得庞大时，应该将“问题项”抽离成一个单独的Vue组件，比如QuestionItem.vue，并通过props接收问题数据，通过$emit向上传递事件。这样代码更清晰，也更容易复用。

5. 项目部署与生产环境考量

课程设计项目通常在本地运行即可，但了解如何将其部署到生产环境，是通向“实战”的重要一步。这里简述几个关键点。

5.1 后端打包与运行

SpringBoot项目打包非常简单。在项目根目录（有pom.xml的目录）下运行Maven命令：

mvn clean package -DskipTests

成功后会生成target/backend-0.0.1-SNAPSHOT.jar。这个就是可执行的“Fat Jar”，包含了应用本身和所有依赖。

生产环境运行：

# 最简单的方式 java -jar backend-0.0.1-SNAPSHOT.jar # 更推荐的方式：使用nohup或systemd在后台运行，并指定配置文件 java -jar -Dspring.profiles.active=prod backend-0.0.1-SNAPSHOT.jar > app.log 2>&1 &

这里-Dspring.profiles.active=prod指定使用application-prod.properties配置文件，你可以在里面配置生产环境的数据库连接、日志级别等。

5.2 前端构建与部署

Vue项目需要先进行构建，将源代码编译、压缩成浏览器能高效运行的静态文件。

npm run build

构建完成后，会在项目下生成一个dist目录，里面就是所有的静态资源（HTML, JS, CSS, 图片等）。

部署时，你有两个主要选择：

与后端分离部署：将dist目录下的文件，放到一个独立的HTTP服务器上，如Nginx或Apache。然后让这个静态服务器代理所有/api请求到后端SpringBoot服务。这是最纯粹的前后端分离。
与后端合并部署：将dist目录下的所有文件，复制到SpringBoot项目的src/main/resources/static目录下。然后重新打包SpringBoot应用。这样，一个JAR包就同时包含了前端和后端。访问http://your-server:port/就会自动返回前端页面。这种方式部署更简单，但不利于前后端独立更新。

5.3 生产环境配置要点

数据库：使用独立的MySQL实例，配置强密码，并做好定期备份。在application-prod.properties中配置连接池参数（如HikariCP），优化性能。
跨域(CORS)：如果前后端分离部署且域名不同，必须在后端进行明确的CORS配置，而不是像开发环境那样依赖前端代理。可以使用@CrossOrigin注解或全局的WebMvcConfigurer。
日志：配置Logback或Log4j2，将日志输出到文件，并设置合理的滚动策略和日志级别（生产环境通常用INFO或WARN）。
安全性：
- SQL注入：使用JPA或MyBatis的参数化查询，基本可以避免。切勿手动拼接SQL字符串。
- XSS攻击：前端框架如Vue默认会对渲染的数据进行HTML转义，提供了基础防护。对于富文本内容，需要谨慎处理。
- CSRF：如果使用类似Session的认证机制，需要考虑CSRF防护。Spring Security提供了开箱即用的支持。
- 问卷防刷：简单的可以通过IP限制（如AnswerSheet表中的ipAddress字段，同一问卷同一IP一段时间内只能提交一次），但更可靠的需要引入验证码或用户登录机制。

6. 功能扩展与优化思路

一个基础的课程设计项目已经完成，但如果你想让它更接近一个真正的产品，这里有一些扩展方向：

6.1 用户认证与权限管理引入Spring Security + JWT（JSON Web Token）。实现用户注册、登录。将问卷与创建者关联，实现“我的问卷”功能。区分管理员和普通用户权限。

6.2 更丰富的题型与逻辑

题型：增加评分题（星星评分、NPS）、排序题、矩阵量表题等。
逻辑跳转：实现“根据上一题的选择，跳转到指定问题”的逻辑跳转功能。这需要在问题表增加“逻辑规则”字段，前端填写时动态决定下一题，后端提交时也需要校验逻辑合法性。

6.3 高级统计分析

交叉分析：例如，分析选择“选项A”的人群，在另一道题上的答案分布。这需要更复杂的SQL查询或借助数据分析库。
数据导出：提供将统计结果导出为Excel或PDF的功能。后端可以使用Apache POI或iText等库生成文件。

6.4 性能优化

缓存：对于公开的、已发布的问卷页面，其结构（问题、选项）变化不频繁，可以使用Redis进行缓存，减少数据库查询。
数据库索引：在answer表的question_id,sheet_id,survey_id等常用查询字段上建立索引，可以大幅提升统计查询速度。
前端懒加载与分页：问卷列表、答案列表等数据量大的地方，采用分页查询。对于复杂的统计图表，可以考虑按需加载。

回过头看，这个基于SpringBoot和Vue的问卷调查系统课程设计，其价值远不止于完成一个作业。它像一张地图，带你走完了全栈开发从环境搭建、数据库设计、API编写、前端交互到部署上线的完整路径。过程中遇到的每一个问题——JPA的级联删除、Vue的响应式数组更新、前后端数据格式的协商、生产环境的配置——都是宝贵的实战经验。希望这份详细的拆解，能帮你不仅看懂这份源码，更能理解每一行代码背后的设计决策，并最终有能力去改造和扩展它，做出属于自己的、更强大的应用。

本文还有配套的精品资源，点击获取