阿华代码，不是逆风，就是我疯
你们的点赞收藏是我前进最大的动力！！
希望本文内容能够帮助到你！！
目录
一：用户登录项目实现
1：需求
2：准备工作
（1）跳转的页面（首页）
（2） 登录的页面
3：预期结果
二：约定前后端交互接口
1：需求分析
2：接口定义
（1）校验接口
①请求参数
②响应数据
（2）查询登录用户接口
①请求参数
②响应数据
3：后端校验代码
4：查询登录用户后端代码
三：调整前端代码
四：运行测试结果
五：计算器项目实现
1：需求
2：准备工作
3：结果如下
六：约定前后端交互接口
1：需求分析
2：定义接口
3：请求参数
七：后端代码
八：运行测试
一：用户登录项目实现
1：需求
⽤⼾输⼊账号和密码,后端进⾏校验密码是否正确。
（1） 如果不正确,前端进⾏⽤⼾告知
（2）如果正确,跳转到⾸⻚.⾸⻚显⽰当前登录⽤⼾
（3）后续再访问⾸⻚,可以获取到登录⽤⼾信息
2：准备工作
把前端代码放到项目中
（1）跳转的页面（首页）
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>用户登录首页</title>
</head><body>登录人: <span id="loginUser"></span><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script></script>
</body></html>（2） 登录的页面
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>登录页面</title>
</head><body><h1>用户登录</h1>用户名：<input name="userName" type="text" id="userName"><br>密码：<input name="password" type="password" id="password"><br><input type="button" value="登录" onclick="login()"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script>function login() {}</script>
</body></html>3：预期结果
二：约定前后端交互接口
1：需求分析
对于后端开发⽽⾔,只需要提供两个功能
①登录⻚⾯:通过账号和密码,校验输⼊的账号密码是否正确,并告知前端
② ⾸⻚:告知前端当前登录⽤⼾.如果当前已有⽤⼾登录,返回登录的账号,如果没有,返回空
2：接口定义
（1）校验接口
请求路径：/user/login
请求⽅式：POST
接⼝描述：校验账号密码是否正确
①请求参数
②响应数据
Content-Type: text/html
响应内容:
true //账号密码验证成功
false//账号密码验证失败
（2）查询登录用户接口
请求路径：/user/getLoginUser
请求⽅式：GET
接⼝描述：查询当前登录的⽤⼾
①请求参数
无
②响应数据
Content-Type: text/html
响应内容:
zhangsan
3：后端校验代码
package com.example.demoapplication;import jakarta.servlet.http.HttpSession;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.SessionAttribute;/*** Created with IntelliJ IDEA.* Description:* User: Hua YY* Date: 2024-11-11* Time: 13:10*/@RestController
@RequestMapping("/user")
public class LoginController {/** 这个类中的login方法是用来检验前端请求中的账号和密码是否正确的* */@RequestMapping(value = "/login")public Boolean login(String userName , String password , HttpSession session){//参数校验/*if(userName == null || userName.length() == 0|| password == null || password.length() == 0){return false;}*/if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)){return false;}//检验账号密码是否正确,这里内置的账号密码写死了，后面接触数据库之后在加深理解if(!"cbro".equals(userName) || !"123456".equals(password)){return false;}session.setAttribute("userName" , userName);return true;}@RequestMapping("/index")public String getUserName(@SessionAttribute("userName") String userName){return userName;}
}
StringUtils.hasLength()是Spring提供的⼀个⼯具⽅法,判断字符串是否有值，字符串为null或者""时,返回false,其他返回true。
4：查询登录用户后端代码
@RestController
@RequestMapping("/user")
public class getLoginUser {@RequestMapping(value = "/getLoginUser" )public String getLoginUser(HttpSession session){String userName = (String)session.getAttribute("userName");//向下转型if(StringUtils.hasLength(userName)){return userName;}return "";}
}
三：调整前端代码
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>用户登录首页</title>
</head><body>登录人: <span id="loginUser"></span><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script>$.ajax({url:"/user/getLoginUser",//这里才是真正的调用后端type:"get",success:function (loginName){//调用回调函数，接收后端结果，用body参数接收//给登录人span重新赋值$("#loginUser").text(loginName);//用text赋值，赋值来源为loginName}});</script>
</body></html><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>登录页面</title>
</head><body><h1>用户登录</h1>用户名：<input name="userName" type="text" id="userName"><br>密码：<input name="password" type="password" id="password"><br><input type="button" value="登录" onclick="login()"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script>function login() {//当点击登录的时候onclick调用function中的login//ajax请求包含路径类型，访问成功...，访问失败.....//格式 $.ajax({}) 括号里面是一个对象$.ajax({url:"/user/login",//这里才是真正的调用后端type:"post",data:{ // data接收参数userName: $("#userName").val(),password: $("#password").val()},//以上是发送请求,响应成功//回调函数function内部有一个内置的参数用来接收后端的响应success:function (result){//result参数接收响应结果if(result){location.href = "/index.html"}else{alert("账号密码有误");//弹框}}})}</script>
</body></html>四：运行测试结果
多次刷新http://127.0.0.1:8080/index.html发现依然可以获取到登录⽤⼾
如果重启服务器,则登录⼈显⽰:空
Session存在内存中,如果不做任何处理,默认服务器重启,Session数据就丢失了
五：计算器项目实现
1：需求
输⼊两个整数,点击"点击相加"按钮,显⽰计算结果
2：准备工作
把前端代码引入项目中
前端代码如下
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><form action="calc" method="post"><h1>计算器</h1>数字1：<input name="num1" type="text"><br>数字2：<input name="num2" type="text"><br><input type="submit" value=" 点击相加 "></form></body></html>3：结果如下
六：约定前后端交互接口
1：需求分析
加法计算器功能,对两个整数进⾏相加,需要客⼾端提供参与计算的两个数,服务端返回这两个整数计算的结果
2：定义接口
请求路径：calc/sum
请求⽅式：GET/POST
接⼝描述：计算两个整数相加
3：请求参数
七：后端代码
@RestControllerpublic class CalculateController {@RequestMapping("/calc")public String sum(Integer num1 , Integer num2){int sum = num1 + num2;return "<h1>计算的结果是：" + sum + "</h1>";}}八：运行测试
