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-07-01 23:53:58 +08:00
parent 109db1356b
commit 74dbca2535
2 changed files with 181 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
add_character.html Normal file
View File

@ -0,0 +1,125 @@
<!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>
<script language="javascript" type="text/javascript">
const jwt = localStorage.getItem("jwtToken");
if (!jwt) {
window.location.href = "./login.html";
}
</script>
</head>
<body>
<h1>图片上传</h1>
<form id="upload-form">
<table>
<tr>
<td>
<div class="table-field-title">角色名稱</div>
</td>
<td>
<input type="text" id="character_name" placeholder="角色名稱">
</td>
</tr>
<tr>
<td>
<div class="table-field-title">角色站位</div>
</td>
<td>
<input type="text" id="character_position" placeholder="角色位置">
</td>
</tr>
<tr>
<td>
<div class="table-field-title">角色類型</div>
</td>
<td>
<select id="character_index"></select>
</td>
</tr>
<tr>
<td>
<div class="table-field-title">角色圖片</div>
</td>
<td>
<input type="file" id="image-input" />
</td>
</tr>
</table>
<input type="submit" value="上傳並新增" />
</form>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
var selectElement = document.getElementById("character_index");
const name = ["前衛", "中衛", "後衛"];
for (var i = 0; i < name.length; i++) {
var 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");
// 监听表单提交事件
document.getElementById('upload-form').addEventListener('submit', async (event) => {
event.preventDefault(); // 阻止表单默认提交行为
const imageFile = document.getElementById('image-input').files[0];
if (charaName === "") {
alert('請輸入角色名稱');
return;
}
if (charaPos === "") {
alert('請輸入角色站位');
return;
}
if (!imageFile) {
alert('请选择一张图片');
return;
}
var data = {
name: charaName.value,
position: selectElement.value,
standIndex: parseInt(charaPos.value)
};
var jsonString = JSON.stringify(data);
console.log(jsonString); // 处理上传成功的响应
try {
// 创建一个 FormData 对象，用于包装文件和其他表单数据
const formData = new FormData();
formData.append('json', jsonString);
formData.append('image', imageFile);
// 发送 POST 请求
const response = await axios.post('http://127.0.0.1:8080/api/v1/character', formData, {
headers: {
'Authorization': 'Bearer ' + jwt, // 替换为实际的 JWT Token
'Content-Type': 'multipart/form-data',
},
});
console.log(response.data); // 处理上传成功的响应
alert('上传成功');
} catch (error) {
console.error(error); // 处理上传失败的错误
alert('上传失败');
}
});
</script>
</body>
</html>

73
characters.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-TW" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html"> <html lang="zh-TW" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
@ -7,28 +8,66 @@
<title>所有角色</title> <title>所有角色</title>
</head> </head>
<body>
<div id="result"></div> <body id="body">
<div class="page-title">角色清單</div>
<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 thead = document.createElement("thead");
let tbody = document.createElement("tbody");
table.appendChild(thead);
table.appendChild(tbody);
// Adding the entire table to the body tag
document.getElementById("body").appendChild(table);
// Creating and adding data to first row of the table
let row_1 = document.createElement("tr");
let heading_1 = document.createElement("th");
heading_1.innerHTML = "角色圖片";
let heading_2 = document.createElement("th");
heading_2.innerHTML = "角色名稱";
let heading_3 = document.createElement("th");
heading_3.innerHTML = "角色站位";
row_1.appendChild(heading_1);
row_1.appendChild(heading_2);
row_1.appendChild(heading_3);
thead.appendChild(row_1);
// 发送登录请求 // 发送登录请求
axios.get('http://127.0.0.1:8080/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;
const resultElement = document.getElementById('result'); console.log("Data: ", data);
var htmlText = "";
for (let i = 0; i < data.length; i++) { // Creating and adding data to second row of the table
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>"; for (let i = 0; i < data.length; i++) {
} let row_2 = document.createElement("tr");
resultElement.innerHTML = "<table>" + htmlText + "</table>"; let row_2_data_1 = document.createElement("td");
console.log("Data: ", data); let row_2_data_2 = document.createElement("td");
}) let row_2_data_3 = document.createElement("td");
.catch(function(error) {
const message = error.response.data.message; const item = data[i];
alert('資料取得失敗');
//console.error('登入失敗:', error); 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_3.innerHTML = item.standIndex;
row_2.appendChild(row_2_data_1);
row_2.appendChild(row_2_data_2);
row_2.appendChild(row_2_data_3);
tbody.appendChild(row_2);
}
})
.catch(function (error) {
alert('資料取得失敗');
console.error('登入失敗:', error);
});
</script> </script>
</body> </body>
</html> </html>