首先，定义前后端交互接口

讲解：

登录接口路径可以较为随意的设定，但参数必须有账号密码，也就是username和password，后端进行校验后返回校验成功，还是校验失败，也就是true和false

获取用户的登录信息，不需要传任何参数，只需要前端发送请求后，后端将当前登录用户的名称返回即可

然后，创建一个SpringBoot项目

如何创建一个SpringBoot项目——超详细教程

编写前端页面

在resource目录下的static目录下创建**登录和主页**的**html页面**，此处我将其分别命名为 login.html和index.html

如图红框位置：

登录(login.html)：

用户登录

用户名：

密码：

代码逻辑： 从input输入框内获取username和password参数，向后端发送post请求将参数发送过去，后端进行校验，如果后端响应为true，则说明响应成功(账号密码正确)，执行回调函数，跳转页面到index.html (主页)

主页(index.html)

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

登录人:

代码逻辑：来到该页面，立即向后端发送get请求，获取用户名username并展示到该页面上

编写后端代码

创建Java文件，我将其命名为userController

以下是全部代码

@RequestMapping("/user")

@RestController

public class UserController {

@RequestMapping("/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("admin".equals(userName) && "admin".equals(password)){

// 设置session

session.setAttribute("username","admin");

return true;

}

return false;

}

@RequestMapping("/getUserInfo")

public String getUserInfo(HttpSession session){

// 从Session获取登录用户

String userName = (String) session.getAttribute("username");

return userName;

}

}

方法login处理逻辑：

先校验参数合法性，判断是否为空等

然后进行用户名和密码的校验，判断是否是正确的用户名和密码

如果以上校验都通过，则设置session，存放username，以便后续使用

方法getUserInfo处理逻辑：

从session中获取username并返回给前端