1. 创建SpringBoot工程2. SpringMVC后端Servlet中处理客户端请求的核心单元2.1方法参数列表基本类型----参数列表名字和表单名字相同对象类package com.iweb.sprintbootmybatis.bean; import lombok.Data; //date获取类的数据 Data public class User { private String username; private String uid; private String password; private Cat cat; }controller部分内容RequestMapping(/login1) public void login1(String username,String password){ System.out.println(username : password); }----参数列表名字和表单名字不同对象类package com.iweb.sprintbootmybatis.bean; import lombok.Data; //date获取类的数据 Data public class User { private String username; private String uid; private String password; private Cat cat; }controller部分内容//null和 RequestMapping(/login1) public void login1(RequestParam(username) String username1, String password){ System.out.println(username1 : password); }对象类型controller部分内容RequestMapping(/login) ResponseBody public String login(User user){ user userService.login(user); if(user null){ return 登录失败; }else{ return 登录成功; } }web页面!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title系统登录/title style * { margin: 0; padding: 0; box-sizing: border-box; font-family: Microsoft YaHei, sans-serif; } body { /* 渐变背景 */ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; } /* 登录卡片 */ .login-box { background: #fff; width: 380px; padding: 40px 35px; border-radius: 16px; box-shadow: 0 10px 35px rgba(0, 0, 0, 0.2); } .title { text-align: center; font-size: 26px; color: #333; margin-bottom: 35px; font-weight: 600; } /* 输入框容器 */ .input-item { margin-bottom: 22px; } .input-item input { width: 100%; height: 48px; padding: 0 15px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; transition: 0.3s; outline: none; } /* 聚焦效果 */ .input-item input:focus { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2); } /* 登录按钮 */ .login-btn { width: 100%; height: 48px; border: none; border-radius: 8px; background: linear-gradient(135deg, #667eea, #764ba2); color: white; font-size: 17px; cursor: pointer; transition: opacity 0.3s; } .login-btn:hover { opacity: 0.9; } /* 底部文字 */ .tip { margin-top: 20px; text-align: center; color: #888; font-size: 14px; } .tip a { color: #667eea; text-decoration: none; } /* 移动端适配 */ media (max-width: 420px) { .login-box { width: 92%; padding: 30px 20px; } } /style /head body form actionhttp://localhost:8080/user/login methodpost div classlogin-box h2 classtitleJavaWeb 后台登录/h2 div classinput-item input typetext nameusername idusername placeholder请输入用户名 /div div classinput-item input typepassword namepassword idpassword placeholder请输入密码 /div div classinput-item 小猫种类input typetext namecat.kind placeholder请输入种类br / 小猫价格input typetext namecat.price placeholder请输入价格 /div button classlogin-btn typesubmit idloginBtn登 录/button div classtip 没有账号a href/day03/register.html立即注册/a /div /div /form /body /html3.Ajax发送异步请求的技术传统请求从后端返回页面后会刷新整个页面导致选先填写的数据丢失了原理图前端web文件!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title系统登录/title style * { margin: 0; padding: 0; box-sizing: border-box; font-family: Microsoft YaHei, sans-serif; } body { /* 渐变背景 */ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; } /* 登录卡片 */ .login-box { background: #fff; width: 380px; padding: 40px 35px; border-radius: 16px; box-shadow: 0 10px 35px rgba(0, 0, 0, 0.2); } .title { text-align: center; font-size: 26px; color: #333; margin-bottom: 35px; font-weight: 600; } /* 输入框容器 */ .input-item { margin-bottom: 22px; } .input-item input { width: 100%; height: 48px; padding: 0 15px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; transition: 0.3s; outline: none; } /* 聚焦效果 */ .input-item input:focus { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2); } /* 登录按钮 */ .login-btn { width: 100%; height: 48px; border: none; border-radius: 8px; background: linear-gradient(135deg, #667eea, #764ba2); color: white; font-size: 17px; cursor: pointer; transition: opacity 0.3s; } .login-btn:hover { opacity: 0.9; } /* 底部文字 */ .tip { margin-top: 20px; text-align: center; color: #888; font-size: 14px; } .tip a { color: #667eea; text-decoration: none; } /* 移动端适配 */ media (max-width: 420px) { .login-box { width: 92%; padding: 30px 20px; } } /style /head body div classlogin-box h2 classtitleJavaWeb 后台登录/h2 div classinput-item input typetext nameusername idusername placeholder请输入用户名 /div div classinput-item input typepassword namepassword idpassword placeholder请输入密码 /div button classlogin-btn typesubmit idloginBtn登 录/button div classtip 没有账号a href/day03/register.html立即注册/a /div /div /body /html script let btn document.querySelector(#loginBtn); let username document.querySelector(#username); let password document.querySelector(#password); btn.onclick function(){ // 1. 创建请求对象 const xhr new XMLHttpRequest(); // 2. 打开连接请求方式、地址、true异步 xhr.open(POST, http://localhost:8080/user/ajaxLogin, true); // 3. 设置请求头POST表单必须配置 xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded); //4、发送数据 const data usernameusername.valuepasswordpassword.value; xhr.send(data); xhr.onreadystatechange function(){ //200代表客户端和服务器端通信成功并且客户端正确接收服务器返回给客户端的数据 if(xhr.status 200 xhr.readyState 4){ alert(xhr.responseText); password.value ; } } } /script后端controller文件package com.iweb.sprintbootmybatis.controller; import com.iweb.sprintbootmybatis.bean.User; import com.iweb.sprintbootmybatis.service.UserService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; Controller CrossOrigin//专门处理客户端请求和给客户端响应结果 public class UserController { Autowired private UserService userService;//这个代码相当于之前写的多态UserService userServicenew UserServiceimpl //一个方法对应一个请求 //RequestMapping处理登录请求且括号里的内容不能重复,web想要请求路径都以斜杠开头 RequestMapping(/ajaxlogin) ResponseBody public String ajaxlogin(User user){ useruserService.login(user); if(usernull){ return 密码输入错误; } return 登陆成功; } }