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

Compare commits

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

2 Commits
cd4d253c0c ... cdb7022bf8

Author SHA1 Message Date
Raymond Yang
cdb7022bf8 整理網頁路徑 2023-07-10 15:46:39 +08:00
Raymond Yang
105391ae13 加入web 2023-07-10 15:36:47 +08:00
7 changed files with 140 additions and 90 deletions
Show Stats Expand all files Collapse all files

43
index.html
View File

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

55
login.html
View File

@ -1,55 +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('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>

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

@ -5,9 +5,10 @@
<!-- 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 language="javascript" type="text/javascript"> <script>
const jwt = localStorage.getItem("jwtToken"); const jwt = localStorage.getItem("jwtToken");
if (!jwt) { if (!jwt) {
window.location.href = "./login.html"; window.location.href = "./login.html";
@ -60,17 +61,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>
var selectElement = document.getElementById("character_index"); let selectElement = document.getElementById("character_index");
const name = ["前衛", "中衛", "後衛"]; const name = ["前衛", "中衛", "後衛"];
for (var i = 0; i < name.length; i++) { for (let i = 0; i < name.length; i++) {
var optionElement = document.createElement("option"); const optionElement = document.createElement("option");
optionElement.value = i; optionElement.value = i;
optionElement.textContent = name[i]; optionElement.textContent = name[i];
selectElement.appendChild(optionElement); selectElement.appendChild(optionElement);
} }
var charaName = document.getElementById("character_name"); const charaName = document.getElementById("character_name");
var charaPos = document.getElementById("character_position"); const charaPos = document.getElementById("character_position");
// 监听表单提交事件 // 监听表单提交事件
document.getElementById('upload-form').addEventListener('submit', async (event) => { document.getElementById('upload-form').addEventListener('submit', async (event) => {
@ -92,12 +93,12 @@
return; return;
} }
var data = { let data = {
name: charaName.value, name: charaName.value,
position: selectElement.value, position: selectElement.value,
standIndex: parseInt(charaPos.value) standIndex: parseInt(charaPos.value)
}; };
var jsonString = JSON.stringify(data); let jsonString = JSON.stringify(data);
console.log(jsonString); // 处理上传成功的响应 console.log(jsonString); // 处理上传成功的响应
try { try {
@ -107,7 +108,7 @@
formData.append('image', imageFile); formData.append('image', imageFile);
// 发送 POST 请求 // 发送 POST 请求
const response = await axios.post('http://127.0.0.1:8080/api/v1/character', formData, { const response = await axios.post('./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
character/index.html → manage/character/index.html
View File

@ -13,6 +13,11 @@
<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");
@ -40,7 +45,7 @@
thead.appendChild(row_1); thead.appendChild(row_1);
// 发送登录请求 // 发送登录请求
axios.get('http://127.0.0.1:8080/api/v1/characters') axios.get('./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);
@ -54,7 +59,7 @@
const item = data[i]; const item = data[i];
row_2_data_1.innerHTML = "<img src=\"http://127.0.0.1:8080" + item.imgSrc + "\" width=\"64\" height=\"64\">"; row_2_data_1.innerHTML = "<img src=" + 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;

34
manage/index.html Normal file
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>超異域公主連結 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 Normal file
View File

@ -0,0 +1,66 @@
<!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
register.html → manage/register.html
View File

@ -29,7 +29,7 @@
}); });
function register(username, password) { function register(username, password) {
axios.post('http://127.0.0.1:8080/api/v1/register', { axios.post('./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;