1. 一次课设的重新思考从“交差”到“能用的系统”如果你是因为毕设或课程设计搜到这个题目那我想先聊点实在的。Spring Boot HTML5的问卷调查系统属于那种“看起来不复杂但真要做得顺滑还是有一堆细节”的项目。很多同学做的版本就是一个给管理员填问卷的表格、一个给用户填问卷的表格、一个把结果存到数据库里的接口然后答辩演示一遍就完事了。但我建议你换个思路既然题目写的是“基于HTML5”那就把HTML5的特性真正用起来把系统做成一个别人愿意用、你也能讲清楚设计逻辑的东西。这篇博文就是按这个思路整理的实战过程包括建表、接口设计、前端交互、部署避坑偏“能复现”的那种。这套系统对我来说最初也是一个课设但后来我把它扩展成了一个可以独立部署的小应用支持问卷创建、发布、填写、统计、导出后端用Spring Boot 2.7 MyBatis-Plus前端用HTML5 原生JavaScript localStorage没有引入重型前端框架非常适合讲清楚前后端交互的底层逻辑。如果你正在写差不多的题目这篇文章可以直接当设计说明书和技术实现参考。2. 需求到底长什么样别急着写代码2.1 最容易被忽略的“三种角色”问卷系统表面上只要“管理员发布问卷用户填问卷”但实际写代码前必须把角色和权限理清否则后面改起来想哭。管理员创建问卷、编辑问卷、发布/停止问卷、查看统计结果、删除问卷。需要登录权限级别最高。普通用户浏览已发布的问卷列表、填写问卷、提交后只能看自己的结果如果题目里有查看结果的需求。游客看一些公开的问卷按我们课设默认不做简化。我的设计里管理员和用户共用一张用户表用role字段区分。这样登录接口只写一套鉴权靠拦截器判断URL前缀简单有效。用户表user id, username, password, role, created_at密码不能明文存。以前课设里直接存MD5的太多了现在至少用 BCrypt。Spring Security 太重我就用 Hutool 的 BCrypt 工具省事且安全。2.2 核心业务流程画个脑图比画时序图更实用你不需要画标准的UML图来应付但心里得有这条链创建问卷保存草稿 - 编辑题目 - 发布 - 用户看到问卷 - 填写 - 校验 - 提交 - 管理端看统计这里面有两个关键状态问卷的status草稿0 / 已发布1 / 已关闭2以及单次填写记录的唯一标识用来防止重复提交。防重复提交很容易被忽略但问卷场景里真的很重要——用户翻页刷新一下后端可能就多了一条数据。2.3 用“两个实体”而不是“五个实体”简化设计很多教程会给你拆出问卷表、题目表、选项表、答案表、用户填写记录表一共五张逻辑正确但写起来非常繁琐。我的建议是除非导师强制要求范式化否则用两张主表和一张关联表就够了问卷表surveyid、标题、描述、状态、创建时间、截止时间、创建人。题目表questionid、survey_id、题目内容、题型单选/多选/文本、选项JSON、排序。填写记录表answer_recordid、survey_id、user_id、答案JSON、提交时间。“答案JSON”是反范式设计但在这类小项目里非常划算。每一道题的所有答案存成一个JSON数组比如[{questionId:1,value:A}, {questionId:2,value:[B,C]}]。统计时用后端解析JSON做聚合代码量比连表查询少了不止一半而且扩展新题型几乎不用改表结构。3. 技术选型Spring Boot 是骨架HTML5 不止是“皮肤”3.1 为什么用Spring Boot 原生HTML5而不是Vue题目里带HTML5很多同学默认“HTML5就是静态页面”。其实HTML5涵盖的Web存储、表单验证、语义化标签、Canvas、拖拽API都能在问卷系统里派上用场。我选择原生HTML5 JavaScript Ajax而不是Vue/React主要是两个原因一是课设答辩时间有限原生更容易解释清楚每一步在干什么二是系统本身规模不大前端不用构建工具反而更灵活扔到静态目录就能跑。Spring Boot负责提供REST API前端用fetch或者axios调接口。我用的是axios只是因为它处理JSON和错误更省心。如果你不想引入任何外部库用fetch也完全够用。3.2 项目结构怎么摆才能让答辩老师一眼看懂我习惯按功能分包而不是按技术分层。这样读代码的人能很快找到某个功能涉及的前后端相关类。com.example.survey ├── controller // 接口层SurveyController, AnswerController, StatisticController ├── service // 业务逻辑层SurveyService, AnswerService, StatisticService ├── mapper // MyBatis-Plus的Mapper接口 ├── entity // Survey, Question, AnswerRecord ├── common // 统一返回结果、异常处理、拦截器 └── config // Web配置登录拦截器注册controller里只做接收参数、调用service、返回结果不写业务。service里做组合校验和事务控制。这样答辩时被问“事务怎么控制”就能直说在service方法上加Transactional。3.3 用了哪些依赖记住版本才不会翻车Spring Boot 2.7.18别用3.x坑多尤其是javax改jakarta这事MyBatis-Plus 3.5.3简化CRUD自带分页插件Hutool 5.8.22工具库包含BCrypt、JSONUtil、CaptchaUtilMySQL 8.0 druid 连接池Lombok 1.18.30减少getter/setterpom.xml核心部分这样一个感觉parent groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-parent/artifactId version2.7.18/version /parent dependencies dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.3/version /dependency dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId version8.0.33/version /dependency dependency groupIdcn.hutool/groupId artifactIdhutool-all/artifactId version5.8.22/version /dependency dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId optionaltrue/optional /dependency /dependencies4. 数据库设计一张“带JSON”的表省掉三个表4.1 建表SQL直接可以拿去用CREATE TABLE survey ( id int(11) NOT NULL AUTO_INCREMENT, title varchar(200) NOT NULL COMMENT 问卷标题, description text COMMENT 问卷描述, status tinyint(4) DEFAULT 0 COMMENT 0草稿 1发布 2关闭, create_time datetime DEFAULT CURRENT_TIMESTAMP, deadline datetime DEFAULT NULL COMMENT 截止时间, creator_id int(11) DEFAULT NULL, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; CREATE TABLE question ( id int(11) NOT NULL AUTO_INCREMENT, survey_id int(11) NOT NULL, type tinyint(4) NOT NULL COMMENT 1单选 2多选 3文本, content varchar(500) NOT NULL, options text COMMENT 选项JSON如[A,B,C], sort int(11) DEFAULT 0, PRIMARY KEY (id), KEY idx_survey_id (survey_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; CREATE TABLE answer_record ( id int(11) NOT NULL AUTO_INCREMENT, survey_id int(11) NOT NULL, user_id int(11) DEFAULT NULL, answers json NOT NULL COMMENT 答案JSON数组, submit_time datetime DEFAULT CURRENT_TIMESTAMP, device_info varchar(200) DEFAULT NULL COMMENT 设备信息HTML5特性, PRIMARY KEY (id), KEY idx_survey_user (survey_id,user_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;注意answers用了MySQL的JSON类型Spring Boot里有JSONObject或String都能接。建议实体类里直接定义成String在service里用Hutool的JSONUtil.parseArray解析成JSONArray避免用MySQL专门的JSON处理器因为MyBatis对JSON类型处理偶尔会抽风。4.2 为什么用text存选项而不是建选项表第一问卷系统的选项通常不会超过十个字符串text字段存JSON数组完全够用第二解析时JSONUtil.parseArray几行代码就能遍历第三增删改查都少一张表项目代码量会小很多答辩时能花更多时间讲清楚业务逻辑而不是繁琐的联表。如果设计说明书里要求“表必须满足第三范式”你可以补充一句“选项字段以JSON存储目的是保持问卷题目的自描述性避免频繁的跨表查询属于对范式的合理取舍。”大多数老师能接受。5. 后端核心接口写代码前先把返回结构和异常定下来5.1 统一返回结构前端少一半判断逻辑我用一个ResultT包含code、message、data。controller里所有接口都返回这个结构。Data public class ResultT { private Integer code; // 200成功 400参数错误 401未登录 500异常 private String message; private T data; public static T ResultT ok(T data) { ResultT r new Result(); r.setCode(200); r.setMessage(ok); r.setData(data); return r; } public static T ResultT fail(Integer code, String message) { ResultT r new Result(); r.setCode(code); r.setMessage(message); return r; } }前端拿到res.code 200再渲染数据否则弹出res.message这套流程可以通吃所有页面。5.2 创建问卷草稿和发布要分开处理创建问卷包括保存基本信息、保存题目列表。我用的接口是POST /api/survey Body: { title: 大学生睡眠质量调查, description: 这是一份匿名问卷, status: 0, deadline: 2025-12-31 23:59:59, questions: [ {type: 1, content: 你每天睡几个小时, options: [6小时, 6-8小时, 8小时], sort: 1}, {type: 3, content: 你对宿舍环境有什么建议, options: [], sort: 2} ] }service里逻辑是先插入问卷表拿到surveyId再遍历题目标签给每道题设置surveyId逐一插入。这里要加Transactional否则问卷插成功了但题目插失败就会产生脏数据。代码大概长这样Transactional public Integer createSurvey(SurveyDTO dto) { Survey survey new Survey(); BeanUtils.copyProperties(dto, survey); surveyMapper.insert(survey); for (QuestionDTO q : dto.getQuestions()) { Question question new Question(); question.setSurveyId(survey.getId()); question.setType(q.getType()); question.setContent(q.getContent()); // 将ListString转为JSON字符串存库 question.setOptions(JSONUtil.toJsonStr(q.getOptions())); question.setSort(q.getSort()); questionMapper.insert(question); } return survey.getId(); }5.3 填写问卷接口防重复提交和JSON校验用户提交答案的接口是POST /api/answer/submit Body: { surveyId: 1, answers: [ {questionId: 1, value: 6-8小时}, {questionId: 2, value: [安静, 干净]}, {questionId: 3, value: 希望增加台灯} ] }后端要做三件事检查问卷存在且状态为“已发布”检查答案里的questionId是否都属于该问卷检查该user如果已登录是否已经提交过该问卷。防重复提交我加了一个联合唯一索引在answer_record表里UNIQUE KEY uk_survey_user (survey_id, user_id)。只要提交过一次再次插入就会抛异常然后捕获异常提示“你已经填写过这份问卷”。这个办法比查数据库记录更可靠因为并发时也可能只成功一个。Transactional public void submit(AnswerRecordDTO dto) { Survey survey surveyMapper.selectById(dto.getSurveyId()); if (survey null || survey.getStatus() ! 1) { throw new BusinessException(问卷不存在或未发布); } // 遍历答案校验题目归属 JSONArray answerArr JSONUtil.parseArray(dto.getAnswers()); ListInteger qIds new ArrayList(); for (Question q : questionMapper.selectList(new LambdaQueryWrapperQuestion() .eq(Question::getSurveyId, dto.getSurveyId()))) { qIds.add(q.getId()); } for (Object obj : answerArr) { JSONObject item (JSONObject) obj; if (!qIds.contains(item.getInt(questionId))) { throw new BusinessException(包含无效题目); } } // 存数据 AnswerRecord record new AnswerRecord(); record.setSurveyId(dto.getSurveyId()); record.setUserId(LoginUtil.getCurrentUserId()); record.setAnswers(dto.getAnswers()); answerRecordMapper.insert(record); }5.4 统计接口解析JSON做聚合问卷最吸引老师的部分往往在统计。我写了一个简单的analyze接口返回每个题目的选项统计和文本答案列表。思路是查出该问卷所有answer_record遍历每一条的答案JSON数组按questionId归类对于单选和多选统计选项出现次数对于文本题直接收集原始文本。public SurveyStatistic statistic(Integer surveyId) { ListAnswerRecord records answerRecordMapper.selectList( new LambdaQueryWrapperAnswerRecord().eq(AnswerRecord::getSurveyId, surveyId)); ListQuestion questions questionMapper.selectList(new LambdaQueryWrapperQuestion() .eq(Question::getSurveyId, surveyId).orderByAsc(Question::getSort)); SurveyStatistic result new SurveyStatistic(); result.setTotalCount(records.size()); MapInteger, MapString, Integer optionCountMap new HashMap(); MapInteger, ListString textAnswerMap new HashMap(); for (Question q : questions) { optionCountMap.put(q.getId(), JSONUtil.parseArray(q.getOptions()).stream() .collect(Collectors.toMap(o - (String) o, o - 0, (v1, v2) - v1, LinkedHashMap::new))); textAnswerMap.put(q.getId(), new ArrayList()); } for (AnswerRecord record : records) { JSONArray answers JSONUtil.parseArray(record.getAnswers()); for (Object obj : answers) { JSONObject item (JSONObject) obj; Integer qId item.getInt(questionId); JSONArray values item.getJSONArray(value) null ? null : item.getJSONArray(value); if (values ! null) { for (Object v : values) { MapString, Integer counter optionCountMap.get(qId); if (counter ! null counter.containsKey((String) v)) { counter.put((String) v, counter.get((String) v) 1); } } } else { textAnswerMap.get(qId).add(item.getStr(value)); } } } result.setOptionCountMap(optionCountMap); result.setTextAnswerMap(textAnswerMap); return result; }注意多选题的前端提交格式是数组所以后端JSONArray values的判断要兼容别在单选对象上直接拿字符串当数组处理。6. 前端HTML5实战把“填写页”做成有手感的样子6.1 使用 localStorage 实现草稿自动保存填写问卷经常遇到中途去干别的回来后浏览器崩溃的情况。HTML5的localStorage非常适合做这个。我在页面加载时根据surveyId读取本地数据如果有就直接填充表单用户每次修改表单内容都触发input/change事件把当前所有答案存起来。const STORAGE_KEY survey_draft_ surveyId; function saveDraft() { const answers []; document.querySelectorAll([name^question_]).forEach(el { const qId parseInt(el.name.split(_)[1]); if (el.type checkbox) { if (el.checked) { let item answers.find(a a.questionId qId); if (!item) { item { questionId: qId, value: [] }; answers.push(item); } item.value.push(el.value); } } else { answers.push({ questionId: qId, value: el.value }); } }); localStorage.setItem(STORAGE_KEY, JSON.stringify(answers)); } // 页面加载时恢复 function loadDraft() { const saved localStorage.getItem(STORAGE_KEY); if (saved) { const answers JSON.parse(saved); answers.forEach(a { const elements document.querySelectorAll([namequestion_${a.questionId}]); if (Array.isArray(a.value)) { elements.forEach(el { if (a.value.includes(el.value)) { el.checked true; } }); } else { if (elements[0] elements[0].type radio) { elements.forEach(el { if (el.value a.value) el.checked true; }); } else { elements[0].value a.value; } } }); } }这里是原生JavaScript没有用任何前端框架。代码看起来不优雅但胜在直白运行效率高而且老师提问时你也能清楚地讲到“localStorage读写流程”。6.2 用HTML5表单校验少写一堆JS传统做法是在JS里做if判断HTML5自带很多校验属性直接用就好required必填maxlength500限制文本答案长度pattern^[0-9]{4,}$校验编号答案input typeemail让浏览器自动校验邮箱格式。还有一个细节在提交按钮上写formsubmit-form可以让按钮放在页面任何位置都能触发对应表单的校验和提交这在问卷长列表布局里很实用。form idsubmit-form onsubmitreturn false; !-- 题目区域 -- /form div classfooter-bar button formsubmit-form idsubmit-btn typesubmit提交问卷/button /div配合JS监听表单提交事件document.getElementById(submit-form).addEventListener(submit, function(e) { e.preventDefault(); if (!this.checkValidity()) { this.reportValidity(); return; } // 收集答案post到后端 });checkValidity()和reportValidity()配合能让用户就看到有校验提示又不用自己写错误弹出层。6.3 移动端自适应响应式布局和断点设计问卷调查很多人是在手机浏览器上填的。纯HTML5页面如果不做适配体验会非常差。我的做法很简单用Flex 百分比 media query。容器最大宽度640px居中。每个单选题选项用Flex包装手机屏上自动换行。按钮加min-height: 48px便于手指点击。.container { max-width: 640px; margin: 0 auto; padding: 16px; } .question-item { margin-bottom: 24px; } .options { display: flex; flex-wrap: wrap; gap: 8px; } .option { display: inline-flex; align-items: center; min-height: 48px; padding: 8px 16px; border-radius: 8px; background: #f5f5f5; cursor: pointer; } media (max-width: 480px) { .option { flex: 1 1 100%; } }6.4 提交前的完整性检查防止手滑用户填完点提交除了HTML5校验我还加了二次确认如果是本地草稿提交成功后要清空localStorage如果后端提示“已经填写过”也要清空本地草稿否则用户会以为还能填。async function handleSubmit(answers) { const res await axios.post(/api/answer/submit, { surveyId: surveyId, answers: answers }); if (res.data.code 200) { localStorage.removeItem(STORAGE_KEY); // 提交成功清草稿 alert(提交成功感谢你的参与); window.location.href /result.html?surveyId surveyId; } else if (res.data.code 401) { localStorage.removeItem(STORAGE_KEY); alert(你已填写过问卷不要重复提交); } else { alert(res.data.message); } }7. 登录鉴权、数据加密和一个过滤器的小坑7.1 用拦截器实现登录鉴权别引入SecuritySpring Security写起来劳心费力对课设来说不值得。我直接用HandlerInterceptorpublic class LoginInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { if (request.getRequestURI().startsWith(/admin)) { Object user request.getSession().getAttribute(loginUser); if (user null) { response.setContentType(application/json;charsetutf-8); response.getWriter().write(JSONUtil.toJsonStr(Result.fail(401, 未登录))); return false; } } return true; } }注册拦截器时把静态资源HTML、JS、CSS排除掉不然前端页面都打不开。7.2 登录密码一定要用 BCrypt别用MD5MD5撞库太容易了你可以现场演示同一个密码MD5后查彩虹表几秒就出来。我用Hutool的BCrypt.hashpw(password)存库校验用BCrypt.checkpw(plain, hash)。代码写起来不复杂但它能在答辩时展示你的安全意识。7.3 全局过滤器处理XSS攻击的代价热词里有一条“全局过滤器处理上传pdf文件时xss攻击”这其实是个很底层的坑。我用了一个基于XssFilter的全局Wrapper把请求参数里的尖括号转成实体字符。但要注意如果问卷文本答案里有“小于号”比如“6小时”直接过滤成lt;6小时存库展示时又会显示成6小时需要后端返回时把lt;再反转回来。我的建议是只在文本展示时转义而不是修改原始输入。过滤器负责把script相关的标签清理掉具体用正则替换掉危险标签但保留普通比较符号。这个细节不写出来部署后用户答案里出现就会导致显示异常。public static String cleanXss(String value) { if (!StringUtils.hasText(value)) { return value; } return value.replaceAll((?i)script.*?/script, ) .replaceAll((?i)javascript:, ) .replaceAll((?i)on\\w\\s*, ); }这才是实战中合理的方案过滤恶意脚本但不是无脑转义所有符号。8. 部署实录从本地到云服务器以及那些热搜里的坑8.1 打包和运行项目打包指令很简单mvn clean package java -jar target/survey-0.0.1-SNAPSHOT.jar但有几个细节建议留意在application.yml里设置server.port比如用8080云服务器安全组记得放行。MySQL8的驱动类要写全com.mysql.cj.jdbc.Driver否则报错。数据库连接串加参数?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai否则中文乱码和夏令时问题都会冒出来。把前端静态文件放到src/main/resources/static下打包后直接由Spring Boot托管省去配置Nginx的麻烦。如果你的热词里有“docker部署springboot项目”我也试过一次。关键点是写一个轻量Dockerfile基于openjdk:8-jre-alpine或者eclipse-temurin:8-jre。因为Spring Boot应用打包后是胖jar包不需要额外依赖。FROM openjdk:8-jre-alpine COPY target/survey-0.0.1-SNAPSHOT.jar app.jar EXPOSE 8080 ENTRYPOINT [java,-jar,/app.jar]8.2 热门坑springboot版本太高导致的ClassNotFound很多人一上来就建Spring Boot 3.x项目然后发现javax.servlet变成了jakarta.servlet网上旧教程代码全报错。这个根本原因就是版本迁移。建议普通课设直接使用Spring Boot 2.7.18这是2.x系列的最终版本教程和资料最多踩坑成本最低。如果你已经建了3.x项目想换回2.x最简单的方式不是在IDEA里改版本号而是把pom.xml的parent替换并把依赖中所有jakarta.servlet相关的引入手动改成javax.servlet。但这很折腾不如新建项目时一步选对。8.3 让问卷调查系统更像一个“产品”部署后要做的优化配置Swagger或Springdoc让接口文档能直接访问和调测。给问卷列表添加分页MyBatis-Plus自带的Page类几行代码就能实现。导出统计结果成CSV用EasyExcel或opencsv比POI轻量很多。添加一个简单的Redis缓存统计结果缓存10分钟减少数据库压力。如果觉得Redis引入复杂可以先用Cacheable加本地缓存反正课设不用追求极端性能。9. 调试时最崩溃的几个场景和排查路径9.1 前端拿不到后端数据浏览器控制台报404这种情况十有八九是拦截器把静态请求拦了或者controller路径不对。排查优先级直接访问controller的URL看返回结果。看控制台日志是不是出现404响应。检查拦截器excludePathPatterns里是否包含/**/*.html、/**/*.js、/**/*.css。检查前端请求的baseURL是否和service端口一致尤其用axios时端口写错是常事。9.2 提交问卷后数据库里中文是问号这是JDBC连接参数没加characterEncodingutf8。但还有另一种可能建表时用了latin1字符集。所以建表语句里要写DEFAULT CHARSETutf8mb4并且连接串也加上编码参数双保险。9.3 统计接口报空指针我写的统计接口里如果某个answer_record里的value不是数组比如填空题存的是字符串而代码里直接当成数组遍历就会NPE。处理方案是取value时先判断类型。Object value item.get(value); if (value instanceof JSONArray) { JSONArray arr (JSONArray) value; // 处理多选 } else if (value instanceof String) { String s (String) value; // 处理单选/填空 }9.4 线上部署时 session 不生效Spring Boot默认session是保存在JVM内存里的启在云服务器上不会出问题。但如果用Docker多实例部署session就会丢失。好在课设不会做集群但如果你被问到了可以说“这个系统面向单机应用真正的生产环境会用Redis做session共享”这一句能展示你对分布式知识的了解。10. 复盘那些代码之外的设计小心得最后分享几个我在做这套系统时觉得判断正确的选择这些虽然不是必须写的功能但能让整个项目“活”起来。第一HTML5的visibilitychange事件可以用来记录用户离开填写页面的次数。如果问卷带了“用户填写时长”的统计需求可以记录用户从打开问卷到提交的总时间以及切出页面的次数。这个数据能反映问卷质量——如果平均切出次数特别多说明题目太复杂用户得查资料才能答。第二你可以在页面里调用navigator.onLine和在线离线事件当断网时自动提醒用户草稿已存本地。我尝试在问卷页加入了一个断网提示条一旦断网就显示“网络已断开填写内容会临时保存在本机”提交时如果还没联网就智能提示稍后重试。这其实是HTML5的一个很讨喜的细节答辩时甚至可以当场演示飞行模式。第三不要把统计页面写得太复杂。我一开始想用Canvas画饼状图、柱状图但后来发现echarts只需要引入一个script就能搞定没必要为了“纯HTML5”去手动画图。正则学习和实际使用不冲突重要的是结果展示清晰。如果你现在正被这个题目困住我的建议是先把我说的核心链路走通管理员创建问卷用户填问卷管理员看统计。这三个点连成一线后再往里加花活——比如草稿保存、防重复提交、移动端适配、CSV导出。这样代码节奏很稳不会出现答辩前还在改Bug的狼狈状态。这也就是我标题里那个“11761”编号的来由——当时在每个迭代版本后面追加了序号11761是交付前的倒数第三版再往后就是把统计数据图形化的尝试。希望你也能在一次次的迭代里把这个系统做成自己真正满意的作品。