實作新增、修改
This commit is contained in:
parent
84d1e1916a
commit
fbc0760bd3
230
edit.html
Normal file
230
edit.html
Normal file
@ -0,0 +1,230 @@
|
||||
<!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>
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<form id="record-form">
|
||||
<table>
|
||||
<tr>
|
||||
<td>第1刀正刀</td>
|
||||
<td>
|
||||
<input type="text" id="knife1_boss" placeholder="x周-y王" />
|
||||
</td>
|
||||
<td>第1刀正刀傷害</td>
|
||||
<td>
|
||||
<input type="text" id="knife1_damage" placeholder="ex: 12000000" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>第1刀殘刀</td>
|
||||
<td>
|
||||
<input type="text" id="knife1c_boss" placeholder="x周-y王" />
|
||||
</td>
|
||||
<td>第1刀殘刀傷害</td>
|
||||
<td>
|
||||
<input type="text" id="knife1c_damage" placeholder="ex: 12000000" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<hr />
|
||||
<table>
|
||||
<tr>
|
||||
<td>第2刀正刀</td>
|
||||
<td>
|
||||
<input type="text" id="knife2_boss" placeholder="x周-y王" />
|
||||
</td>
|
||||
<td>第2刀正刀傷害</td>
|
||||
<td>
|
||||
<input type="text" id="knife2_damage" placeholder="ex: 12000000" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>第2刀殘刀</td>
|
||||
<td>
|
||||
<input type="text" id="knife2c_boss" placeholder="x周-y王" />
|
||||
</td>
|
||||
<td>第2刀殘刀傷害</td>
|
||||
<td>
|
||||
<input type="text" id="knife2c_damage" placeholder="ex: 12000000" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<hr />
|
||||
<table>
|
||||
<tr>
|
||||
<td>第3刀正刀</td>
|
||||
<td>
|
||||
<input type="text" id="knife3_boss" placeholder="x周-y王" />
|
||||
</td>
|
||||
<td>第3刀正刀傷害</td>
|
||||
<td>
|
||||
<input type="text" id="knife3_damage" placeholder="ex: 12000000" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>第3刀殘刀</td>
|
||||
<td>
|
||||
<input type="text" id="knife3c_boss" placeholder="x周-y王" />
|
||||
</td>
|
||||
<td>第3刀殘刀傷害</td>
|
||||
<td>
|
||||
<input type="text" id="knife3c_damage" placeholder="ex: 12000000" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<hr />
|
||||
<p><button type="submit">送出</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">
|
||||
|
||||
var paramValue = "";
|
||||
var memberId = "";
|
||||
|
||||
var knife1_boss = document.getElementById("knife1_boss");
|
||||
var knife1_damage = document.getElementById("knife1_damage");
|
||||
var knife1c_boss = document.getElementById("knife1c_boss");
|
||||
var knife1c_damage = document.getElementById("knife1c_damage");
|
||||
|
||||
var knife2_boss = document.getElementById("knife2_boss");
|
||||
var knife2_damage = document.getElementById("knife2_damage");
|
||||
var knife2c_boss = document.getElementById("knife2c_boss");
|
||||
var knife2c_damage = document.getElementById("knife2c_damage");
|
||||
|
||||
var knife3_boss = document.getElementById("knife3_boss");
|
||||
var knife3_damage = document.getElementById("knife3_damage");
|
||||
var knife3c_boss = document.getElementById("knife3c_boss");
|
||||
var knife3c_damage = document.getElementById("knife3c_damage");
|
||||
|
||||
// 在页面加载完成后执行获取参数的操作
|
||||
window.onload = function () {
|
||||
// 获取名为 "param" 的参数值
|
||||
paramValue = getParameterByName('id');
|
||||
console.log(paramValue);
|
||||
|
||||
axios.get("http://127.0.0.1:10001/api/record/" + paramValue)
|
||||
.then(function (response) {
|
||||
// 在這裡處理回傳的資料
|
||||
var options = response.data;
|
||||
console.log(options);
|
||||
memberId = options.member._id;
|
||||
knife1_boss.value = options.record1.boss;
|
||||
knife1_damage.value = options.record1.damage ?? "";
|
||||
knife1c_boss.value = options.record1c.boss;
|
||||
knife1c_damage.value = options.record1.damage ?? "";
|
||||
|
||||
knife2_boss.value = options.record2.boss;
|
||||
knife2_damage.value = options.record2.damage ?? "";
|
||||
knife2c_boss.value = options.record2c.boss;
|
||||
knife2c_damage.value = options.record2c.damage ?? "";
|
||||
|
||||
knife3_boss.value = options.record3.boss;
|
||||
knife3_damage.value = options.record3.damage ?? "";
|
||||
knife3c_boss.value = options.record3c.boss;
|
||||
knife3c_damage.value = options.record3c.damage ?? "";
|
||||
})
|
||||
.catch(function (error) {
|
||||
// 處理錯誤
|
||||
console.error(error);
|
||||
});
|
||||
};
|
||||
|
||||
document.getElementById("record-form").addEventListener("submit", function (event) {
|
||||
event.preventDefault(); // 阻止表单的默认提交行为
|
||||
|
||||
// 执行登录请求
|
||||
fillRecord(
|
||||
paramValue,
|
||||
memberId,
|
||||
knife1_boss.value,
|
||||
knife1_damage.value,
|
||||
knife1c_boss.value,
|
||||
knife1c_damage.value,
|
||||
knife2_boss.value,
|
||||
knife2_damage.value,
|
||||
knife2c_boss.value,
|
||||
knife2c_damage.value,
|
||||
knife3_boss.value,
|
||||
knife3_damage.value,
|
||||
knife3c_boss.value,
|
||||
knife3c_damage.value
|
||||
);
|
||||
});
|
||||
|
||||
function getParameterByName(name) {
|
||||
// 获取 URL 中的参数部分
|
||||
var url = window.location.href;
|
||||
// 对 URL 进行解析
|
||||
var parsedUrl = new URL(url);
|
||||
// 从解析后的 URL 中获取参数值
|
||||
return parsedUrl.searchParams.get(name);
|
||||
}
|
||||
|
||||
function fillRecord(
|
||||
recordId,
|
||||
memberId,
|
||||
knife1_boss,
|
||||
knife1_damage,
|
||||
knife1c_boss,
|
||||
knife1c_damage,
|
||||
knife2_boss,
|
||||
knife2_damage,
|
||||
knife2c_boss,
|
||||
knife2c_damage,
|
||||
knife3_boss,
|
||||
knife3_damage,
|
||||
knife3c_boss,
|
||||
knife3c_damage
|
||||
) {
|
||||
// 发送登录请求
|
||||
axios.put("http://127.0.0.1:10001/api/record/" + recordId, {
|
||||
memberId: memberId,
|
||||
record1: {
|
||||
boss: knife1_boss,
|
||||
damage: parseInt(knife1_damage),
|
||||
},
|
||||
record1c: {
|
||||
boss: knife1c_boss,
|
||||
damage: parseInt(knife1c_damage),
|
||||
},
|
||||
record2: {
|
||||
boss: knife2_boss,
|
||||
damage: parseInt(knife2_damage),
|
||||
},
|
||||
record2c: {
|
||||
boss: knife2c_boss,
|
||||
damage: parseInt(knife2c_damage),
|
||||
},
|
||||
record3: {
|
||||
boss: knife3_boss,
|
||||
damage: parseInt(knife3_damage),
|
||||
},
|
||||
record3c: {
|
||||
boss: knife3c_boss,
|
||||
damage: parseInt(knife3c_damage),
|
||||
}
|
||||
})
|
||||
.then(function (response) {
|
||||
window.location.href = "./index.html";
|
||||
})
|
||||
.catch(function (error) {
|
||||
const message = error.response.data.message;
|
||||
alert("更新失敗");
|
||||
//console.error('登入失敗:', error);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
88
index.html
88
index.html
@ -1,9 +1,6 @@
|
||||
<!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>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8" />
|
||||
@ -19,26 +16,35 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
th, td {
|
||||
th,
|
||||
td {
|
||||
padding: 10px 20px;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: #000000;
|
||||
} /* 未訪問超連結 */
|
||||
}
|
||||
|
||||
/* 未訪問超連結 */
|
||||
|
||||
a:visited {
|
||||
color: #000000;
|
||||
} /* 已訪問超連結 */
|
||||
}
|
||||
|
||||
/* 已訪問超連結 */
|
||||
|
||||
a:hover {
|
||||
color: #1aff00;
|
||||
} /* 滑鼠移動到超連結上 */
|
||||
}
|
||||
|
||||
/* 滑鼠移動到超連結上 */
|
||||
|
||||
a:active {
|
||||
color: #396035;
|
||||
} /* 滑鼠點選時 */
|
||||
}
|
||||
|
||||
/* 滑鼠點選時 */
|
||||
|
||||
h1 {
|
||||
font-weight: bold;
|
||||
@ -95,10 +101,14 @@
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body id="body">
|
||||
<h1>填表系統</h1>
|
||||
<hr>
|
||||
<p>
|
||||
<a href="new.html">我要填表</a>
|
||||
</p>
|
||||
<hr>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
|
||||
<script language="javascript" type="text/javascript">
|
||||
@ -138,51 +148,43 @@
|
||||
row_1.appendChild(heading_7);
|
||||
thead.appendChild(row_1);
|
||||
// 取得刀表
|
||||
axios
|
||||
.get("http://127.0.0.1:10001/api/record")
|
||||
axios.get("http://127.0.0.1:10001/api/record", {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json'
|
||||
}
|
||||
})
|
||||
.then(function (response) {
|
||||
const data = response.data;
|
||||
console.log(data);
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
// Creating and adding data to second row of the table
|
||||
let row_2 = document.createElement("tr");
|
||||
let row_2_data_1 = document.createElement("td");
|
||||
row_2_data_1.innerHTML = data[i].member.playerName;
|
||||
let row_2_data_2 = document.createElement("td");
|
||||
if ("record1" in data[i].record) {
|
||||
row_2_data_2.innerHTML = data[i].record.record1.boss;
|
||||
} else {
|
||||
row_2_data_2.innerHTML = "";
|
||||
}
|
||||
let row_2_data_3 = document.createElement("td");
|
||||
if ("record1c" in data[i].record) {
|
||||
row_2_data_3.innerHTML = data[i].record.record1c.boss;
|
||||
} else {
|
||||
row_2_data_3.innerHTML = "";
|
||||
}
|
||||
|
||||
let row_2_data_4 = document.createElement("td");
|
||||
if ("record1" in data[i].record) {
|
||||
row_2_data_4.innerHTML = data[i].record.record2.boss;
|
||||
} else {
|
||||
row_2_data_4.innerHTML = "";
|
||||
}
|
||||
let row_2_data_5 = document.createElement("td");
|
||||
if ("record1c" in data[i].record) {
|
||||
row_2_data_5.innerHTML = data[i].record.record2c.boss;
|
||||
} else {
|
||||
row_2_data_5.innerHTML = "";
|
||||
}
|
||||
|
||||
let row_2_data_6 = document.createElement("td");
|
||||
if ("record1" in data[i].record) {
|
||||
row_2_data_6.innerHTML = data[i].record.record3.boss;
|
||||
} else {
|
||||
row_2_data_6.innerHTML = "";
|
||||
}
|
||||
let row_2_data_7 = document.createElement("td");
|
||||
if ("record1c" in data[i].record) {
|
||||
row_2_data_7.innerHTML = data[i].record.record3c.boss;
|
||||
|
||||
const item = data[i];
|
||||
|
||||
if (item.record !== null) {
|
||||
row_2_data_1.innerHTML = "<a href=\"edit.html?id=" + item.record._id + "\">" + item.member.playerName + "</a>";
|
||||
row_2_data_2.innerHTML = item.record.record1.boss;
|
||||
row_2_data_3.innerHTML = item.record.record1c.boss;
|
||||
row_2_data_4.innerHTML = item.record.record2.boss;
|
||||
row_2_data_5.innerHTML = item.record.record2c.boss;
|
||||
row_2_data_6.innerHTML = item.record.record3.boss;
|
||||
row_2_data_7.innerHTML = item.record.record3c.boss;
|
||||
} else {
|
||||
row_2_data_1.innerHTML = item.member.playerName;
|
||||
row_2_data_2.innerHTML = "";
|
||||
row_2_data_3.innerHTML = "";
|
||||
row_2_data_4.innerHTML = "";
|
||||
row_2_data_5.innerHTML = "";
|
||||
row_2_data_6.innerHTML = "";
|
||||
row_2_data_7.innerHTML = "";
|
||||
}
|
||||
|
||||
@ -195,7 +197,6 @@
|
||||
row_2.appendChild(row_2_data_7);
|
||||
tbody.appendChild(row_2);
|
||||
}
|
||||
console.log("Data: ", data);
|
||||
})
|
||||
.catch(function (error) {
|
||||
//const message = error.response.data.message;
|
||||
@ -204,4 +205,5 @@
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
41
new.html
41
new.html
@ -1,9 +1,6 @@
|
||||
<!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>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8" />
|
||||
@ -27,19 +24,27 @@
|
||||
|
||||
a:link {
|
||||
color: #000000;
|
||||
} /* 未訪問超連結 */
|
||||
}
|
||||
|
||||
/* 未訪問超連結 */
|
||||
|
||||
a:visited {
|
||||
color: #000000;
|
||||
} /* 已訪問超連結 */
|
||||
}
|
||||
|
||||
/* 已訪問超連結 */
|
||||
|
||||
a:hover {
|
||||
color: #1aff00;
|
||||
} /* 滑鼠移動到超連結上 */
|
||||
}
|
||||
|
||||
/* 滑鼠移動到超連結上 */
|
||||
|
||||
a:active {
|
||||
color: #396035;
|
||||
} /* 滑鼠點選時 */
|
||||
}
|
||||
|
||||
/* 滑鼠點選時 */
|
||||
|
||||
h1 {
|
||||
font-weight: bold;
|
||||
@ -96,6 +101,7 @@
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body id="body">
|
||||
<form id="record-form">
|
||||
<table>
|
||||
@ -223,7 +229,7 @@
|
||||
});
|
||||
|
||||
axios
|
||||
.get("http://127.0.0.1:10001/api/member")
|
||||
.get("http://127.0.0.1:10001/api/member/not_leave")
|
||||
.then(function (response) {
|
||||
// 在這裡處理回傳的資料
|
||||
var options = response.data;
|
||||
@ -264,27 +270,27 @@
|
||||
.post("http://127.0.0.1:10001/api/record/" + memberId, {
|
||||
record1: {
|
||||
boss: knife1_boss,
|
||||
damage: knife1_damage,
|
||||
damage: parseInt(knife1_damage),
|
||||
},
|
||||
record1c: {
|
||||
boss: knife1c_boss,
|
||||
damage: knife1c_damage,
|
||||
damage: parseInt(knife1c_damage),
|
||||
},
|
||||
record2: {
|
||||
boss: knife2_boss,
|
||||
damage: knife2_damage,
|
||||
damage: parseInt(knife2_damage),
|
||||
},
|
||||
record2c: {
|
||||
boss: knife2c_boss,
|
||||
damage: knife2c_damage,
|
||||
damage: parseInt(knife2c_damage),
|
||||
},
|
||||
record3: {
|
||||
boss: knife3_boss,
|
||||
damage: knife3_damage,
|
||||
damage: parseInt(knife3_damage),
|
||||
},
|
||||
record3c: {
|
||||
boss: knife3c_boss,
|
||||
damage: knife3c_damage,
|
||||
damage: parseInt(knife3c_damage),
|
||||
}
|
||||
})
|
||||
.then(function (response) {
|
||||
@ -292,10 +298,11 @@
|
||||
})
|
||||
.catch(function (error) {
|
||||
const message = error.response.data.message;
|
||||
alert("登入失敗");
|
||||
alert("新增失敗");
|
||||
//console.error('登入失敗:', error);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user