login.html
4.48 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<link rel="shortcut icon" type="image/x-icon" href="/power/img/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/login.css"/>
<title>登录</title>
<script type="text/javascript" src="js/jquery-3.7.1.js"></script>
<script type="text/javascript" src="js/crypto-js.min.js"></script>
<script>
$(function(){
init();
/*$("#submit").click(function(e){
// e.preventDefault();
var loginName = $("#loginName").val();
var password = $("#password").val();
var encryptedPassword = encryptPassword(password);
$.post('/power/user/login',{"loginName":loginName,"password":encryptedPassword}, function(data){
console.log("data============", data);
});
// $.ajax({
// url: '/power/user/login', // 例如 '/api/data'
// type: 'POST',
// contentType: 'application/json', // 发送数据的格式
// data: JSON.stringify({
// loginName: loginName,
// password: encryptedPassword
// }), // 将JavaScript对象转换为JSON字符串
// success: function(response) {
// // 请求成功时的回调函数
// console.log(response);
// },
// error: function(error) {
// // 请求失败时的回调函数
// console.error(error);
// }
// });
})*/
// document.getElementById('login_form').addEventListener('submit', function(e) {
// e.preventDefault();
// const loginName = document.getElementById('loginName').value;
// const password = document.getElementById('password').value;
// // 假设你有一个加密函数 encryptPassword
// const encryptedPassword = encryptPassword(password);
// fetch('/power/user/login', {
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json'
// },
// body: JSON.stringify({ loginName, password: encryptedPassword })
// })
// // .then(response => response.json())
// // .then(data => console.log(data))
// // .catch(error => console.error('Error:', error));
// });
});
function init(){
var form = document.getElementById('login_form');
form.reset();
}
function encryptPassword(password) {
let key = "1234567890123456";
// key格式化处理
key = CryptoJS.enc.Utf8.parse(key)
const encrypted = CryptoJS.AES.encrypt(password, key,{
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7,
iv: CryptoJS.enc.Utf8.parse("37fa77f6a3b0462d")
});
const encStr = encrypted.ciphertext.toString()
return encStr;
}
</script>
</head>
<body>
<div id="loginDiv">
<form th:action="@{/user/login}" id="login_form" method="post">
<!-- <form id="login_form">-->
<h1 style="text-align: center;color: aliceblue;">用户登录</h1>
<!--<div style="text-align: right;margin-top:5px">
<a th:href="@{/register}">注册</a>
</div>-->
<p>用户名:<input id="loginName" type="text" name="loginName" autocomplete="off"></p>
<p> 密码:<input id="password" type="password" name="password" autocomplete="off"></p>
<p style="color: red;margin-left: 100px;" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
<div style="text-align: center;margin-top: 30px;">
<input id="submit" type="submit" class="button" value="登录">
<input type="reset" class="button" value="重置">
</div>
</form>
</div>
</body>
</html>