目录3.综合性练习3.1 加法计算器3.1.1 准备工作3.1.2 约定前后端交互接口概念介绍需求分析接口定义请求参数响应数据3.1.3 服务器代码3.1.4 调整前端页面代码3.1.5 运行测试3.2 用户登录3.2.1 准备工作3.2.2 约定前后端交互接口需求分析接口定义校验接口请求参数响应数据查询登录用户接口请求参数响应数据3.2.3 实现服务器端代码校验接口查询登录用户接口3.2.4 调整前端页面代码1.调整登录页面 login.html2.调整首页代码3.2.5 运行测试书接上文Java EE 进阶4.Spring Web MVC 入门第三弹~~3.综合性练习结合上述内容我们可以做一些小案例主要掌握知识点1.理解前后端交互过程2.接口传参数据返回以及页面展示3.1 加法计算器需求输入两个整数点击”点击相加“按钮显示计算结果3.1.1 准备工作创建 SpringBoot 项目引入 Spring Web 依赖把前端页面放在项目中码云地址JavaEE 进阶课程资料包3.1.2 约定前后端交互接口概念介绍约定“前后端交互接口”是进行 Web 开发中的关键环节接口又叫 APIApplication Programming Interface我们一般讲到接口或者 API指的都是同一个东西是指应用程序对外提供的服务的描述用于交换信息和执行任务与 JavaSE 阶段学习的[类和接口]中的接口是两回事简单来说就是允许客户端给服务器发送哪些 HTTP 请求并且每种请求预期获取什么样的 HTTP 响应现在“前后端分离”模式开发前端和后端代码通常由不同的团队负责开发双方团队在开发之前会提前约定好交互的方式客户端发起请求服务器提供对应的服务服务器提供的服务种类有很多客户端按照双方约定指定选择哪一个服务接口其实也就是我们前面网络模块讲的“应用层协议”把约定的内容写在文档上就是“接口文档”接口文档也可以理解为是 应用程序的“操作说明书”比如儿童电话玩具按1响应儿歌按2响应钢琴乐曲按3安抚睡眠按4交通工具音效……等等但是这些操作说明如果没有一个文档来说明用户就不太清楚哪个按键对应哪个所以商品一般会带一个说明书这些按键就是接口这个“说明书”就是 应用程序的“接口文档”在项目开发前根据需求先约定好前后端交互接口双方按照接口文档进行开发接口文档通常由服务提供方来写交由服务使用方确认也就是客户端接口文档一旦写好尽量不要轻易改变如若需要改变必须要通知另一方知晓并修改接口文档服务提供方来写来改闲聊以后在公司中工作针对每一个项目①提出需求产品经理→编写需求文档→评审需求文档这个评审分为内部评审和外部评审外部评审前后端开发人员、测试人员、运维人员 等等相关人员一起“指指点点”一开始产品经理的薪资没有开发人员高但是干上个三五年了之后就会比开发人员高不少了~~②开发阶段1方案设计、评审2排期接口文档什么时候提供什么时候开发完成什么时候自测完成什么时候联调什么时候上线3提供接口文档提供接口文档以及相应依赖可能这个接口也要评审非正式各自进行开发需求分析加法计算器功能对两个整数进行相加需要客户端提供参与计算的两个数服务端返回这两个整数计算的结果基于以上分析我们来定义接口接口定义接口定义功能两个数相加路径calc/add、calc/plus、add、plus 等都可以建议 2~4级路径请求路径: calc/sum 请求方式: GET/POST 接口描述: 计算两个整数相加请求参数参数完成这个功能需要哪些参数参数名类型是否必须备注num1Integer是参与计算的第一个数num2Integer是参与计算的第二个数名字要有含义不要使用 abc、aa、bb 等无含义的变量不要使用拼音示例num15num23响应数据返回类型String、Integer、Long……Content-Type: text/html 响应内容计算机计算结果8服务器给浏览器返回计算的结果3.1.3 服务器代码package com.bite.spring.demo; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; /** * Created with IntelliJ IDEA. * Description: * User: CoderYanger * Date: 2026-10-23 * Time: 17:45 */ RequestMapping(/calc) //RestController 表示返回数据 Controller 表示返回视图 RestController public class CalcController { RequestMapping(/sum) public String sum(Integer num1,Integer num2){ if(num1null||num2null){ return 参数不合法请检查后再提交; } Integer sumnum1num2; return h1计算器计算结果sum/h1; } }用 Postman 测试发现自测没问题闲聊对于我们后端用 Postman 或者 浏览器 自测没问题那么 95%以上都是没问题的剩下的不到 5% 可能是 浏览器 和 Postman 的一些展示上的问题这时候通过抓包去看一下两者的 请求 是否 完全一致当然这些细微的差异我们后端都是不关注的使用其中任意一个自测没问题我们就可以认为没问题了~~3.1.4 调整前端页面代码添加访问 url 和请求方式!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body !-- 复习form是个表单域用于提交数据-- form actioncalc/sum methodpost !-- calc/sum 提交的URLpost提交方式-- h1计算器/h1 !-- 参数key对应input的name值-- 数字1input namenum1 typetextbr 数字2input namenum2 typetextbr input typesubmit value 点击相加 !-- 提交按钮会把自己所在的表单域内的内容进行提交-- /form /body /html3.1.5 运行测试启动服务运行并测试注意右上角给出的访问方式不要点不可以通过这些方式访问如果不信就点进去看发现只能查看页面URL 也变了这只能查看前端页面并没有走咱们的后端应该用我们自己服务提供的页面下面我们分别用这两种方式测试一下计算器前后端交互演示3.2 用户登录需求用户输入账号和密码后端进行校验密码是否正确1.如果不正确前端进行用户告知2.如果正确跳转到首页首页显示当前登录用户3.后续再访问首页可以获取到登录用户信息3.2.1 准备工作把前端页面放在项目中课件中提供码云地址JavaEE 进阶课程资料包3.2.2 约定前后端交互接口需求分析对于后端开发人员而言不涉及前端页面的展示只需要提供两个功能1.登录首页通过账号和密码校验输入的账号密码是否正确并告知前端2.首页告知前端当前登录用户如果当前已有用户登录返回登录的账号如果没有返回空接口定义校验接口请求路径/user/login 请求方式POST 接口描述校验账号密码是否正确请求参数参数名类型是否必须备注userNameString是校验的账号passwordString是校验的密码响应数据Content-Type: text/html 响应内容 true //账号密码验证成功 false //账号密码验证失败查询登录用户接口请求路径/user/getLoginUser 请求方式GET 接口描述查询当前登录的用户请求参数无响应数据Content-Type: text/html 响应内容: zhangsan返回当前登录的用户3.2.3 实现服务器端代码校验接口import jakarta.servlet.http.HttpSession; import org.springframework.util.StringUtils; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; RestController RequestMapping(/user) public class LoginController { /** * 校验用户账号和密码是否正确 * param userName * param password * param session * return */ RequestMapping(/login) public boolean login(String userName, String password, HttpSession session) { //账号或密码为空 if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)){ return false; } //校验账号密码是否正确 //理论上应该从数据库中获取账号密码校验是否正确但当前还没讲数据库的操作先把账号密码固定写死 if (!zhangsan.equals(userName) || !123456.equals(password)){ return false; } //密码验证成功把用户名存储在Session中 session.setAttribute(userName,userName); return true; } }StringUtiles.hasLength() 是 Spring 提供的一个工具方法判断字符串是否有值字符串为 null 或者“”时返回 false其他返回 truepublic static boolean hasLength(Nullable String str) { return str ! null !str.isEmpty(); }等我们后续接触多了一看到 Utiles 就知道它是个工具类这里有很多实用的工具工具类的命名通常是你对于哪一块处理的前面就加什么比如说你对于 String 对字符串的一个工具类就是 StringUtils如果你是对于日期的工具类工具类就叫 DateUtils然后你对于 Long 的处理就叫 LongUtils这也算我们一个不成文的命名规矩但大家都知道比如 NumberUtils、TypeUtils查询登录用户接口package com.bite.spring.demo; import org.springframework.util.StringUtils; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; /** * Created with IntelliJ IDEA. * Description: * User: CoderYanger * Date: 2026-10-23 * Time: 20:03 */ RequestMapping(/user) RestController public class UserController { RequestMapping(/login) public Boolean login(String userName,String password){ //参数校验 // if(userName!null||userName||passwordnull||password){ // return false; // } // 上述代码写着太麻烦我们有更简洁的写法 if(!StringUtils.hasLength(userName)||!StringUtils.hasLength(password)){ return false; } //校验用户名和密码是否正确 //还未学习数据库相关的操作暂且把账号和密码写死 admin admin if(admin.equals(userName)admin.equals(password)){ return true; } return false; } }注意点①当然这种写法不是唯一的比如上述代码可以写成但还是建议写成上述代码因为好看~~public Boolean login2(String userName,String password){ //参数校验 if(StringUtils.hasLength(userName)StringUtils.hasLength(password)){ if(admin.equals(userName)admin.equals(password)){ return true; } } return false; }我们开发的过程中要求嵌套不能超过五层层数多了人也会晕~~其实别说五层了四层基本都没法看了所以我们要尽量减少嵌套~~注意点②为啥写成 admin.equals(userName) 而不是 userName.equals(admin)因为 equals 会报空指针异常 NullpointException当前面的值为 null 时就会报空指针异常但是后面那个为 null 就没关系所以我们在去写的时候通常把常量写在前面答疑Q1我们前面不是校验过了吗确实是但是你能保证以后写代码都不忘记写校验吗所以我们还是要养成习惯避免忘写时出 Bug~~Q2校验不是应该前端做吗没错但是后端也得干参数校验前端后端都要干前端校验的时候不考虑后端后端校验的时候不考虑前端各干各的事儿前后端都得做你不校验随便写个代码就扔给前端了前端一看都运行不起来肯定会骂你的丢人~~接下来我们自测一下发现没问题接下来再写获取登录用户信息的代码总的代码package com.bite.spring.demo; import jakarta.servlet.http.HttpSession; import org.springframework.util.StringUtils; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; /** * Created with IntelliJ IDEA. * Description: * User: CoderYanger * Date: 2026-10-23 * Time: 20:03 */ RequestMapping(/user) RestController public class UserController { RequestMapping(/login) public Boolean login(String userName, String password, HttpSession session){ //参数校验 // if(userName!null||userName||passwordnull||password){ // return false; // } // 上述代码写着太麻烦我们有更简洁的写法 if(!StringUtils.hasLength(userName)||!StringUtils.hasLength(password)){ return false; } //校验用户名和密码是否正确 //还未学习数据库相关的操作暂且把账号和密码写死 admin admin if(admin.equals(userName)admin.equals(password)){ //密码正确 session.setAttribute(userName,userName);//放进session里 return true; } return false; } RequestMapping(/getLoginUser) public String getLoginUser(HttpSession session){ String userName(String)session.getAttribute(userName); return userName; } // public Boolean login2(String userName,String password){ // //参数校验 // if(StringUtils.hasLength(userName)StringUtils.hasLength(password)){ // if(admin.equals(userName)admin.equals(password)){ // return true; // } // } // return false; // } }由于一开始我们并没有设置 session所以获取时是空的set 的话我们就通过登录来 set 了接下来就能获取登录用户信息了此时第二个接口我们也测试完成了~~3.2.4 调整前端页面代码1.调整登录页面 login.html上面计算器的代码我们是用 form 表单进行提交的但是它有一个缺点就是页面一定会发生跳转所以接下来我们学习用 Ajax 发起请求~~重点啥是 Ajax 呢ajaxWeb数据交互方式_百度百科原生的 ajax 写起来非常麻烦现在也没有多少人用了所以我们学习用 JQuery 完成 Ajax 操作~~对于前端而言当点击登录按钮时需要把用户输入的信息传递到后端进行校验后端校验成功则跳转到首页index.html后端校验失败则直接弹窗login.html 代码展示!DOCTYPE html html langen head meta charsetUTF-8 title登录页面/title /head body h1用户登录/h1 用户名input nameuserName typetext iduserNamebr 密码input namepassword typepassword idpasswordbr input typebutton value登录 onclicklogin() script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js/script script function login() { // 对象要使用大括号括起来 $.ajax({ type:post,//请求类型 url:/user/login,//请求路径 data:{//请求参数 //ID前面加#.val()拿到值 userName:$(#userName).val(),//取input框里的值 password:$(#password).val() }, //HTTP请求成功了不关心给的响应是啥调用回调函数接收后端参数 success:function(result){//这个result名字随便定义 if(result){//后端返回的result是String那就是String后端返回的是JSON那就是对象就可以用.来使用了 //后端返回true说明密码正确跳转到指定页面 location.hrefindex.html; //location.assign(index.html);//这行代码也可以完成页面跳转了解即可 }else{ //密码错误 alert(密码错误请确认); } } }); } /script /body /html复习id 前加 #class 前加 . 取值和赋值都是 val()参数里面方法没有值表示取值上述代码有着对应关系页面跳转的三种方式1.window.location.hrefbook_list.html;2.window.location.assign(book_list.html);3.window.location.replace(book_list.html);以上写法通常把“window.”省略比如 window.location.hrefbook_list.html;写成 location.hrefbook_list.html;三者区别参考location.assign()、location.href、location.replace(url)的不同2.调整首页代码下面我们再把 index.html 代码写一下然后一起测试!doctype html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0 meta http-equivX-UA-Compatible contentieedge title用户登录首页/title /head body 登录人: span idloginUser/span script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js/script script $.ajax({ url:/user/getLoginUser,//因为是个对象所以没顺序 type:get, //没有传参不写 data success:function(userName){ $(#loginUser).text(userName);//span标签使用text方式来赋值 } }); /script /body /html3.2.5 运行测试自测演示用户登录页面前后端交互演示从上述视频中我们发现当没有登录的时候登录人是不显示的账号和密码全正确了才能登录成功~~注意如果一直转圈圈可能是 JQuery 还在加载这时候可以把 JQuery 设置成本地的否则后续的代码都需要 JQuery是运行不起来的而且其实在 浏览器 中我们也可以实现简单抓包按下 F12 后在网络部分左边就是访问的一些东西右边就是 Header 之类的~~那如果我们登录之后把 Session 改一下我们把开头的 4 改成 3 再来看一下刷新后就发现找不到了