ray650128/PcReDiveRankTableFrontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

初步加入腳色清單

Browse Source
This commit is contained in:
Raymond Yang 2023-06-21 16:07:39 +08:00
parent 7934f7dd4c
commit 109db1356b
3 changed files with 92 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
characters.html
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="zh-TW" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>所有角色</title>
</head>
<body>
<div id="result"></div>
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
<script language="javascript" type="text/javascript">
// 发送登录请求
axios.get('http://127.0.0.1:8080/api/v1/characters')
.then(function(response) {
const data = response.data;
const resultElement = document.getElementById('result');
var htmlText = "";
for (let i = 0; i < data.length; i++) {
htmlText += "<tr><td>"+ data[i].name +"</td><td><img src=\"http://127.0.0.1:8080" + data[i].imgSrc + "\" width=\"64\" height=\"64\"></td></tr>";
}
resultElement.innerHTML = "<table>" + htmlText + "</table>";
console.log("Data: ", data);
})
.catch(function(error) {
const message = error.response.data.message;
alert('資料取得失敗');
//console.error('登入失敗:', error);
});
</script>
</body>
</html>

6
login.html
View File

@ -5,7 +5,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login</title>
<title>登入</title>
</head>
<body>
<form id="login-form">
@ -44,7 +44,9 @@
window.location.href = './index.html';
})
.catch(function(error) {
console.error('登录失败:', error);
const message = error.response.data.message;
alert('登入失敗');
//console.error('登入失敗:', error);
});
}
</script>

54
register.html Normal file
View File

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="zh-TW" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>註冊</title>
</head>
<body>
<form id="register-form">
<p><input type="text" id="username" placeholder="Username"></p>
<p><input type="password" id="password" placeholder="Password" autocomplete="true"></p>
<p><button type="submit">Login</button></p>
</form>
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
<script language="javascript" type="text/javascript">
document.getElementById('register-form').addEventListener('submit',
function(event) {
event.preventDefault(); // 阻止表单的默认提交行为
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
// 执行登录请求
register(username, password);
});
function register(username, password) {
axios.post('http://127.0.0.1:8080/api/v1/register', {
account: username,
password: password
})
.then(function(response) {
var token = response.data.token; // 假设服务器返回一个名为"token"的字段
// 将JWT存储到本地（通常是使用localStorage）
localStorage.setItem('jwtToken', token);
// 登录成功后，进行其他操作（例如重定向到受保护的页面）
window.location.href = './index.html';
})
.catch(function(error) {
const message = error.response.data.message;
alert('註冊失敗: 此帳號已經存在');
//console.error('註冊失敗:', message);
});
}
</script>
</body>
</html>