做学生成绩管理系统最近用AI辅助编码的方式重新走了一遍整个开发流程从需求梳理到页面生成再到逻辑实现实测下来效率确实比传统手写高出不少。这篇就把我从零开始用AI协作完成一个WEB版学生成绩管理系统的全过程拆开来讲包括怎么设计提示词、怎么拆需求、怎么让AI生成可用的页面和接口、以及踩过的那些坑。不管你是刚接触Web开发的新手还是想尝试AI辅助编程的老手这篇都有可以抄作业的地方。1. 项目定位与AI协作思路1.1 学生成绩管理系统到底要做什么学生成绩管理系统属于最经典的CRUD应用业务边界清晰、功能模块标准化程度高特别适合作为AI辅助开发的练手项目。核心功能无非就是三大块学生信息管理、成绩录入与查询、统计分析与展示。再往外延伸一点还可以加入课程管理、班级管理、教师权限、导出报表这些模块但骨架始终是清晰的。这类系统在真实场景里往往是教务人员、班主任、任课老师在使用所以页面设计上要照顾到操作效率和信息密度。比如成绩录入页面就需要支持按班级批量录入、按课程切换、按考试批次区分而不是简单的一张表从头填到尾。AI辅助开发的价值在于这些看似琐碎但有一定规律性的需求AI能快速给出基础实现我们只需要在它的基础上做业务细节的修正和补全。1.2 为什么选AI辅助而不是纯手写传统方式做一个这样的系统光前端页面就要写登录、首页、学生管理、成绩管理、统计分析好几块。如果只有一个人做前端加后端加数据库顺利的话也要两三天才能跑通主流程。AI辅助之后前端页面生成效率提升非常明显尤其像表格页、表单页、弹窗这些结构化的UIAI生成的基础版本往往已经能直接使用人工需要调整的基本是样式细节和交互逻辑。另一个好处是AI能帮我们把思路理顺。比如我在设计数据库表结构时直接问AI“学生成绩管理系统需要哪几张表”它给出的表结构设计基本涵盖了学生表、教师表、课程表、成绩表、班级表这些核心实体而且字段设计也比较合理。这种辅助能力相当于身边坐了一个经验还不错的同事可以随时讨论、随时给方案。不过AI的产出不能盲信关键技术决策、安全设计、异常处理这些还是要把关的AI给的代码只能作为效率和灵感的放大器不能替代人的判断。2. 技术方案选型与准备2.1 技术栈怎么选这次实践我选的是Spring Boot Thymeleaf MyBatis-Plus MySQL的组合这套技术栈在Java Web领域普及度极高不是说它有多新而是它生态成熟、资料多、AI训练语料覆盖率高AI写出来的代码往往正确率也更高。选这套方案的几个具体原因Spring Boot解决了项目配置和启动的大部分繁琐问题内嵌Tomcat让部署变得非常简单Thymeleaf作为服务端渲染模板引擎对于这种以表格和表单为核心的管理系统来说很合适后端直接返回页面和数据不需要额外做前后端分离的复杂度MyBatis-Plus在单表CRUD场景下几乎不需要手写SQL内置的Wrapper查询机制配合AI生成代码非常顺手。前端方面我没有使用任何重量级框架就是Thymeleaf模板加上原生JavaScript和Bootstrap。原因是成绩管理系统的页面交互复杂度并不高主要就是表格渲染、表单提交、弹窗确认这几类引入Vue或React反而增加了学习成本和构建复杂度用服务端渲染的方式反而是最务实的。2.2 环境准备与初始化环境方面我本机用的是JDK 17、Maven 3.9、MySQL 8.0IDE是IntelliJ IDEA 2024版。这里有个小经验要先说一下AI训练的数据里Spring Boot 2.x的语料远多于3.x如果你用的是Spring Boot 3.xAI生成的代码里偶尔会出现版本不兼容的情况比如javax.servlet和jakarta.servlet的差异。所以如果追求AI辅助编码的顺畅度暂时用Spring Boot 2.7.x也是个稳妥的选择我这里直接上了3.x遇到问题自己改起来也不难但新手建议优先2.7版本。项目初始化我直接用Spring Initializr生成依赖选了Spring Web、Thymeleaf、MyBatis-Plus和MySQL Driver。然后把application.yml配置写好数据库建好一张表先跑通一个最简单的查询接口确认链路没问题再开始让AI生成业务代码。这个步骤很关键很多人在AI生成代码前没把基础设施跑通导致AI生成的代码混入环境问题时根本分不清是AI写错了还是自己环境有问题。3. AI生成页面的核心实操3.1 让AI生成登录页面登录页面我给的提示词非常简单直接“用Thymeleaf和Bootstrap生成一个学生成绩管理系统的登录页面包含用户名、密码输入框登录按钮要求界面简洁美观有系统名称标题和版权信息。”不到十秒钟AI就给出了完整的HTML页面包含表单结构、样式引入、错误提示占位整体完成度很高。但我发现AI生成的登录页有一个问题它的表单没有绑定任何后端接口地址也没有做前端校验。于是我又追加了一轮提示“给表单添加action为/login的POST提交方式用户名和密码字段添加required校验添加一个错误提示的div区域用于显示登录失败原因。”这一轮补全之后登录页就基本能直接用了。这里体现的是AI协作的核心工作方式不是一句话让AI把整个系统生成了而是分模块、分轮次、持续修正每轮提示聚焦一个小目标。表单的真实代码如下这是我调过几版之后最终用的版本加上了AJAX提交和JSON返回处理比AI最初给的纯表单提交体验好了不少form idloginForm classneeds-validation novalidate div classmb-3 label forusername classform-label用户名/label input typetext classform-control idusername nameusername required autofocus div classinvalid-feedback请输入用户名/div /div div classmb-3 label forpassword classform-label密码/label input typepassword classform-control idpassword namepassword required div classinvalid-feedback请输入密码/div /div div idloginError classalert alert-danger d-none rolealert/div button typesubmit classbtn btn-primary w-100登 录/button div classtext-center text-muted mt-3 small成绩管理系统 v1.0/small /div /form script document.getElementById(loginForm).addEventListener(submit, function(e) { e.preventDefault(); if (!this.checkValidity()) { this.classList.add(was-validated); return; } fetch(/login, { method: POST, headers: {Content-Type: application/json}, body: JSON.stringify({ username: document.getElementById(username).value, password: document.getElementById(password).value }) }) .then(res res.json()) .then(data { if (data.code 200) { location.href /dashboard; } else { document.getElementById(loginError).textContent data.msg; document.getElementById(loginError).classList.remove(d-none); } }); }); /script3.2 主页面布局的AI生成与调整主页面我让AI生成一个典型的后台管理布局要求包含顶部导航栏、左侧菜单、右侧内容区。AI生成之后的效果整体可用但左侧菜单的菜单项比较粗放没有根据学生成绩管理系统的角色需求细化。我调整的时候把菜单分成了三大类基础信息维护学生管理、班级管理、课程管理、成绩业务成绩录入、成绩查询、成绩统计、系统管理用户管理、修改密码。这个布局调整不仅仅是视觉层面的它会直接影响后续页面的组织逻辑。菜单结构理清楚了后面每个功能页面的代码就可以围绕菜单逐个生成。我还让AI给顶部导航栏加了一个显示当前登录用户的下拉菜单包含退出登录功能这部分AI一次就生成对了说明这类通用功能AI的训练语料覆盖非常充足。3.3 学生管理页面的生成过程学生管理页面是整个系统最核心的页面之一它的功能要求是分页展示学生列表、支持按姓名和学号搜索、新增学生、编辑学生信息、删除学生。这个页面的生成我分了三轮提示。第一轮提示“生成学生管理页面用Thymeleaf模板展示学生列表表格包含学号、姓名、性别、年龄、班级、联系电话字段使用Bootstrap分页组件。”AI输出了一个带分页的列表页数据通过一个studentList变量渲染分页按钮也已经处理成带页码参数的链接。但新增和编辑功能只有按钮没有对应的模态框。第二轮提示“给页面添加新增和编辑共用的模态框包含学号、姓名、性别、年龄、班级、联系电话字段保存时提交到/saveStudent接口关闭时重置表单。”这轮AI生成了模态框和对应的JavaScript提交逻辑但也出现了一个小问题编辑时它把学号也放进表单提交了而学号在业务上是不允许修改的。这属于典型的业务逻辑细节AI是理解不了的。第三轮我自己做了调整把学号字段在编辑模式下设置成只读新增模式下允许输入。处理方式是在模态框打开时判断是新增还是编辑动态控制学号输入框disabled属性。这个细节如果不注意保存时就会把学号覆盖掉或者产生重复数据问题。3.4 成绩录入页面的交互设计成绩录入页面是另一个难点页面。业务场景是这样的教师选择课程和考试批次然后按班级展示学生列表逐个录入成绩最后可以一键保存所有成绩。如果按照普通的表单页来做提交逻辑会非常麻烦因为有大量行数据需要一次性提交。我先让AI生成一个静态的录入界面包含课程下拉框、考试批次下拉框、学生成绩表格。然后重点提示AI“成绩录入表格中每个学生的成绩使用input输入框name属性格式为scores[学生ID]保存时使用AJAX提交整个表单的所有成绩数据。”AI对这种批量提交模式的处理还算靠谱生成了一段循环序列化表单数据的JavaScript实测提交到后端后能正确解析。但我发现AI生成的批次下拉框是写死的没有从后端加载数据。于是我补充实现了考试批次的数据来源在数据库中建了exam_batch表后端提供接口返回已有的考试批次列表前端通过AJAX加载。这个功能实现之后录入成绩的流程就完整了选课程、选批次、加载学生列表、录入分数、批量保存。4. 业务逻辑与后端接口实现4.1 五张核心表的设计与创建数据库表结构是整个系统的基础我和AI经过两轮讨论确定了最终的表设计总共五张核心表字段设计如下表名核心字段说明studentid, student_no, name, gender, age, class_id, phone学生信息表teacherid, teacher_no, name, subject, phone教师信息表courseid, course_name, credit, teacher_id课程信息表class_infoid, class_name, grade班级信息表scoreid, student_id, course_id, exam_batch, score成绩表这里有个经验想分享AI第一次给出的表设计中score表缺少了一个很重要的联合唯一索引。如果同一个学生、同一门课、同一次考试批次重复录入了成绩数据就会出现重复。我加上了一个UNIQUE索引约束(student_id, course_id, exam_batch)三个字段的组合唯一性从数据库层面切断了重复数据的可能。这个细节在访谈式的AI对话中其实可以问出来如果你直接问AI“成绩表怎么避免重复数据”它是能给出这个建议的。但如果你不问它就不会主动做。创建表的SQL我虽然是手写的但还是让AI帮忙Review了一遍索引设计和字段类型选择。AI确实发现了一个问题score字段我用的是INTEGER咨询之后确认改为DECIMAL(5,2)更合理因为考试成绩尤其是百分制经常有小数点。这类细节直接决定系统的数据精确度如果一开始定错了后期改字段类型要连带更新一堆代码非常麻烦。4.2 Controller层接口的AI生成与修正后端接口这块我让AI按RESTful风格生成Controller要求统一返回Result对象包含code、msg、data三个字段。AI生成的接口代码整体可用符合Spring Boot的常规写法。以成绩录入的保存接口为例AI生成的代码框架大致如下但我做了不少修正PostMapping(/saveScores) ResponseBody public Result saveScores(RequestBody ListScoreDTO scoreList) { if (scoreList null || scoreList.isEmpty()) { return Result.error(成绩数据不能为空); } for (ScoreDTO dto : scoreList) { if (dto.getScore() null || dto.getScore() 0 || dto.getScore() 100) { return Result.error(成绩必须在0-100之间); } } scoreService.saveBatchScores(scoreList); return Result.success(); }我修正的地方主要在两个层面一是参数校验。AI最初生成的代码没有校验成绩范围如果前端绕过直接传一个负数数据就进库了所以我在保存前加了范围判断。二是批量保存的性能问题。AI最初生成的版本是for循环逐条判断是否存在然后逐条更新我改成让Service层先查一次已有记录然后分组做批量插入和批量更新减少了数据库交互次数。小数据量下两者差别不大但录入一个班级50个学生时批量操作明显更快。4.3 成绩统计与可视化展示成绩统计页面是我在整个项目中最满意的一个模块原因在于AI在数据可视化方面给了我很大的启发。我最初的设想很简单就是展示平均分、及格率、最高分、最低分这几个数值。但AI在生成统计页面时提示可以加入基于ECharts的柱状图来展示班级平均分的对比以及分数段分布的饼图。这属于AI的“超出预期产出”它没有局限于我给出的每个具体需求而是根据“统计”这个宽泛概念给出了可视化方案。实现上后端接口 /statistics/classComparison 返回每个班级的平均分列表 /statistics/scoreDistribution 返回优秀、良好、中等、及格、不及格各段的人数前端用ECharts初始化两个图表容器。AI生成的ECharts配置代码基本可用但我手动调整了颜色主题和坐标轴标签的旋转角度因为班级名称有时候比较长标签重叠比较严重。将x轴标签旋转30度之后显示效果好了很多。5. 实操问题排查与调试实录5.1 页面渲染数据为空的排查过程第一次运行项目打开学生列表页时页面能正常显示表格标题但数据区域是空的。我先看了Thymeleaf模板和Controller之间的数据传递确认了Controller中往Model添加了studentList模板中也用了th:eachstudent : ${studentList}看起来没问题。接着我查了接口返回是否正常在浏览器直接访问 /listStudent 接口发现返回了JSON数据说明后端逻辑是正常的。问题定位到了模板解析这一步重新检查后发现我访问的地址是 /student/list但Controller里方法映射写的路径是 /listStudent两者不一致。这是自己改路径时出现的问题AI生成的代码里路径是统一的是我后期手动调整模块路径时漏改了一个地方。这类问题在AI辅助开发中经常出现根子在于多个模块的路径命名规则不一致建议统一用 /模块名/操作名 的格式来组织URL。5.2 MyBatis-Plus查询条件不生效在使用MyBatis-Plus的分页查询时我让AI生成了搜索逻辑支持按姓名模糊查询和按班级筛选。但实测发现在搜索框中输入关键字点击查询返回的数据还是全量数据过滤条件没有生效。查看控制台日志发现MyBatis-Plus执行SQL时where条件确实带上了但搜索结果页面依然显示了全部学生。最后找到了原因调用分页接口时我没有把Page对象重新赋值给返回变量。MyBatis-Plus的selectPage方法执行后并不会修改传入的Page对象本身引用里的数据这里要特别说一下selectPage方法出入参是同一个Page对象数据会写入传入的那个Page实例但如果有一步老写法去new了一个新Page接收结果再用就会拿到旧对象。修正方式是从Controller接收返回的Page对象并将模板数据绑定到page.records而不是page本身。5.3 AJAX提交成绩时数据串位成绩批量提交功能的调试遇到一个令人头疼的问题前端传过来的成绩数据在后端接收后分析发现部分学生ID和成绩对不上号存在串位情况。排查后发现原因是AI生成的JavaScript在序列化表单数据时用了默认的serialize方法表单中input的name生成顺序依赖DOM树的生成顺序但动态渲染的学生列表顺序在首次加载后如果发生了局部刷新DOM顺序和数据顺序就会不一致。我在生成学生列表时做了一个优化每个成绩输入框加了一个自定义属性data-student-id提交时不用表单序列化而是遍历所有成绩输入框读取其data-student-id属性值来组装JSON从根源上杜绝了串位问题。具体实现代码如下const scoreData []; document.querySelectorAll(.score-input).forEach(input { const studentId input.getAttribute(data-student-id); const scoreVal input.value.trim(); if (scoreVal ! ) { scoreData.push({ studentId: parseInt(studentId), courseId: parseInt(courseId), examBatch: examBatch, score: parseFloat(scoreVal) }); } });5.4 常见问题速查表问题现象可能原因解决方案页面空白无数据路由映射路径不一致检查Controller中RequestMapping与页面请求地址是否完全匹配数据过滤条件无效分页对象未正确接收返回结果使用selectPage返回的Page对象绑定page.records渲染列表批量数据串位表单序列化顺序与数据顺序不一致放弃序列化改为遍历DOM读取data属性组装数据新增和编辑共用模态框数据残留模态框关闭时未重置表单监听模态框的hidden.bs.modal事件手动reset表单Thymeleaf模板报错数据属性名不一致检查Model添加的属性名与模板中${}表达式是否一致删除时确认弹窗失效id选择器拼接错误删除按钮使用data-id属性事件绑定用事件委托6. 从AI生成到可靠交付的实用建议6.1 提示词设计的核心技巧用AI辅助开发Web系统提示词的质量直接决定了产出的可用性。我发现几个好用的套路用了之后AI生成的代码质量提升非常明显。第一是分步骤提问不给AI一个宏观的“帮我写一个学生成绩管理系统”这种提示词因为它的输出长度有限写到最后往往深度不够。而是拆成“生成学生分页列表页”、“设计成绩表结构”、“实现成绩批量保存接口”这种聚焦问题每个问题单独一轮对话。第二是给出技术约束提示词里明确说明“使用ThymeleafMyBatis-PlusBootstrap”AI的输出就高度规范化几乎不需要再调整技术风格。如果不指定AI有时会生成Layui版、有时生成ElementUI版技术风格不一致集成起来非常痛苦。第三是善于追问为什么AI生成了某个方案我们可以追问“为什么这样设计字段”、“为什么用这个查询方式”它的解释能帮我们理解背后的业务考量同时也能发现方案中潜在的问题。6.2 哪些代码必须人工把关AI虽然是效率工具但有两个地方我会严格把关。第一是数据安全相关的代码登录验证、SQL注入防护、XSS过滤这些部分。AI生成的代码在这块有时候比较单薄比如登录功能它可能只做了用户名密码查询匹配没有考虑密码加密存储、会话管理、登录失败次数限制。我在项目里补充了BCrypt密码加密和Session超时处理这些都是AI不会主动帮你考虑的。第二是事务管理。成绩批量保存时涉及到多条数据的插入和更新必须加上Transactional确保要么全部成功要么全部回滚。AI生成的Service方法默认不会主动加事务注解这个关键点只有靠人识别和补齐。使用了一个班级录入到一半某条数据出错中止前半部分已经入库但用户以为全部失败了这种数据不一致是最麻烦的问题。6.3 角色分工AI是助手而不是作者这次的开发经历给我最大的体会是AI辅助编程不是把AI当工具人让它一口气产出所有代码而是把它当协作者我们做架构师和质检员它做实现者和资料库。需求拆分、技术选型、数据结构设计、安全边界定义这些决策必须由人来完成AI负责把明确的需求快速翻译成代码。项目中后期我也逐步从“让AI生成页面”过渡到“让AI帮我修改和优化已有代码”。比如我给它看一段已有的查询代码请它帮忙优化性能、指出潜在问题、补充注释这种使用方式的反馈速度更快、质量也更高。实际上AI最擅长的是在已有的上下文基础上做增量修改比从零生成更加准确可靠。7. 项目扩展的可能性学生成绩管理系统做完基础版本之后扩展空间其实很大。教务场景里可以增加考试分析模块按班级、按课程对比历次成绩变化趋势识别成绩波动较大的学生可以增加教师评语功能录入成绩时同步录入评语生成成绩报告单也可以用Apache POI实现成绩单批量导出功能把学生成绩表导出成Excel文件。这些扩展方向只要有明确的业务需求用同样的AI协作模式都能快速推进。我自己接下来准备做的优化有两个方向。第一是增加基于角色的权限控制区分管理员、教师、学生三种角色不同的角色登录后看到的菜单和数据范围不同。第二是引入简单的数据缓存把班级平均分、考试统计这类读多写少的数据在Redis里缓存起来减轻数据库压力。等这两个方向做完这个系统基本就能达到一个小型教务系统的可用水平了。