学习目的：

1、理解前后端交互过程

2、学习接口传参，数据返回以及页面展示

1、准备工作

创建SpringBoot项目，引入Spring Web依赖，添加前端页面到项目中。

前端代码：

login.html

                 
用户登录
 用户名：
 密码：
       

index.html

                           登录人:       

2、约定前后端交互接口

需求分析：

对于后端来说，不涉及前端页面展示的设计，只需要实现两个功能：

登录页面：通过获取账号和密码，校验输入的账号密码是否正确，并反馈给前端

首页：告知前端当前登录用户。如果当前已有用户登录，则返回登录的账号，没有则返回空

1、校验接口

接口定义：

请求路径：/user/login

接口描述：校验账号密码是否正确

请求参数：

响应数据：

Content-Type：text/html

响应内容：true   账号密码验证成功 / false  账号密码验证失败

2、查询用户登录接口

接口定义：

请求路径：/user/getLoginUser

接口描述：查询当前登录的用户

请求参数：

无

响应数据：

Content-Type：text/html

响应内容：zhangsan

                （返回当前登录的用户）

3、实现服务端代码

1、校验接口

写法一：

import jakarta.servlet.http.HttpSession; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController;  @RestController() @RequestMapping("/user") public class LoginController {     @RequestMapping(value = "/login")     public Boolean login(String userName, String password, HttpSession session) {         //账号或密码为空         if(userName == null || password == null) {             return false;         }         //校验账号密码是否正确         //因为没有引进数据库，所以这边先采用硬编码把它写死         if("zhangsan".equals(userName) && "123456".equals(password)) {             //账号密码校验成功，存储到session中             session.setAttribute("username", userName);             return true;         }         return false;     } }

写法二：

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 {     @RequestMapping(value = "/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.setAttribute("userName", userName);         return true;     } }

StringUtils.hasLength() 是Spring提供的一个工具方法，判断字符串是否有值

字符串为 null 或 "" 时，返回 false，其他情况返回 true

2、查询用户登录接口

import jakarta.servlet.http.HttpSession; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController;  @RestController() @RequestMapping("/user") public class LoginController {        @RequestMapping("/getLoginUser")         public String getLoginUser(HttpSession session) {         //从session中获取用户登录信息         String userName = (String) session.getAttribute("username");         //如果用户已经登录，session不为空，则直接返回用户信息         if (userName != null) {             return userName;         }         return "";     } } 

4、调整前端页面代码

1、调整登录页面login.html

        对于前端而言，当点击登录按钮时，需要把用户登录的信息传递到后端进行校验，后端校验成功，则跳转到首页 index.html；后端校验失败，则弹出警告

2、调整首页代码

        调整首行代码只需显示当前登录用户即可，当前登录用户需要从后端获取，并显示到前端

5、运行测试

session存储在内存中，只要服务器没重启，即使多次刷新，仍可以显示登录人信息~