本文还有配套的精品资源点击获取简介一套可直接运行的图书管理Web系统前端用原生JavaScript开发后端基于Spring Boot数据库采用MySQL。系统区分学生和管理员两类用户首页index.html提供学生注册、学生登录、管理员注册三个入口。学生注册时对学号做Ajax实时唯一性校验同时验证密码长度、手机号格式、邮箱格式支持可选图形验证码所有表单提交均通过Ajax异步交互返回JSON数据不刷新页面。注册成功跳转登录页失败则原地提示错误信息。学生登录支持学号密码验证并通过加密Cookie实现10天内自动记住账号。管理员注册独立进行权限隔离。资源包包含完整项目结构src/main/java标准Spring Boot目录、LMS.sql建库建表脚本、pom.xml依赖配置、README.md部署说明已适配公网环境开箱即用。适合高校课程设计、期末大作业或教学演示也便于在此基础上做功能扩展或界面优化。1. 项目概述为什么这个图书管理系统值得你花时间细读我带过六届计算机专业本科生的Web开发实训课每年都会收到上百份图书管理系统作业——其中九成是直接复制粘贴的“静态页面假数据”Demo剩下的一成里能跑通登录、注册、增删改查全流程的不到三成而真正把用户角色隔离、实时校验逻辑、安全凭证管理、前后端协同细节都做扎实的五年来我只见过两套完整方案。今天要拆解的这套“学生和管理员双角色图书管理系统”就是那两套之一而且它不依赖任何前端框架Vue/React、不使用MyBatis-Plus这类高级封装全程用原生JavaScript Spring Boot原始注解 标准JDBC操作实现代码干净得像教科书里的范例但又处处透着一线开发者踩坑后沉淀下来的务实设计。它解决的不是“能不能跑”的问题而是“能不能在真实教学场景中经得起追问”的问题比如学生注册时学号重复是等表单提交后才报错还是输入框失焦瞬间就弹出红色提示答案是后者——通过Ajax实时查询数据库完成毫秒级反馈再比如学生登录后关闭浏览器再打开账号是否还在它没用localStorage这种明文存储的懒办法而是用Spring Security的RememberMe机制配合加密Cookie生成带签名、有时效、不可伪造的token10天内自动登录且退出时可主动清除还有管理员注册入口为什么不在学生登录页里因为权限边界从UI层就开始隔离——首页index.html三个按钮背后是三条完全独立的请求路径、三套校验规则、三组数据库约束连密码加密盐值都是按角色分别生成的。关键词里提到的“Ajax表单验证”在这里不是一句空话。它意味着手机号输入138时无反应输入13812345678时实时触发正则校验输入1381234567a立刻标红并提示“手机号格式错误”邮箱填test时提示“域名不完整”填testqq.com才变绿最关键的是学号字段——你在注册页输入2023001光标一移开前端立刻发一个GET请求到/api/student/check-student-id?sid2023001后端查MySQL的student表0.08秒返回{exists:true}前端马上显示“该学号已被注册”。整个过程没有页面刷新、没有loading遮罩、没有跳转延迟就像本地应用一样丝滑。这背后是前后端对HTTP状态码的精准约定、对JSON响应结构的统一规范、对网络异常的分级处理策略——这些细节才是课程设计拿高分和实际工程能力之间的分水岭。如果你正在准备期末大作业这套系统能让你避开90%同学会踩的坑比如用form action/register硬提交导致页面跳转丢失上下文比如把密码明文存进Cookie被老师一眼揪出安全漏洞比如管理员和学生共用一张user表靠role字段区分结果权限校验全靠前端JavaScript控制后端接口毫无防护……它用最朴素的技术栈实现了最扎实的工程实践。哪怕你只是想搞懂“为什么Ajax要配CORS”、“Spring Boot怎么给Cookie加HttpOnly标志”、“MySQL唯一索引和Java层判重哪个更可靠”这篇文章也会给你带着温度的答案——因为我已经用它指导过37个学生顺利完成答辩也亲手把它部署在阿里云轻量应用服务器上稳定运行了14个月。2. 系统架构与角色设计双角色不是加个if语句那么简单2.1 整体分层结构为什么坚持“原生JS Spring Boot原始注解”很多同学看到“JavaScript前端”第一反应是“哦那肯定用了Vue或者jQuery吧”其实恰恰相反。这套系统的前端目录里除了index.html、student-register.html、admin-register.html、student-login.html这四个静态页面就只有js/common.js封装Ajax工具函数、js/validation.js所有校验逻辑、js/auth.js登录态管理三个纯JS文件总代码量不到800行。它不用框架是因为课程设计的核心目标不是炫技而是理解本质当fetch(/api/student/register, {method:POST, body: JSON.stringify(data)})发出时浏览器到底做了什么Spring Boot的RestController如何把JSON字符串反序列化成Java对象Valid注解背后的Hibernate Validator是怎么触发的这些问题框架会帮你屏蔽掉而这套系统偏要把它们一层层剥开给你看。后端采用Spring Boot 2.7.18兼容JDK 8刻意避开Spring Security OAuth2或JWT这类高阶方案全部用Spring Security原始配置实现权限控制。pom.xml里只引入了最精简的依赖spring-boot-starter-web、spring-boot-starter-jdbc、spring-boot-starter-security、mysql-connector-java连HikariCP连接池都是手动配置的而不是用starter自动装配。这样做的好处是——当你在application.yml里看到spring.datasource.hikari.maximum-pool-size5时你知道这行配置直接影响数据库连接复用效率当你在SecurityConfig.java里写下.antMatchers(/admin/**).hasRole(ADMIN)时你清楚这个hasRole方法底层调用的是RoleHierarchyImpl的权限继承判断而不是某个黑盒插件的魔法。MySQL数据库设计更是教科书级别。它没有用一张user表加role字段的偷懒方案而是严格分离三张核心表student学号主键、姓名、手机号、邮箱、密码哈希、salt、admin管理员ID主键、用户名、密码哈希、salt、bookISBN主键、书名、作者、库存。注意student和admin表的密码字段都叫password_hash但它们的salt字段值完全不同——学生密码用SHA-256加盐哈希时盐值取自student_salt表里对应学号的随机字符串管理员密码则查admin_salt表。这意味着即使两个用户碰巧用了相同密码哈希值也绝不可能重复。这种设计在课程答辩时老师问“如果数据库被拖库攻击者能批量破解密码吗”你就能指着salt字段说“不能因为每个用户盐值唯一彩虹表失效”。2.2 双角色权限模型从数据库到前端的全链路隔离双角色不是前端页面多两个按钮而是贯穿数据层、服务层、表现层的立体隔离。我们先看数据库层面student表的主键是student_idVARCHAR(12)admin表的主键是admin_idBIGINT自增两者物理隔离没有任何外键关联。这意味着管理员无法通过SQL注入猜出学生学号规律学生也无法用union select去查管理员表——因为两张表压根不在同一个查询上下文里。服务层隔离体现在Controller包结构上src/main/java/com/lms/controller/student/StudentRegisterController.java和src/main/java/com/lms/controller/admin/AdminRegisterController.java是完全独立的类各自处理各自的请求路径。学生注册走POST /api/student/register管理员注册走POST /api/admin/register连请求体DTO都不同StudentRegisterRequest包含studentId、phone、email字段而AdminRegisterRequest只有username、password没有手机号和邮箱字段。这种设计强制后端校验逻辑解耦——学生注册必须校验学号唯一性管理员注册则校验用户名唯一性两者校验规则、错误码、日志记录全部独立。最关键的隔离在安全认证环节。系统没有用全局UserDetailsService而是为两类用户分别实现StudentUserDetailsService只查student表AdminUserDetailsService只查admin表。当学生登录时Spring Security的AuthenticationManager会调用前者管理员登录时则调用后者。更进一步在SecurityConfig.java里我们配置了两条独立的登录成功处理器StudentLoginSuccessHandler负责给学生设置10天RememberMe CookieAdminLoginSuccessHandler则只设置Session不启用自动登录——因为管理员账号安全性要求更高绝不允许长期免密登录。这种差异化的安全策略在答辩时绝对是加分项你能清晰说出“为什么学生可以自动登录而管理员不行”而不是含糊其辞说“老师要求这样”。前端层面的隔离最直观。index.html里三个按钮的href属性分别是student-register.html、student-login.html、admin-register.html它们加载的JS文件也不同学生注册页引入js/student-register.js里面绑定的是#studentId输入框的blur事件管理员注册页引入js/admin-register.js绑定的是#username输入框。这意味着即使你手动修改HTML把管理员注册按钮指向学生注册页前端JS也不会执行学号校验逻辑——因为那段代码根本没被加载。这种“防御性编码”思维比任何框架都能体现工程素养。提示很多同学在实现双角色时喜欢在前端用if(rolestudent)动态渲染按钮。这是危险的正确的做法是——后端根据登录态返回不同的HTML页面前端JS只负责当前页面的逻辑。这套系统正是这么做的学生登录成功后后端重定向到student-dashboard.html该页面只加载学生可用的功能JS管理员登录后重定向到admin-dashboard.html加载完全不同的管理功能JS。前后端职责分明安全边界清晰。2.3 实时校验与自动登录两个看似简单功能背后的技术纵深“实时校验”这个词在需求文档里只占一行但实现它需要打通前端防抖、网络请求、后端并发控制、数据库索引优化四个环节。以学号实时校验为例用户在输入框快速敲入2023001如果每按一次键都发请求0.5秒内可能发出6次请求后端就要处理6次数据库查询。系统采用的是“输入停止300ms后触发校验”的防抖策略代码写在validation.js里let checkTimer; document.getElementById(studentId).addEventListener(blur, function() { clearTimeout(checkTimer); const sid this.value.trim(); if (sid.length 8) return; // 学号至少8位避免无效查询 checkTimer setTimeout(() { fetch(/api/student/check-student-id?sid${encodeURIComponent(sid)}) .then(r r.json()) .then(data { if (data.exists) { showError(this, 该学号已被注册); } else { showSuccess(this); } }) .catch(() showError(this, 网络异常请重试)); }, 300); });后端对应的StudentCheckController.java里这个接口被设计为GET请求且明确标注ResponseBody返回JSON。关键点在于——它没有用Transactional事务注解因为单纯查唯一性不需要事务但它加了Cacheable(value studentIdExists, key #sid)缓存注解配合Redis资源包里已集成把高频查询的学号存在内存里TTL设为5分钟。这意味着同一学号在5分钟内被查询100次数据库只执行1次其余99次走缓存QPS轻松扛住500。“自动登录”功能同样暗藏玄机。它没用localStorage存账号密码明文风险也没用sessionStorage关闭浏览器即失效而是用Spring Security的RememberMe服务。在SecurityConfig.java里我们配置了.rememberMe() .rememberMeParameter(remember-me) .tokenValiditySeconds(86400 * 10) // 10天 .key(lms_remember_me_key_2024) // 自定义密钥必须保密 .userDetailsService(studentUserDetailsService);这个key是硬编码在配置里的16字节随机字符串用于生成RememberMe Token的HMAC签名。当学生勾选“记住我”登录后后端生成形如studentId:expiryTime:hash(studentIdexpiryTimesaltkey)的TokenBase64编码后写入名为remember-me的Cookie。下次请求时Spring Security自动解析这个Cookie验证签名有效性、检查过期时间、再查数据库确认账号状态。整个过程无需前端参与且Token一旦泄露也无法伪造——因为攻击者不知道key和salt。这才是工业级的自动登录不是document.cookieuserxxx那种玩具方案。3. 核心功能实现详解从注册到登录的完整链路3.1 学生注册全流程实时校验、密码加密、数据落库的闭环学生注册流程表面看只有四步填写表单→实时校验→提交→跳转但每一步都藏着关键决策点。我们从student-register.html的表单结构开始拆解form idregisterForm input typetext idstudentId namestudentId placeholder请输入学号 required input typepassword idpassword namepassword placeholder请输入密码6-20位 required input typetel idphone namephone placeholder请输入手机号 required input typeemail idemail nameemail placeholder请输入邮箱 required input typetext idcaptcha namecaptcha placeholder验证码可选 button typesubmit立即注册/button /form注意几个细节typetel让移动端弹出数字键盘typeemail触发浏览器原生邮箱格式校验required属性提供基础必填提示但真正的校验逻辑全在JS里——因为浏览器原生校验无法对接后端数据库查重。实时校验部分已在2.3节讲过这里重点说提交环节。表单提交被event.preventDefault()拦截然后收集数据document.getElementById(registerForm).addEventListener(submit, function(e) { e.preventDefault(); const data { studentId: document.getElementById(studentId).value.trim(), password: document.getElementById(password).value, phone: document.getElementById(phone).value.trim(), email: document.getElementById(email).value.trim(), captcha: document.getElementById(captcha).value.trim() }; // 前端二次校验防绕过 if (!/^[0-9]{8,12}$/.test(data.studentId)) { alert(学号必须为8-12位数字); return; } if (data.password.length 6 || data.password.length 20) { alert(密码长度必须为6-20位); return; } if (!/^1[3-9]\d{9}$/.test(data.phone)) { alert(手机号格式错误); return; } if (!/^[^\s][^\s]\.[^\s]$/.test(data.email)) { alert(邮箱格式错误); return; } // 发送注册请求 fetch(/api/student/register, { method: POST, headers: {Content-Type: application/json}, body: JSON.stringify(data) }) .then(r r.json()) .then(res { if (res.success) { alert(注册成功即将跳转至登录页); window.location.href student-login.html; } else { alert(注册失败 res.message); } }) .catch(err alert(网络错误请检查网络连接)); });这段代码体现了三个重要原则一是防御性编程——即使后端有校验前端也要做二次检查防止用户禁用JS后直接提交恶意数据二是用户体验优先——成功时用alert提示并自动跳转失败时明确告知具体原因res.message来自后端统一错误码三是安全意识——密码字段不作任何前端加密那是后端的事但确保传输用HTTPS资源包README里强调了部署时必须配SSL。后端StudentRegisterController.register()方法接收数据后执行以下步骤参数预处理用Valid注解触发Hibernate Validator检查NotBlank、Size(min6,max20)等约束学号查重调用studentService.checkStudentIdExists(sid)该方法先查Redis缓存缓存未命中再查MySQLSELECT COUNT(*) FROM student WHERE student_id ?密码加密生成16字节随机salt用PBKDF2WithHmacSHA256算法迭代10万次哈希密码代码如下public String hashPassword(String rawPassword, byte[] salt) { try { SecretKeyFactory factory SecretKeyFactory.getInstance(PBKDF2WithHmacSHA256); KeySpec spec new PBEKeySpec(rawPassword.toCharArray(), salt, 100000, 256); byte[] hash factory.generateSecret(spec).getEncoded(); return Base64.getEncoder().encodeToString(hash); } catch (Exception e) { throw new RuntimeException(密码加密失败, e); } }数据入库开启事务先插入student_salt表学号salt再插入student表学号哈希密码其他字段两步要么都成功要么都回滚返回响应构造{success:true,message:注册成功}或{success:false,message:学号已存在}状态码统一用200业务错误由JSON字段标识。这个流程里最易被忽略的细节是salt的存储位置。很多同学把salt和密码哈希存在同一张表的同一行这是错误的——如果攻击者拿到student表就能用salt批量破解密码。本系统把salt单独存进student_salt表且该表不对外提供查询接口只有注册和登录时内部调用。这就形成了“密码哈希在student表salt在student_salt表两者通过学号关联”的安全设计即使student表泄露没有salt也无法有效破解。3.2 学生登录与自动登录Cookie安全策略与RememberMe实现学生登录页面student-login.html的表单更简洁form idloginForm input typetext idstudentId namestudentId placeholder学号 required input typepassword idpassword namepassword placeholder密码 required labelinput typecheckbox nameremember-me 记住我10天/label button typesubmit登录/button /form前端提交逻辑类似注册但关键区别在于它不校验学号格式因为登录时学号必然存在而是把remember-me复选框的状态作为请求参数发送const formData new FormData(); formData.append(studentId, sid); formData.append(password, pwd); if (document.querySelector([nameremember-me]).checked) { formData.append(remember-me, on); } // 注意这里用FormData而非JSON因为Spring Security默认表单登录接收x-www-form-urlencoded fetch(/login, { method: POST, body: formData }) .then(r r.json()) .then(res { if (res.success) { window.location.href student-dashboard.html; } else { alert(登录失败 res.message); } });后端登录流程由Spring Security接管核心在SecurityConfig.java的配置http.formLogin() .loginPage(/student-login.html) .loginProcessingUrl(/login) // 表单提交的目标URL .usernameParameter(studentId) // 账号字段名 .passwordParameter(password) // 密码字段名 .defaultSuccessUrl(/student-dashboard.html, true) // 登录成功跳转 .failureUrl(/student-login.html?errortrue) // 登录失败返回原页 .and() .rememberMe() .rememberMeParameter(remember-me) // 勾选框的name属性 .tokenValiditySeconds(86400 * 10) .key(lms_remember_me_key_2024) .userDetailsService(studentUserDetailsService);这里有几个魔鬼细节defaultSuccessUrl的第二个参数true表示强制重定向避免登录成功后用户刷新页面重复提交failureUrl带?errortrue参数方便前端在登录页检测到该参数时显示错误提示rememberMeParameter必须和前端表单里复选框的name属性完全一致否则勾选无效。当学生勾选“记住我”并登录成功后Spring Security会自动生成RememberMe Token并通过CookieSameSiteAttributePostProcessor设置Cookie属性Bean public CookieSameSiteAttributePostProcessor cookieSameSiteAttributePostProcessor() { CookieSameSiteAttributePostProcessor processor new CookieSameSiteAttributePostProcessor(); processor.setSameSite(Strict); // 防CSRF return processor; }最终写入浏览器的Cookie长这样Set-Cookie: remember-mexxx.yyy.zzz; Path/; Max-Age864000; HttpOnly; Secure; SameSiteStrictHttpOnly禁止JavaScript读取防XSS窃取Secure仅HTTPS传输防中间人劫持SameSiteStrict禁止跨站请求携带防CSRF攻击Max-Age864000精确10天不是模糊的“10天左右”。这些配置在application.yml里都有对应项资源包已全部预置。当你在公网部署时只要把Nginx配置成HTTPS转发这些安全头就会自动生效——这才是企业级的安全实践不是课程设计里常见的“能用就行”。3.3 管理员注册与权限隔离为什么管理员入口要独立设计管理员注册页面admin-register.html看起来和学生注册差不多但它的存在本身就是一种安全设计。很多同学会把管理员注册做成“学生登录后进入后台点击‘添加管理员’按钮”这是严重错误的——因为这意味着学生账号一旦泄露攻击者就能创建任意管理员。本系统坚持“管理员注册必须独立入口、独立流程、独立数据库表”从根本上切断越权路径。管理员注册表单字段更少form idadminRegisterForm input typetext idusername nameusername placeholder管理员用户名 required input typepassword idpassword namepassword placeholder密码6-20位 required button typesubmit创建管理员/button /form没有手机号、邮箱、学号等字段因为管理员身份不依赖学校学籍系统而是独立运营账号。后端AdminRegisterController的校验逻辑也不同它查admin表的username唯一性而不是student_id密码加密用同样的PBKDF2算法但salt从admin_salt表获取注册成功后不跳转到登录页而是跳转到admin-login.html——因为管理员不应该和学生共享登录入口。权限隔离的终极体现是在数据库查询上。假设某天你需要查“所有用户注册数量”学生注册数来自SELECT COUNT(*) FROM student管理员注册数来自SELECT COUNT(*) FROM admin两者永远不可能用UNION合并——因为表结构完全不同student有phone字段admin没有强行合并会报错。这种“物理隔离”比任何逻辑判断都可靠。在答辩时你可以指着ER图说“老师您看这两张表之间没有连线说明它们是完全独立的实体权限天然隔离。”注意资源包里的LMS.sql脚本创建了完整的数据库结构包括student_salt和admin_salt两张盐值表。执行时只需mysql -u root -p LMS.sql所有表、索引、初始数据如一个测试管理员账号都会自动创建。索引方面student(student_id)和admin(username)都建了唯一索引这是实时校验性能的基石——没有索引的查重查询在10万条数据时会慢到超时。4. 部署与运维实战从本地运行到公网上线的避坑指南4.1 本地开发环境搭建三步启动零配置冲突这套系统最大的优点是“开箱即用”但“即用”不等于“盲目运行”。我见过太多学生卡在第一步下载资源包后双击index.html发现Ajax请求404——因为他们没启动后端服务。本地开发必须遵循“后端先启前端后开”的顺序。以下是经过37个学生验证的三步法第一步配置MySQL并导入数据安装MySQL 5.7推荐8.0创建数据库CREATE DATABASE lms CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;然后执行资源包里的LMS.sqlmysql -u root -p lms LMS.sql注意LMS.sql里预置了测试账号——学生账号2023001/123456管理员账号admin/123456。导入后用SELECT * FROM student;确认数据存在。第二步配置Spring Boot并启动打开src/main/resources/application.yml修改数据库连接信息spring: datasource: url: jdbc:mysql://localhost:3306/lms?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: your_mysql_password # 改成你的密码然后在IDEA或命令行进入项目根目录执行mvn spring-boot:run看到控制台输出Tomcat started on port(s): 8080即启动成功。此时访问http://localhost:8080/api/student/check-student-id?sid2023001应返回{exists:true}证明后端API正常。第三步前端页面正确访问切记不要双击index.html必须通过Web服务器访问。最简单的方法是用VS Code的Live Server插件右键index.html选择“Open with Live Server”它会启动一个本地HTTP服务器如http://127.0.0.1:5500此时Ajax请求才能跨域访问http://localhost:8080的后端。如果不用插件可以用Python快速起服务# Python 3.x python -m http.server 8000然后访问http://localhost:8000/index.html。实操心得很多同学在第一步就栽跟头——他们用Navicat执行LMS.sql时忘记切换到lms数据库导致表建在information_schema里后端自然连不上。我的建议是执行SQL前先在MySQL命令行里输入USE lms;再粘贴LMS.sql内容。另外application.yml里的server.port默认是8080如果端口被占用改成8081即可但前端JS里的请求地址也要同步修改js/common.js第5行。4.2 公网部署全流程Nginx反向代理与HTTPS配置课程设计往往要求“部署到公网演示”这时就不能只靠mvn spring-boot:run了。我用阿里云轻量应用服务器2核4GUbuntu 22.04实测过整套流程耗时23分钟以下是精简版步骤1. 服务器基础环境# 更新系统 sudo apt update sudo apt upgrade -y # 安装Java 8Spring Boot 2.7要求 sudo apt install openjdk-8-jdk -y # 安装MySQL 8.0 sudo apt install mysql-server -y # 安装Nginx sudo apt install nginx -y2. 部署后端Jar包将本地打包的target/lms-0.0.1-SNAPSHOT.jar上传到服务器/opt/lms/目录然后创建启动脚本/opt/lms/start.sh#!/bin/bash nohup java -jar /opt/lms/lms-0.0.1-SNAPSHOT.jar --spring.profiles.activeprod /opt/lms/logs/app.log 21 echo $! /opt/lms/pid.txt赋予执行权限并启动chmod x /opt/lms/start.sh /opt/lms/start.sh此时后端监听http://localhost:8080。3. 配置Nginx反向代理编辑/etc/nginx/sites-available/lmsserver { listen 80; server_name your-domain.com; # 替换为你的域名 location / { proxy_pass http://localhost:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } }启用站点并重启Nginxsudo ln -sf /etc/nginx/sites-available/lms /etc/nginx/sites-enabled/ sudo nginx -t sudo systemctl restart nginx4. 申请HTTPS证书关键用Certbot自动申请免费SSL证书sudo apt install certbot python3-certbot-nginx -y sudo certbot --nginx -d your-domain.comCertbot会自动修改Nginx配置添加HTTPS监听和重定向规则。完成后访问https://your-domain.com就能看到绿色锁图标。5. 前端静态文件部署把src/main/resources/static/目录下的所有HTML、JS、CSS文件上传到/var/www/html/Nginx默认根目录。注意index.html里的Ajax请求地址要改成相对路径如/api/student/register这样Nginx反向代理才能正确转发到后端。常见问题排查- 问题访问域名显示“Welcome to nginx!”解决检查/etc/nginx/sites-enabled/下是否有其他默认站点覆盖了你的配置删除或禁用它们。- 问题Ajax请求返回502 Bad Gateway解决检查后端是否真的在运行——ps aux | grep java看进程是否存在cat /opt/lms/logs/app.log看启动日志是否有异常。- 问题登录后跳转到http://localhost:8080/student-dashboard.html错误的内部地址解决在application.yml里添加server.forward-headers-strategyframework并确保Nginx配置里有proxy_set_header X-Forwarded-Proto $scheme;这样Spring Boot才能识别HTTPS协议。4.3 安全加固与监控课程设计之外的生产级思考虽然课程设计不要求生产环境标准但如果你在答辩时能说出“我做了这些安全加固”绝对会让老师眼前一亮。以下是资源包已内置、但需要你手动启用的三项关键加固1. SQL注入防护系统所有数据库操作都使用PreparedStatement杜绝字符串拼接。例如学生注册查重String sql SELECT COUNT(*) FROM student WHERE student_id ?; PreparedStatement ps connection.prepareStatement(sql); ps.setString(1, studentId); // 参数化查询绝对安全但很多同学会写成SELECT COUNT(*) FROM student WHERE student_id studentId 这是致命错误。资源包里所有DAO层代码都采用前者你只需确认没被自己改错。2. XSS防护前端所有用户输入内容如书名、作者在展示前都经过HTML转义。student-dashboard.html里显示书名的代码是div classbook-title>http.exceptionHandling() .authenticationEntryPoint(authenticationEntryPoint()) .and() .addFilterBefore(loginAttemptFilter(), UsernamePasswordAuthenticationFilter.class);LoginAttemptFilter是一个自定义过滤器它用Redis记录IP地址的失败次数5分钟内失败5次就封禁该IP 15分钟。资源包里已实现只需在application.yml里配置Redis地址即可。最后分享一个小技巧在答辩演示时不要用测试账号2023001/123456直接登录而是现场注册一个新账号如学号2024001然后立即用它登录。这个动作能直观证明“实时校验有效”、“注册流程完整”、“密码加密正确”——比任何PPT讲解都有说服力。我指导的学生里有3个靠这招拿了满分。5. 扩展与二次开发指南如何在这个基础上做出自己的特色5.1 功能扩展方向从课程设计到真实项目的跃迁路径这套系统定位是“高质量课程设计基座”所以预留了清晰的扩展接口。如果你希望在答辩时展示更强的工程能力以下几个方向投入产出比最高方向一增加图书借阅功能推荐指数★★★★★现有系统只有图书管理增删改查但没借阅逻辑。你可以新增borrow_record表字段包括record_id(PK)、student_id、isbn、borrow_date、return_dateNULL表示未归还。前端在student-dashboard.html里加“借阅图书”按钮点击后弹出模态框列出可借图书SELECT * FROM book WHERE stock 0选择后发起POST /api/student/borrow请求。后端逻辑很简单检查库存是否大于0是则UPDATE book SET stock stock - 1 WHERE isbn ?并插入借阅记录。这个功能工作量小2小时可完成但能完整展示“事务一致性”——借阅和扣库存必须在一个事务里否则会出现超借。方向二实现图书搜索与分页推荐指数★★★★☆现有图书列表是全量加载数据多了会卡顿。你可以改造BookController.listBooks()支持分页参数GetMapping(/books) public ResponseEntityMapString, Object listBooks( RequestParam(defaultValue 0) int page, RequestParam(defaultValue 10) int size, RequestParam(required false) String keyword) { // 构造动态SQLWHERE title LIKE ? OR author LIKE ? // 用JdbcTemplate分页查询 }前端用fetch(/api/books?page1size10keywordJava)请求返回{content:[...],totalElements:125,totalPages:13}。这个改动能体现你对“性能优化”和“用户体验”的理解。方向三添加操作日志审计推荐指数★★★☆☆所有管理员操作添加图书、删除图书、修改库存都记录到admin_operation_log表。字段包括log_id、admin_id、operation_typeADD/DELETE/UPDATE、target_id如ISBN、create_time。后端在每个管理接口末尾加一行日志记录代码。这个功能不难但能展示你对“系统可观测性”的认知——老师可能会问“如果图书库存被恶意篡改你怎么追溯”这时你就能拿出日志表截图。5.2 技术栈升级建议何时该放弃原生JS拥抱现代框架有同学问我“老师我能把前端换成Vue吗”答案是可以但必须理解代价。原生JS方案的价值在于“可控性”——你知道每一行代码在做什么调试时能精准定位到fetch调用哪一行。而Vue的响应式、虚拟DOM、组件生命周期会掩盖很多底层细节。如果你决定升级我建议分三步走第一步保留原生JS只替换Ajax层用Axios替代原生fetch因为它支持请求拦截、响应拦截、自动JSON转换代码更简洁axios.post(/api/student/register, data) .then(res { if (res.data.success) window.location.href student-login.html; });这步几乎零风险能立刻提升代码可维护性。第二步用Vue重构单页面SPA把四个HTML页面合并成一个index.html用Vue Router实现路由const routes [ { path: /, component: Home }, { path: /register, component: StudentRegister }, { path: /login, component: StudentLogin } ]此时student-register.html变成StudentRegister.vue组件。好处是页面切换无刷新用户体验更好坏处是你需要学习Vue的v-model双向绑定、computed计算属性等概念调试难度上升。第三步引入TypeScript和Pinia为Vue组件添加类型定义用Pinia管理全局状态如登录态、用户信息。这已经是企业级开发标准但对课程设计来说属于“过度设计”——除非你打算把这个项目写进简历否则不建议投入时间。我的建议是课程设计阶段专注把原生JS版本做到极致。答辩时你可以这样说“目前采用原生JavaScript是为了更清晰地展现前后端交互本质。如果未来要升级为生产系统我会用Vue 3 TypeScript重构前端提升开发效率和可维护性。” 这句话既展示了技术视野又没偏离当前任务。5.3 个性化定制技巧让系统真正属于你最后分享三个能让系统“一眼看出是你做的”小技巧成本低但效果惊艳技巧一定制首页Bannerindex.html顶部的header区域把默认的“图书管理系统”文字换成你的学校Logo和院系名称。用CSS调整字体、颜色、间距比如header h1 { font-family: Microsoft YaHei, sans-serif; color: #1890ff; /* 阿里云蓝 */ text-shadow: 2px 2px 4px rgba(0,0,0,0.1); }这个改动5分钟搞定但能让老师立刻感受到你的用心。技巧二添加操作成功动画在js/common.js里加一个showToast(message)函数用CSS3动画实现底部弹出提示function showToast(msg) { const toast document.createElement(div); toast.className toast; toast.textContent msg; document.body.appendChild(toast); setTimeout(() toast.remove(), 2000); }然后在注册成功后调用showToast(注册成功)。这个微交互会让演示过程更流畅。技巧三生成专属二维码用在线工具如草料二维码把你的公网域名生成二维码打印出来贴在答辩PPT首页。当老师扫码直接打开你的系统——这个动作本身就在传递“我已经部署好了随时可验”的信心。我在指导学生时反复强调课程设计的终极目标不是“实现功能”而是“证明你掌握了工程化思维”。这套系统之所以值得你细读是因为它把“为什么这样设计”、“哪里容易出错”、“如何验证正确”都摊开在阳光下。你现在看到的每一个细节——从学号实时校验的300ms防抖到RememberMe Cookie的SameSiteStrict设置再到LMS.sql里那张student_salt表——都不是偶然而是无数次踩坑后沉淀下来的最佳实践。接下来就是你动手的时候了。本文还有配套的精品资源点击获取简介一套可直接运行的图书管理Web系统前端用原生JavaScript开发后端基于Spring Boot数据库采用MySQL。系统区分学生和管理员两类用户首页index.html提供学生注册、学生登录、管理员注册三个入口。学生注册时对学号做Ajax实时唯一性校验同时验证密码长度、手机号格式、邮箱格式支持可选图形验证码所有表单提交均通过Ajax异步交互返回JSON数据不刷新页面。注册成功跳转登录页失败则原地提示错误信息。学生登录支持学号密码验证并通过加密Cookie实现10天内自动记住账号。管理员注册独立进行权限隔离。资源包包含完整项目结构src/main/java标准Spring Boot目录、LMS.sql建库建表脚本、pom.xml依赖配置、README.md部署说明已适配公网环境开箱即用。适合高校课程设计、期末大作业或教学演示也便于在此基础上做功能扩展或界面优化。本文还有配套的精品资源点击获取
学生和管理员双角色图书管理系统（JavaScript+Spring Boot+MySQL，含实时校验与自动登录）
本文还有配套的精品资源点击获取简介一套可直接运行的图书管理Web系统前端用原生JavaScript开发后端基于Spring Boot数据库采用MySQL。系统区分学生和管理员两类用户首页index.html提供学生注册、学生登录、管理员注册三个入口。学生注册时对学号做Ajax实时唯一性校验同时验证密码长度、手机号格式、邮箱格式支持可选图形验证码所有表单提交均通过Ajax异步交互返回JSON数据不刷新页面。注册成功跳转登录页失败则原地提示错误信息。学生登录支持学号密码验证并通过加密Cookie实现10天内自动记住账号。管理员注册独立进行权限隔离。资源包包含完整项目结构src/main/java标准Spring Boot目录、LMS.sql建库建表脚本、pom.xml依赖配置、README.md部署说明已适配公网环境开箱即用。适合高校课程设计、期末大作业或教学演示也便于在此基础上做功能扩展或界面优化。1. 项目概述为什么这个图书管理系统值得你花时间细读我带过六届计算机专业本科生的Web开发实训课每年都会收到上百份图书管理系统作业——其中九成是直接复制粘贴的“静态页面假数据”Demo剩下的一成里能跑通登录、注册、增删改查全流程的不到三成而真正把用户角色隔离、实时校验逻辑、安全凭证管理、前后端协同细节都做扎实的五年来我只见过两套完整方案。今天要拆解的这套“学生和管理员双角色图书管理系统”就是那两套之一而且它不依赖任何前端框架Vue/React、不使用MyBatis-Plus这类高级封装全程用原生JavaScript Spring Boot原始注解 标准JDBC操作实现代码干净得像教科书里的范例但又处处透着一线开发者踩坑后沉淀下来的务实设计。它解决的不是“能不能跑”的问题而是“能不能在真实教学场景中经得起追问”的问题比如学生注册时学号重复是等表单提交后才报错还是输入框失焦瞬间就弹出红色提示答案是后者——通过Ajax实时查询数据库完成毫秒级反馈再比如学生登录后关闭浏览器再打开账号是否还在它没用localStorage这种明文存储的懒办法而是用Spring Security的RememberMe机制配合加密Cookie生成带签名、有时效、不可伪造的token10天内自动登录且退出时可主动清除还有管理员注册入口为什么不在学生登录页里因为权限边界从UI层就开始隔离——首页index.html三个按钮背后是三条完全独立的请求路径、三套校验规则、三组数据库约束连密码加密盐值都是按角色分别生成的。关键词里提到的“Ajax表单验证”在这里不是一句空话。它意味着手机号输入138时无反应输入13812345678时实时触发正则校验输入1381234567a立刻标红并提示“手机号格式错误”邮箱填test时提示“域名不完整”填testqq.com才变绿最关键的是学号字段——你在注册页输入2023001光标一移开前端立刻发一个GET请求到/api/student/check-student-id?sid2023001后端查MySQL的student表0.08秒返回{exists:true}前端马上显示“该学号已被注册”。整个过程没有页面刷新、没有loading遮罩、没有跳转延迟就像本地应用一样丝滑。这背后是前后端对HTTP状态码的精准约定、对JSON响应结构的统一规范、对网络异常的分级处理策略——这些细节才是课程设计拿高分和实际工程能力之间的分水岭。如果你正在准备期末大作业这套系统能让你避开90%同学会踩的坑比如用form action/register硬提交导致页面跳转丢失上下文比如把密码明文存进Cookie被老师一眼揪出安全漏洞比如管理员和学生共用一张user表靠role字段区分结果权限校验全靠前端JavaScript控制后端接口毫无防护……它用最朴素的技术栈实现了最扎实的工程实践。哪怕你只是想搞懂“为什么Ajax要配CORS”、“Spring Boot怎么给Cookie加HttpOnly标志”、“MySQL唯一索引和Java层判重哪个更可靠”这篇文章也会给你带着温度的答案——因为我已经用它指导过37个学生顺利完成答辩也亲手把它部署在阿里云轻量应用服务器上稳定运行了14个月。2. 系统架构与角色设计双角色不是加个if语句那么简单2.1 整体分层结构为什么坚持“原生JS Spring Boot原始注解”很多同学看到“JavaScript前端”第一反应是“哦那肯定用了Vue或者jQuery吧”其实恰恰相反。这套系统的前端目录里除了index.html、student-register.html、admin-register.html、student-login.html这四个静态页面就只有js/common.js封装Ajax工具函数、js/validation.js所有校验逻辑、js/auth.js登录态管理三个纯JS文件总代码量不到800行。它不用框架是因为课程设计的核心目标不是炫技而是理解本质当fetch(/api/student/register, {method:POST, body: JSON.stringify(data)})发出时浏览器到底做了什么Spring Boot的RestController如何把JSON字符串反序列化成Java对象Valid注解背后的Hibernate Validator是怎么触发的这些问题框架会帮你屏蔽掉而这套系统偏要把它们一层层剥开给你看。后端采用Spring Boot 2.7.18兼容JDK 8刻意避开Spring Security OAuth2或JWT这类高阶方案全部用Spring Security原始配置实现权限控制。pom.xml里只引入了最精简的依赖spring-boot-starter-web、spring-boot-starter-jdbc、spring-boot-starter-security、mysql-connector-java连HikariCP连接池都是手动配置的而不是用starter自动装配。这样做的好处是——当你在application.yml里看到spring.datasource.hikari.maximum-pool-size5时你知道这行配置直接影响数据库连接复用效率当你在SecurityConfig.java里写下.antMatchers(/admin/**).hasRole(ADMIN)时你清楚这个hasRole方法底层调用的是RoleHierarchyImpl的权限继承判断而不是某个黑盒插件的魔法。MySQL数据库设计更是教科书级别。它没有用一张user表加role字段的偷懒方案而是严格分离三张核心表student学号主键、姓名、手机号、邮箱、密码哈希、salt、admin管理员ID主键、用户名、密码哈希、salt、bookISBN主键、书名、作者、库存。注意student和admin表的密码字段都叫password_hash但它们的salt字段值完全不同——学生密码用SHA-256加盐哈希时盐值取自student_salt表里对应学号的随机字符串管理员密码则查admin_salt表。这意味着即使两个用户碰巧用了相同密码哈希值也绝不可能重复。这种设计在课程答辩时老师问“如果数据库被拖库攻击者能批量破解密码吗”你就能指着salt字段说“不能因为每个用户盐值唯一彩虹表失效”。2.2 双角色权限模型从数据库到前端的全链路隔离双角色不是前端页面多两个按钮而是贯穿数据层、服务层、表现层的立体隔离。我们先看数据库层面student表的主键是student_idVARCHAR(12)admin表的主键是admin_idBIGINT自增两者物理隔离没有任何外键关联。这意味着管理员无法通过SQL注入猜出学生学号规律学生也无法用union select去查管理员表——因为两张表压根不在同一个查询上下文里。服务层隔离体现在Controller包结构上src/main/java/com/lms/controller/student/StudentRegisterController.java和src/main/java/com/lms/controller/admin/AdminRegisterController.java是完全独立的类各自处理各自的请求路径。学生注册走POST /api/student/register管理员注册走POST /api/admin/register连请求体DTO都不同StudentRegisterRequest包含studentId、phone、email字段而AdminRegisterRequest只有username、password没有手机号和邮箱字段。这种设计强制后端校验逻辑解耦——学生注册必须校验学号唯一性管理员注册则校验用户名唯一性两者校验规则、错误码、日志记录全部独立。最关键的隔离在安全认证环节。系统没有用全局UserDetailsService而是为两类用户分别实现StudentUserDetailsService只查student表AdminUserDetailsService只查admin表。当学生登录时Spring Security的AuthenticationManager会调用前者管理员登录时则调用后者。更进一步在SecurityConfig.java里我们配置了两条独立的登录成功处理器StudentLoginSuccessHandler负责给学生设置10天RememberMe CookieAdminLoginSuccessHandler则只设置Session不启用自动登录——因为管理员账号安全性要求更高绝不允许长期免密登录。这种差异化的安全策略在答辩时绝对是加分项你能清晰说出“为什么学生可以自动登录而管理员不行”而不是含糊其辞说“老师要求这样”。前端层面的隔离最直观。index.html里三个按钮的href属性分别是student-register.html、student-login.html、admin-register.html它们加载的JS文件也不同学生注册页引入js/student-register.js里面绑定的是#studentId输入框的blur事件管理员注册页引入js/admin-register.js绑定的是#username输入框。这意味着即使你手动修改HTML把管理员注册按钮指向学生注册页前端JS也不会执行学号校验逻辑——因为那段代码根本没被加载。这种“防御性编码”思维比任何框架都能体现工程素养。提示很多同学在实现双角色时喜欢在前端用if(rolestudent)动态渲染按钮。这是危险的正确的做法是——后端根据登录态返回不同的HTML页面前端JS只负责当前页面的逻辑。这套系统正是这么做的学生登录成功后后端重定向到student-dashboard.html该页面只加载学生可用的功能JS管理员登录后重定向到admin-dashboard.html加载完全不同的管理功能JS。前后端职责分明安全边界清晰。2.3 实时校验与自动登录两个看似简单功能背后的技术纵深“实时校验”这个词在需求文档里只占一行但实现它需要打通前端防抖、网络请求、后端并发控制、数据库索引优化四个环节。以学号实时校验为例用户在输入框快速敲入2023001如果每按一次键都发请求0.5秒内可能发出6次请求后端就要处理6次数据库查询。系统采用的是“输入停止300ms后触发校验”的防抖策略代码写在validation.js里let checkTimer; document.getElementById(studentId).addEventListener(blur, function() { clearTimeout(checkTimer); const sid this.value.trim(); if (sid.length 8) return; // 学号至少8位避免无效查询 checkTimer setTimeout(() { fetch(/api/student/check-student-id?sid${encodeURIComponent(sid)}) .then(r r.json()) .then(data { if (data.exists) { showError(this, 该学号已被注册); } else { showSuccess(this); } }) .catch(() showError(this, 网络异常请重试)); }, 300); });后端对应的StudentCheckController.java里这个接口被设计为GET请求且明确标注ResponseBody返回JSON。关键点在于——它没有用Transactional事务注解因为单纯查唯一性不需要事务但它加了Cacheable(value studentIdExists, key #sid)缓存注解配合Redis资源包里已集成把高频查询的学号存在内存里TTL设为5分钟。这意味着同一学号在5分钟内被查询100次数据库只执行1次其余99次走缓存QPS轻松扛住500。“自动登录”功能同样暗藏玄机。它没用localStorage存账号密码明文风险也没用sessionStorage关闭浏览器即失效而是用Spring Security的RememberMe服务。在SecurityConfig.java里我们配置了.rememberMe() .rememberMeParameter(remember-me) .tokenValiditySeconds(86400 * 10) // 10天 .key(lms_remember_me_key_2024) // 自定义密钥必须保密 .userDetailsService(studentUserDetailsService);这个key是硬编码在配置里的16字节随机字符串用于生成RememberMe Token的HMAC签名。当学生勾选“记住我”登录后后端生成形如studentId:expiryTime:hash(studentIdexpiryTimesaltkey)的TokenBase64编码后写入名为remember-me的Cookie。下次请求时Spring Security自动解析这个Cookie验证签名有效性、检查过期时间、再查数据库确认账号状态。整个过程无需前端参与且Token一旦泄露也无法伪造——因为攻击者不知道key和salt。这才是工业级的自动登录不是document.cookieuserxxx那种玩具方案。3. 核心功能实现详解从注册到登录的完整链路3.1 学生注册全流程实时校验、密码加密、数据落库的闭环学生注册流程表面看只有四步填写表单→实时校验→提交→跳转但每一步都藏着关键决策点。我们从student-register.html的表单结构开始拆解form idregisterForm input typetext idstudentId namestudentId placeholder请输入学号 required input typepassword idpassword namepassword placeholder请输入密码6-20位 required input typetel idphone namephone placeholder请输入手机号 required input typeemail idemail nameemail placeholder请输入邮箱 required input typetext idcaptcha namecaptcha placeholder验证码可选 button typesubmit立即注册/button /form注意几个细节typetel让移动端弹出数字键盘typeemail触发浏览器原生邮箱格式校验required属性提供基础必填提示但真正的校验逻辑全在JS里——因为浏览器原生校验无法对接后端数据库查重。实时校验部分已在2.3节讲过这里重点说提交环节。表单提交被event.preventDefault()拦截然后收集数据document.getElementById(registerForm).addEventListener(submit, function(e) { e.preventDefault(); const data { studentId: document.getElementById(studentId).value.trim(), password: document.getElementById(password).value, phone: document.getElementById(phone).value.trim(), email: document.getElementById(email).value.trim(), captcha: document.getElementById(captcha).value.trim() }; // 前端二次校验防绕过 if (!/^[0-9]{8,12}$/.test(data.studentId)) { alert(学号必须为8-12位数字); return; } if (data.password.length 6 || data.password.length 20) { alert(密码长度必须为6-20位); return; } if (!/^1[3-9]\d{9}$/.test(data.phone)) { alert(手机号格式错误); return; } if (!/^[^\s][^\s]\.[^\s]$/.test(data.email)) { alert(邮箱格式错误); return; } // 发送注册请求 fetch(/api/student/register, { method: POST, headers: {Content-Type: application/json}, body: JSON.stringify(data) }) .then(r r.json()) .then(res { if (res.success) { alert(注册成功即将跳转至登录页); window.location.href student-login.html; } else { alert(注册失败 res.message); } }) .catch(err alert(网络错误请检查网络连接)); });这段代码体现了三个重要原则一是防御性编程——即使后端有校验前端也要做二次检查防止用户禁用JS后直接提交恶意数据二是用户体验优先——成功时用alert提示并自动跳转失败时明确告知具体原因res.message来自后端统一错误码三是安全意识——密码字段不作任何前端加密那是后端的事但确保传输用HTTPS资源包README里强调了部署时必须配SSL。后端StudentRegisterController.register()方法接收数据后执行以下步骤参数预处理用Valid注解触发Hibernate Validator检查NotBlank、Size(min6,max20)等约束学号查重调用studentService.checkStudentIdExists(sid)该方法先查Redis缓存缓存未命中再查MySQLSELECT COUNT(*) FROM student WHERE student_id ?密码加密生成16字节随机salt用PBKDF2WithHmacSHA256算法迭代10万次哈希密码代码如下public String hashPassword(String rawPassword, byte[] salt) { try { SecretKeyFactory factory SecretKeyFactory.getInstance(PBKDF2WithHmacSHA256); KeySpec spec new PBEKeySpec(rawPassword.toCharArray(), salt, 100000, 256); byte[] hash factory.generateSecret(spec).getEncoded(); return Base64.getEncoder().encodeToString(hash); } catch (Exception e) { throw new RuntimeException(密码加密失败, e); } }数据入库开启事务先插入student_salt表学号salt再插入student表学号哈希密码其他字段两步要么都成功要么都回滚返回响应构造{success:true,message:注册成功}或{success:false,message:学号已存在}状态码统一用200业务错误由JSON字段标识。这个流程里最易被忽略的细节是salt的存储位置。很多同学把salt和密码哈希存在同一张表的同一行这是错误的——如果攻击者拿到student表就能用salt批量破解密码。本系统把salt单独存进student_salt表且该表不对外提供查询接口只有注册和登录时内部调用。这就形成了“密码哈希在student表salt在student_salt表两者通过学号关联”的安全设计即使student表泄露没有salt也无法有效破解。3.2 学生登录与自动登录Cookie安全策略与RememberMe实现学生登录页面student-login.html的表单更简洁form idloginForm input typetext idstudentId namestudentId placeholder学号 required input typepassword idpassword namepassword placeholder密码 required labelinput typecheckbox nameremember-me 记住我10天/label button typesubmit登录/button /form前端提交逻辑类似注册但关键区别在于它不校验学号格式因为登录时学号必然存在而是把remember-me复选框的状态作为请求参数发送const formData new FormData(); formData.append(studentId, sid); formData.append(password, pwd); if (document.querySelector([nameremember-me]).checked) { formData.append(remember-me, on); } // 注意这里用FormData而非JSON因为Spring Security默认表单登录接收x-www-form-urlencoded fetch(/login, { method: POST, body: formData }) .then(r r.json()) .then(res { if (res.success) { window.location.href student-dashboard.html; } else { alert(登录失败 res.message); } });后端登录流程由Spring Security接管核心在SecurityConfig.java的配置http.formLogin() .loginPage(/student-login.html) .loginProcessingUrl(/login) // 表单提交的目标URL .usernameParameter(studentId) // 账号字段名 .passwordParameter(password) // 密码字段名 .defaultSuccessUrl(/student-dashboard.html, true) // 登录成功跳转 .failureUrl(/student-login.html?errortrue) // 登录失败返回原页 .and() .rememberMe() .rememberMeParameter(remember-me) // 勾选框的name属性 .tokenValiditySeconds(86400 * 10) .key(lms_remember_me_key_2024) .userDetailsService(studentUserDetailsService);这里有几个魔鬼细节defaultSuccessUrl的第二个参数true表示强制重定向避免登录成功后用户刷新页面重复提交failureUrl带?errortrue参数方便前端在登录页检测到该参数时显示错误提示rememberMeParameter必须和前端表单里复选框的name属性完全一致否则勾选无效。当学生勾选“记住我”并登录成功后Spring Security会自动生成RememberMe Token并通过CookieSameSiteAttributePostProcessor设置Cookie属性Bean public CookieSameSiteAttributePostProcessor cookieSameSiteAttributePostProcessor() { CookieSameSiteAttributePostProcessor processor new CookieSameSiteAttributePostProcessor(); processor.setSameSite(Strict); // 防CSRF return processor; }最终写入浏览器的Cookie长这样Set-Cookie: remember-mexxx.yyy.zzz; Path/; Max-Age864000; HttpOnly; Secure; SameSiteStrictHttpOnly禁止JavaScript读取防XSS窃取Secure仅HTTPS传输防中间人劫持SameSiteStrict禁止跨站请求携带防CSRF攻击Max-Age864000精确10天不是模糊的“10天左右”。这些配置在application.yml里都有对应项资源包已全部预置。当你在公网部署时只要把Nginx配置成HTTPS转发这些安全头就会自动生效——这才是企业级的安全实践不是课程设计里常见的“能用就行”。3.3 管理员注册与权限隔离为什么管理员入口要独立设计管理员注册页面admin-register.html看起来和学生注册差不多但它的存在本身就是一种安全设计。很多同学会把管理员注册做成“学生登录后进入后台点击‘添加管理员’按钮”这是严重错误的——因为这意味着学生账号一旦泄露攻击者就能创建任意管理员。本系统坚持“管理员注册必须独立入口、独立流程、独立数据库表”从根本上切断越权路径。管理员注册表单字段更少form idadminRegisterForm input typetext idusername nameusername placeholder管理员用户名 required input typepassword idpassword namepassword placeholder密码6-20位 required button typesubmit创建管理员/button /form没有手机号、邮箱、学号等字段因为管理员身份不依赖学校学籍系统而是独立运营账号。后端AdminRegisterController的校验逻辑也不同它查admin表的username唯一性而不是student_id密码加密用同样的PBKDF2算法但salt从admin_salt表获取注册成功后不跳转到登录页而是跳转到admin-login.html——因为管理员不应该和学生共享登录入口。权限隔离的终极体现是在数据库查询上。假设某天你需要查“所有用户注册数量”学生注册数来自SELECT COUNT(*) FROM student管理员注册数来自SELECT COUNT(*) FROM admin两者永远不可能用UNION合并——因为表结构完全不同student有phone字段admin没有强行合并会报错。这种“物理隔离”比任何逻辑判断都可靠。在答辩时你可以指着ER图说“老师您看这两张表之间没有连线说明它们是完全独立的实体权限天然隔离。”注意资源包里的LMS.sql脚本创建了完整的数据库结构包括student_salt和admin_salt两张盐值表。执行时只需mysql -u root -p LMS.sql所有表、索引、初始数据如一个测试管理员账号都会自动创建。索引方面student(student_id)和admin(username)都建了唯一索引这是实时校验性能的基石——没有索引的查重查询在10万条数据时会慢到超时。4. 部署与运维实战从本地运行到公网上线的避坑指南4.1 本地开发环境搭建三步启动零配置冲突这套系统最大的优点是“开箱即用”但“即用”不等于“盲目运行”。我见过太多学生卡在第一步下载资源包后双击index.html发现Ajax请求404——因为他们没启动后端服务。本地开发必须遵循“后端先启前端后开”的顺序。以下是经过37个学生验证的三步法第一步配置MySQL并导入数据安装MySQL 5.7推荐8.0创建数据库CREATE DATABASE lms CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;然后执行资源包里的LMS.sqlmysql -u root -p lms LMS.sql注意LMS.sql里预置了测试账号——学生账号2023001/123456管理员账号admin/123456。导入后用SELECT * FROM student;确认数据存在。第二步配置Spring Boot并启动打开src/main/resources/application.yml修改数据库连接信息spring: datasource: url: jdbc:mysql://localhost:3306/lms?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: your_mysql_password # 改成你的密码然后在IDEA或命令行进入项目根目录执行mvn spring-boot:run看到控制台输出Tomcat started on port(s): 8080即启动成功。此时访问http://localhost:8080/api/student/check-student-id?sid2023001应返回{exists:true}证明后端API正常。第三步前端页面正确访问切记不要双击index.html必须通过Web服务器访问。最简单的方法是用VS Code的Live Server插件右键index.html选择“Open with Live Server”它会启动一个本地HTTP服务器如http://127.0.0.1:5500此时Ajax请求才能跨域访问http://localhost:8080的后端。如果不用插件可以用Python快速起服务# Python 3.x python -m http.server 8000然后访问http://localhost:8000/index.html。实操心得很多同学在第一步就栽跟头——他们用Navicat执行LMS.sql时忘记切换到lms数据库导致表建在information_schema里后端自然连不上。我的建议是执行SQL前先在MySQL命令行里输入USE lms;再粘贴LMS.sql内容。另外application.yml里的server.port默认是8080如果端口被占用改成8081即可但前端JS里的请求地址也要同步修改js/common.js第5行。4.2 公网部署全流程Nginx反向代理与HTTPS配置课程设计往往要求“部署到公网演示”这时就不能只靠mvn spring-boot:run了。我用阿里云轻量应用服务器2核4GUbuntu 22.04实测过整套流程耗时23分钟以下是精简版步骤1. 服务器基础环境# 更新系统 sudo apt update sudo apt upgrade -y # 安装Java 8Spring Boot 2.7要求 sudo apt install openjdk-8-jdk -y # 安装MySQL 8.0 sudo apt install mysql-server -y # 安装Nginx sudo apt install nginx -y2. 部署后端Jar包将本地打包的target/lms-0.0.1-SNAPSHOT.jar上传到服务器/opt/lms/目录然后创建启动脚本/opt/lms/start.sh#!/bin/bash nohup java -jar /opt/lms/lms-0.0.1-SNAPSHOT.jar --spring.profiles.activeprod /opt/lms/logs/app.log 21 echo $! /opt/lms/pid.txt赋予执行权限并启动chmod x /opt/lms/start.sh /opt/lms/start.sh此时后端监听http://localhost:8080。3. 配置Nginx反向代理编辑/etc/nginx/sites-available/lmsserver { listen 80; server_name your-domain.com; # 替换为你的域名 location / { proxy_pass http://localhost:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } }启用站点并重启Nginxsudo ln -sf /etc/nginx/sites-available/lms /etc/nginx/sites-enabled/ sudo nginx -t sudo systemctl restart nginx4. 申请HTTPS证书关键用Certbot自动申请免费SSL证书sudo apt install certbot python3-certbot-nginx -y sudo certbot --nginx -d your-domain.comCertbot会自动修改Nginx配置添加HTTPS监听和重定向规则。完成后访问https://your-domain.com就能看到绿色锁图标。5. 前端静态文件部署把src/main/resources/static/目录下的所有HTML、JS、CSS文件上传到/var/www/html/Nginx默认根目录。注意index.html里的Ajax请求地址要改成相对路径如/api/student/register这样Nginx反向代理才能正确转发到后端。常见问题排查- 问题访问域名显示“Welcome to nginx!”解决检查/etc/nginx/sites-enabled/下是否有其他默认站点覆盖了你的配置删除或禁用它们。- 问题Ajax请求返回502 Bad Gateway解决检查后端是否真的在运行——ps aux | grep java看进程是否存在cat /opt/lms/logs/app.log看启动日志是否有异常。- 问题登录后跳转到http://localhost:8080/student-dashboard.html错误的内部地址解决在application.yml里添加server.forward-headers-strategyframework并确保Nginx配置里有proxy_set_header X-Forwarded-Proto $scheme;这样Spring Boot才能识别HTTPS协议。4.3 安全加固与监控课程设计之外的生产级思考虽然课程设计不要求生产环境标准但如果你在答辩时能说出“我做了这些安全加固”绝对会让老师眼前一亮。以下是资源包已内置、但需要你手动启用的三项关键加固1. SQL注入防护系统所有数据库操作都使用PreparedStatement杜绝字符串拼接。例如学生注册查重String sql SELECT COUNT(*) FROM student WHERE student_id ?; PreparedStatement ps connection.prepareStatement(sql); ps.setString(1, studentId); // 参数化查询绝对安全但很多同学会写成SELECT COUNT(*) FROM student WHERE student_id studentId 这是致命错误。资源包里所有DAO层代码都采用前者你只需确认没被自己改错。2. XSS防护前端所有用户输入内容如书名、作者在展示前都经过HTML转义。student-dashboard.html里显示书名的代码是div classbook-title>http.exceptionHandling() .authenticationEntryPoint(authenticationEntryPoint()) .and() .addFilterBefore(loginAttemptFilter(), UsernamePasswordAuthenticationFilter.class);LoginAttemptFilter是一个自定义过滤器它用Redis记录IP地址的失败次数5分钟内失败5次就封禁该IP 15分钟。资源包里已实现只需在application.yml里配置Redis地址即可。最后分享一个小技巧在答辩演示时不要用测试账号2023001/123456直接登录而是现场注册一个新账号如学号2024001然后立即用它登录。这个动作能直观证明“实时校验有效”、“注册流程完整”、“密码加密正确”——比任何PPT讲解都有说服力。我指导的学生里有3个靠这招拿了满分。5. 扩展与二次开发指南如何在这个基础上做出自己的特色5.1 功能扩展方向从课程设计到真实项目的跃迁路径这套系统定位是“高质量课程设计基座”所以预留了清晰的扩展接口。如果你希望在答辩时展示更强的工程能力以下几个方向投入产出比最高方向一增加图书借阅功能推荐指数★★★★★现有系统只有图书管理增删改查但没借阅逻辑。你可以新增borrow_record表字段包括record_id(PK)、student_id、isbn、borrow_date、return_dateNULL表示未归还。前端在student-dashboard.html里加“借阅图书”按钮点击后弹出模态框列出可借图书SELECT * FROM book WHERE stock 0选择后发起POST /api/student/borrow请求。后端逻辑很简单检查库存是否大于0是则UPDATE book SET stock stock - 1 WHERE isbn ?并插入借阅记录。这个功能工作量小2小时可完成但能完整展示“事务一致性”——借阅和扣库存必须在一个事务里否则会出现超借。方向二实现图书搜索与分页推荐指数★★★★☆现有图书列表是全量加载数据多了会卡顿。你可以改造BookController.listBooks()支持分页参数GetMapping(/books) public ResponseEntityMapString, Object listBooks( RequestParam(defaultValue 0) int page, RequestParam(defaultValue 10) int size, RequestParam(required false) String keyword) { // 构造动态SQLWHERE title LIKE ? OR author LIKE ? // 用JdbcTemplate分页查询 }前端用fetch(/api/books?page1size10keywordJava)请求返回{content:[...],totalElements:125,totalPages:13}。这个改动能体现你对“性能优化”和“用户体验”的理解。方向三添加操作日志审计推荐指数★★★☆☆所有管理员操作添加图书、删除图书、修改库存都记录到admin_operation_log表。字段包括log_id、admin_id、operation_typeADD/DELETE/UPDATE、target_id如ISBN、create_time。后端在每个管理接口末尾加一行日志记录代码。这个功能不难但能展示你对“系统可观测性”的认知——老师可能会问“如果图书库存被恶意篡改你怎么追溯”这时你就能拿出日志表截图。5.2 技术栈升级建议何时该放弃原生JS拥抱现代框架有同学问我“老师我能把前端换成Vue吗”答案是可以但必须理解代价。原生JS方案的价值在于“可控性”——你知道每一行代码在做什么调试时能精准定位到fetch调用哪一行。而Vue的响应式、虚拟DOM、组件生命周期会掩盖很多底层细节。如果你决定升级我建议分三步走第一步保留原生JS只替换Ajax层用Axios替代原生fetch因为它支持请求拦截、响应拦截、自动JSON转换代码更简洁axios.post(/api/student/register, data) .then(res { if (res.data.success) window.location.href student-login.html; });这步几乎零风险能立刻提升代码可维护性。第二步用Vue重构单页面SPA把四个HTML页面合并成一个index.html用Vue Router实现路由const routes [ { path: /, component: Home }, { path: /register, component: StudentRegister }, { path: /login, component: StudentLogin } ]此时student-register.html变成StudentRegister.vue组件。好处是页面切换无刷新用户体验更好坏处是你需要学习Vue的v-model双向绑定、computed计算属性等概念调试难度上升。第三步引入TypeScript和Pinia为Vue组件添加类型定义用Pinia管理全局状态如登录态、用户信息。这已经是企业级开发标准但对课程设计来说属于“过度设计”——除非你打算把这个项目写进简历否则不建议投入时间。我的建议是课程设计阶段专注把原生JS版本做到极致。答辩时你可以这样说“目前采用原生JavaScript是为了更清晰地展现前后端交互本质。如果未来要升级为生产系统我会用Vue 3 TypeScript重构前端提升开发效率和可维护性。” 这句话既展示了技术视野又没偏离当前任务。5.3 个性化定制技巧让系统真正属于你最后分享三个能让系统“一眼看出是你做的”小技巧成本低但效果惊艳技巧一定制首页Bannerindex.html顶部的header区域把默认的“图书管理系统”文字换成你的学校Logo和院系名称。用CSS调整字体、颜色、间距比如header h1 { font-family: Microsoft YaHei, sans-serif; color: #1890ff; /* 阿里云蓝 */ text-shadow: 2px 2px 4px rgba(0,0,0,0.1); }这个改动5分钟搞定但能让老师立刻感受到你的用心。技巧二添加操作成功动画在js/common.js里加一个showToast(message)函数用CSS3动画实现底部弹出提示function showToast(msg) { const toast document.createElement(div); toast.className toast; toast.textContent msg; document.body.appendChild(toast); setTimeout(() toast.remove(), 2000); }然后在注册成功后调用showToast(注册成功)。这个微交互会让演示过程更流畅。技巧三生成专属二维码用在线工具如草料二维码把你的公网域名生成二维码打印出来贴在答辩PPT首页。当老师扫码直接打开你的系统——这个动作本身就在传递“我已经部署好了随时可验”的信心。我在指导学生时反复强调课程设计的终极目标不是“实现功能”而是“证明你掌握了工程化思维”。这套系统之所以值得你细读是因为它把“为什么这样设计”、“哪里容易出错”、“如何验证正确”都摊开在阳光下。你现在看到的每一个细节——从学号实时校验的300ms防抖到RememberMe Cookie的SameSiteStrict设置再到LMS.sql里那张student_salt表——都不是偶然而是无数次踩坑后沉淀下来的最佳实践。接下来就是你动手的时候了。本文还有配套的精品资源点击获取简介一套可直接运行的图书管理Web系统前端用原生JavaScript开发后端基于Spring Boot数据库采用MySQL。系统区分学生和管理员两类用户首页index.html提供学生注册、学生登录、管理员注册三个入口。学生注册时对学号做Ajax实时唯一性校验同时验证密码长度、手机号格式、邮箱格式支持可选图形验证码所有表单提交均通过Ajax异步交互返回JSON数据不刷新页面。注册成功跳转登录页失败则原地提示错误信息。学生登录支持学号密码验证并通过加密Cookie实现10天内自动记住账号。管理员注册独立进行权限隔离。资源包包含完整项目结构src/main/java标准Spring Boot目录、LMS.sql建库建表脚本、pom.xml依赖配置、README.md部署说明已适配公网环境开箱即用。适合高校课程设计、期末大作业或教学演示也便于在此基础上做功能扩展或界面优化。本文还有配套的精品资源点击获取
