Compare commits

...

2 Commits

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

View File

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

View File

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

View File

@ -13,6 +13,11 @@
<p>
<div class="page-title">角色清單</div>
</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 language="javascript" type="text/javascript">
let table = document.createElement("table");
@ -40,7 +45,7 @@
thead.appendChild(row_1);
// 发送登录请求
axios.get('http://127.0.0.1:8080/api/v1/characters')
axios.get('./api/v1/characters')
.then(function (response) {
const data = response.data;
console.log("Data: ", data);
@ -54,7 +59,7 @@
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_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>

View File

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