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

Compare commits

base: ray650128:cdb7022bf861a7345208b43dea9fbd005fdecac8
Branches Tags
ray650128:master
..
compare: ray650128:cd4d253c0c19dfe93a40df16593ed9eef6142b81
Branches Tags
ray650128:master

No commits in common. "cdb7022bf861a7345208b43dea9fbd005fdecac8" and "cd4d253c0c19dfe93a40df16593ed9eef6142b81" have entirely different histories.
cdb7022bf8 ... cd4d253c0c

7 changed files with 90 additions and 140 deletions
Show Stats Expand all files Collapse all files

19
manage/character/add.html → character/add.html
View File

@ -5,10 +5,9 @@
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>新增角色</title> <title>新增角色</title>
<script> <script language="javascript" type="text/javascript">
const jwt = localStorage.getItem("jwtToken"); const jwt = localStorage.getItem("jwtToken");
if (!jwt) { if (!jwt) {
window.location.href = "./login.html"; window.location.href = "./login.html";
@ -61,17 +60,17 @@
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script> <script>
let selectElement = document.getElementById("character_index"); var selectElement = document.getElementById("character_index");
const name = ["前衛", "中衛", "後衛"]; const name = ["前衛", "中衛", "後衛"];
for (let i = 0; i < name.length; i++) { for (var i = 0; i < name.length; i++) {
const optionElement = document.createElement("option"); var optionElement = document.createElement("option");
optionElement.value = i; optionElement.value = i;
optionElement.textContent = name[i]; optionElement.textContent = name[i];
selectElement.appendChild(optionElement); selectElement.appendChild(optionElement);
} }
const charaName = document.getElementById("character_name"); var charaName = document.getElementById("character_name");
const charaPos = document.getElementById("character_position"); var charaPos = document.getElementById("character_position");
// 监听表单提交事件 // 监听表单提交事件
document.getElementById('upload-form').addEventListener('submit', async (event) => { document.getElementById('upload-form').addEventListener('submit', async (event) => {
@ -93,12 +92,12 @@
return; return;
} }
let data = { var data = {
name: charaName.value, name: charaName.value,
position: selectElement.value, position: selectElement.value,
standIndex: parseInt(charaPos.value) standIndex: parseInt(charaPos.value)
}; };
let jsonString = JSON.stringify(data); var jsonString = JSON.stringify(data);
console.log(jsonString); // 处理上传成功的响应 console.log(jsonString); // 处理上传成功的响应
try { try {
@ -108,7 +107,7 @@
formData.append('image', imageFile); formData.append('image', imageFile);
// 发送 POST 请求 // 发送 POST 请求
const response = await axios.post('./api/v1/character', formData, { const response = await axios.post('http://127.0.0.1:8080/api/v1/character', formData, {
headers: { headers: {
'Authorization': 'Bearer ' + jwt, // 替换为实际的 JWT Token 'Authorization': 'Bearer ' + jwt, // 替换为实际的 JWT Token
'Content-Type': 'multipart/form-data', 'Content-Type': 'multipart/form-data',

9
manage/character/index.html → character/index.html
View File

@ -13,11 +13,6 @@
<p> <p>
<div class="page-title">角色清單</div> <div class="page-title">角色清單</div>
</p> </p>
<hr>
<div class="center">
<h4><a href="./character/add.html">新增角色</a></h4>
</div>
<hr>
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
<script language="javascript" type="text/javascript"> <script language="javascript" type="text/javascript">
let table = document.createElement("table"); let table = document.createElement("table");
@ -45,7 +40,7 @@
thead.appendChild(row_1); thead.appendChild(row_1);
// 发送登录请求 // 发送登录请求
axios.get('./api/v1/characters') axios.get('http://127.0.0.1:8080/api/v1/characters')
.then(function (response) { .then(function (response) {
const data = response.data; const data = response.data;
console.log("Data: ", data); console.log("Data: ", data);
@ -59,7 +54,7 @@
const item = data[i]; const item = data[i];
row_2_data_1.innerHTML = "<img src=" + item.imgSrc + "\"\" width=\"64\" height=\"64\">"; row_2_data_1.innerHTML = "<img src=\"http://127.0.0.1:8080" + item.imgSrc + "\" width=\"64\" height=\"64\">";
row_2_data_2.innerHTML = item.name; row_2_data_2.innerHTML = item.name;
row_2_data_3.innerHTML = item.standIndex; row_2_data_3.innerHTML = item.standIndex;

41
index.html
View File

@ -6,30 +6,31 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>超異域公主連結 Re: Dive 台版 Rank 推薦表查詢系統</title> <title>超異域公主連結 Re: Dive 台版 Rank 推薦表查詢系統</title>
<style> <style>
html { html { color-scheme: light dark; }
color-scheme: light dark; body { width: 100%; margin: 0 auto;
} font-family: Tahoma, Verdana, Arial, sans-serif; }
body {
width: 100%;
margin: 0 auto;
font-family: Tahoma, Verdana, Arial, sans-serif;
}
</style> </style>
<script language="javascript" type="text/javascript">
const jwt = localStorage.getItem("jwtToken");
if (!jwt) {
window.location.href = "./login.html";
}
</script>
</head> </head>
<body> <body>
<p>
<div class="page-title">公主連結台版 Rank 推薦表</div> <h1>公主連結台版 Rank 推薦表</h1>
</p> <p>If you see this page, the nginx web server is successfully installed and
<hr> working. Further configuration is required.</p>
<div>請選擇推薦表作者：</div>
<div id="author"></div> <p>For online documentation and support please refer to
<hr> <a href="http://nginx.org/">nginx.org</a>.<br/>
<div class="center"> Commercial support is available at
<h4><a href="./manage/index.html">登入後台介面</a></h4> <a href="http://nginx.com/">nginx.com</a>.</p>
</div>
<hr> <p><em>Thank you for using nginx.</em></p>
</body> </body>
</html> </html>

55
login.html Normal file
View File

@ -0,0 +1,55 @@
<!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="login-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('login-form').addEventListener('submit',
function(event) {
event.preventDefault(); // 阻止表单的默认提交行为
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
// 执行登录请求
login(username, password);
});
function login(username, password) {
// 发送登录请求
axios.post('http://127.0.0.1:8080/api/v1/login', {
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('登入失敗:', error);
});
}
</script>
</body>
</html>

34
manage/index.html
View File

@ -1,34 +0,0 @@
<!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>超異域公主連結 Re: Dive 台版 Rank 推薦表查詢系統</title>
<style>
html { color-scheme: light dark; }
body { width: 100%; margin: 0 auto;
font-family: Tahoma, Verdana, Arial, sans-serif; }
</style>
<script language="javascript" type="text/javascript">
const jwt = localStorage.getItem("jwtToken");
if (!jwt) {
window.location.href = "./login.html";
}
</script>
</head>
<body>
<p>
<div class="page-title">後台管理</div>
</p>
<hr>
<p>
<h4><a href="./character/index.html">管理角色</a></h4>
</p>
<p>
<h4><a href="./rankTable/index.html">管理推薦表</a></h4>
</p>
</body>
</html>

66
manage/login.html
View File

@ -1,66 +0,0 @@
<!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="login-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("login-form")
.addEventListener("submit", function (event) {
event.preventDefault(); // 阻止表单的默认提交行为
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// 执行登录请求
login(username, password);
});
function login(username, password) {
// 发送登录请求
axios
.post("./api/v1/login", {
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('登入失敗:', error);
});
}
</script>
</body>
</html>

4
manage/register.html → register.html
View File

@ -29,7 +29,7 @@
}); });
function register(username, password) { function register(username, password) {
axios.post('./api/v1/register', { axios.post('http://127.0.0.1:8080/api/v1/register', {
account: username, account: username,
password: password password: password
}) })
@ -40,7 +40,7 @@
localStorage.setItem('jwtToken', token); localStorage.setItem('jwtToken', token);
// 登录成功后，进行其他操作（例如重定向到受保护的页面） // 登录成功后，进行其他操作（例如重定向到受保护的页面）
window.location.href = '../index.html'; window.location.href = './index.html';
}) })
.catch(function(error) { .catch(function(error) {
const message = error.response.data.message; const message = error.response.data.message;