这篇文章详细的讲解了一个
简单的登录网页的前端代码和后端代码的构造
使用了JavaScript中的ajax来进行前后端的交互
一、前端代码
登录页面代码
<!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() {
$.ajax({
type:"post",
url:"/login/check",
data:{
userName:$("#userName").val(),
password:$("#password").val()
},
success:function(result){
if(result==true){
location.href = "index.html";
}else{
alert("用户名和密码错误!请重写输入")
}
}
});
}
</script>
</body>
</html>
代码解析
<body>中的 文档的主体部分,包含网页的可见内容。
<input type="button" value="登录" οnclick="login()">
<input> 元素用于在网页上创建各种类型的输入控件。
type="button"
指定这是一个按钮类型,不会提交表单,而是用于触发客户端的JavaScript函数或其他操作
οnclick="login()"
表示当用户点击登录按钮时,就会执行命名为login()的JavaScript函数
下面的用<script>包起来的代码
这段代码使用 jQuery 实现了一个简单的用户登录功能。它通过 AJAX 向服务器发送用户名和密码,检查登录凭证的有效性,并根据服务器返回的结果执行相应的操作。
1.首先引入jQuery库
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
通过 CDN 引入 jQuery 3.6.4 库,以便在页面中使用 jQuery 提供的简便的 JavaScript 操作方法。
2.定义login()函数
login()是一个 JavaScript 函数,用于处理用户点击“登录”按钮时的操作。
3 $.ajax()方法
使用 jQuery 的 $.ajax 方法来进行 AJAX 请求,发送异步 HTTP 请求。
关键参数解释:
- 指定请求类型为 Post,用于向服务器提交数据(用户名和密码)。
url:"/login/check",
指定请求的 URL(服务器端的登录检查接口),即请求会发送到/login/check
。
data
:发送到服务器的数据对象,包含用户输入的用户名和密码:data: { userName: $("#userName").val(), password: $("#password").val() }
$("#userName").val()
:使用 jQuery 获取 ID 为userName
的输入框的值(用户名)。$("#password").val()
:使用 jQuery 获取 ID 为password
的输入框的值(密码)。
success:function(result){ }
- 请求成功后的回调函数,接收一个参数
result
,代表服务器的返回结果。- 如果
result
是true
,表示登录成功,使用location.href = "index.html";
重定向到主页index.html
。- 如果
result
是false
,表示登录失败,弹出提示框:alert("用户名和密码错误!请重写输入");
。
显示用户名页面的代码
<!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({
type:"post",
url:"/login/index",
success:function(result){
$("#loginUser").text(result);
}
});
</script>
</body>
</html>
代码解析:
登录人: <span id="loginUser"></span>
1.
<span>
标签
<span>
是一个行内元素,通常用于在网页中创建一个没有任何特定样式或格式的容器,用于文本或其他内联元素。- 在这段代码中,
<span>
元素用于显示登录用户的名字。2.
id="loginUser"
id
是一个 HTML 属性,表示元素的唯一标识符。在这段代码中,id="loginUser"
用于唯一标识这个<span>
元素。- 通过这个 ID,可以在 JavaScript 或 jQuery 中轻松定位和操作这个元素的内容。
$.ajax({ type:"post", url:"/login/index", success:function(result){ $("#loginUser").text(result); } });
return是后端返回的结果。也就是用户名。
因此我们只需要将result的值赋值给loginUser这个参数
$("#loginUser")
:使用 jQuery 选择器选择 ID 为loginUser
的元素。.text(result)
:将result
的内容设置为该元素的文本内容。
二、前端页面
三、后端代码
3.1 完整代码
@RestController
@RequestMapping("/login")
public class LoginController {
@RequestMapping("/check")
public Boolean check(String userName , String password, HttpSession session){
//校验账号和密码是否为空
if(!StringUtils.hasLength(userName)||!StringUtils.hasLength(password)){
return false;
}
//检验账号和密码是否正确
//本来使用数据库,如今使用数据模拟
if("张三".equals(userName)&&"123456".equals(password)){
session.setAttribute("userName",userName);
return true;
}
return false;
}
@RequestMapping("/index")
public String index(HttpSession session){
String userName = (String) session.getAttribute("userName");
return userName;
}
}
3.2 代码解析
验证用户名和密码
在判断输入字符是否为空时,我们可以用到Spring给我们提供的方法:
!StringUtils.hasLength(userName)||!StringUtils.hasLength(password)
这里验证用户名和密码的时候进行数据模拟,而非使用数据库,等后续再改进。
if("张三".equals(userName)&&"123456".equals(password)){ session.setAttribute("userName",userName); return true; }
书写标准:把常量写在前面,变量写在后面。
进行完上述的代码,我们就需要获取用户信息,怎么获取呢?这时候就需要用到Session。
从Session里拿。
设置Session (得到用户信息)
如上完整代码,是校验用户名和密码的完整代码。我们还进行了Session的设置。
我们使用HttpSession session这个对象设置Session内容为用户名。
显示用户信息
@RequestMapping("/index")
public String index(HttpSession session){
String userName = (String) session.getAttribute("userName");
return userName;
}
我们在显示登录人页面中,使用HttpSession session这个对象获得了之前设置的
Session信息,也就是用户名。并且返回了userName。
(String) session.getAttribute("userName");
在这串代码中,如果Session为空,并不会报错。因为它自动帮我们创建了一个空的Session
验证结果
当输入用户名和密码错误时
当输入用户名和密码正确时
登录成功