上期我们实现了用户模块的后端代码,这期我们来实现登录界面的前端代码,这里主要讲解前后端交互的代码。这里我事先已经写好了一个简单的登录界面.
1. 登录页面
1. 页面实现
login.html:
<!DOCTYPE html>
<html lang="ch">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用户登录</title><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/login.css">
</head>
<body><div class="login-container"><!-- 登录对话框 --><div class="login-dialog"><h3>用户登录</h3><div class="row"><span>用户名</span><input type="text" id="username"></div><div class="row"><span>密码</span><input type="password" id="password"></div><div class="row"><button class="submit" onklick="login()">提交</button></div></div></div>
</body>
</html>
common.css:
/* 公共样式 */* {margin: 0;padding: 0;box-sizing: border-box;
}html, body {height: 100%;background-image: url(../image/image.png);background-repeat: no-repeat;background-position: center;background-size: cover;
}
login.css:
.login-container {height: 100%;display: flex;justify-content: center;align-items: center;
}.login-dialog {height: 300px;width: 400px;background-color: white;border-radius: 20px;
}.login-dialog h3 {text-align: center;padding: 30px 0;
}.login-dialog .row {width: 100%;height: 50px;display: flex;justify-content: center;align-items: center;
}.login-dialog .row span {width: 50px;font-weight: 700;
}#username, #password {width: 200px;height: 30px;font-size: 15px;line-height: 10px;padding-left: 10px;border-radius: 10px;
}.login-dialog .submit {width: 250px;height: 40px;background-color: aqua;border-radius: 10px;
}.login-dialog .submit:active {background-color: rgb(11, 186, 186);
}
1.2 前后端交互
在后续的前后端交互中我们使用jquery来完成,所以还需要引入jquery,我们打开浏览器搜索jquery cdn,找到如下图片中的链接:
选择一个版本复制后在浏览器打开:
CTRL + A 全选复制,然后创建一个js文件复制进去:
然后使用script标签导入即可:
接下来我们就可以使用ajax发送请求给服务器:
javascript"><script>function login() {$.ajax({type: 'post',url: '/user/login',data: {username: $("#username").val(),password: $("#password").val()},success: function(result) {if(result.username != null) {alert("登录成功当前用户为:" + result.username);}else{alert("登录失败");}},error: function() {alert("请求发送失败");}});}</script>
运行测试:
2. 用户注册
注册和登录大体相同,我们直接在登录页面上改:
<!DOCTYPE html>
<html lang="ch">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用户注册</title><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/login.css">
</head>
<body><div class="login-container"><!-- 注册对话框 --><div class="login-dialog"><h3>用户注册</h3><div class="row"><span>用户名</span><input type="text" id="username"></div><div class="row"><span>密码</span><input type="password" id="password"></div><div class="row"><button class="submit" onclick="register()">提交</button></div></div></div><script src="js/jquery.min.js"></script><script>function register() {$.ajax({type: 'post',url: '/user/register',data: {username: $("#username").val(),password: $("#password").val()},success: function(result) {if(result.username != null) {alert("注册成功");location.href = "/login.html";}else{alert("注册失败");}},error: function() {alert("请求发送失败");}});}</script>
</body>
</html>
运行测试: