211 lines
7.4 KiB
HTML
211 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>DB3</title>
|
|
</head>
|
|
<body>
|
|
<div class="outerWrapper">
|
|
<div class="result">
|
|
<span class="title">结果显示列表:</span>
|
|
<textarea readonly></textarea>
|
|
</div>
|
|
<div class="functions">
|
|
<span>输入家庭地址:</span>
|
|
<div class="search">
|
|
<input type="text">
|
|
<button>查询</button>
|
|
</div>
|
|
<div class="buttons">
|
|
<button class="update">修改</button>
|
|
<button class="insert">插入</button>
|
|
<button class="delete">删除</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="updateModal modal">
|
|
<div class="inputs">
|
|
<input type="number" placeholder="SNO" required>
|
|
<input type="text" placeholder="SNAME">
|
|
<input type="text" placeholder="SSEX">
|
|
<input type="number" placeholder="SAGE">
|
|
<input type="text" placeholder="SADDR">
|
|
<button class="update confirm">确认修改</button>
|
|
</div>
|
|
</div>
|
|
<div class="insertModal modal">
|
|
<div class="inputs">
|
|
<input type="number" placeholder="SNO" required>
|
|
<input type="text" placeholder="SNAME">
|
|
<input type="text" placeholder="SSEX">
|
|
<input type="number" placeholder="SAGE">
|
|
<input type="text" placeholder="SADDR">
|
|
<button class="insert confirm">确认插入</button>
|
|
</div>
|
|
</div>
|
|
<div class="deleteModal modal">
|
|
<div class="inputs">
|
|
<input type="number" placeholder="SNO" required>
|
|
<button class="delete confirm">确认插入</button>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
html,body {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
div.outerWrapper {
|
|
position: absolute;
|
|
width: 1000px;
|
|
height: 500px;
|
|
top: 45%;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding: 15px;
|
|
border: 1px solid black;
|
|
}
|
|
div.result {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
textarea {
|
|
width: 300px;
|
|
height: 400px;
|
|
resize: none;
|
|
outline: none;
|
|
text-align: center;
|
|
}
|
|
div.functions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
div.modal {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgb(0, 0, 0, 0.6);
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
div.inputs {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
div.inputs input {
|
|
padding: 8px;
|
|
margin: 5px;
|
|
}
|
|
</style>
|
|
<script>
|
|
const search = (saddr) => { //查询函数 用于请求接口后将结果设置到textarea中
|
|
const result = document.querySelector("textarea")
|
|
fetch(`select?saddr=${saddr}`).then(res => res.json()).then(res => {
|
|
console.log(res)
|
|
let text = "" //最终放入textarea中
|
|
for (let row of res) {
|
|
text += `${row.SNO} ${row.SNAME} ${row.SSEX} ${row.SAGE} ${row.SADDR}\n`
|
|
}
|
|
result.textContent = text
|
|
})
|
|
}
|
|
const update = () => { //修改函数 修改成功后自动关闭遮罩并重新查询
|
|
const updateModelInputs = document.querySelectorAll("div.updateModal input")
|
|
const sno = updateModelInputs[0].value
|
|
const sname = updateModelInputs[1].value
|
|
const ssex = updateModelInputs[2].value
|
|
const sage = updateModelInputs[3].value
|
|
const saddr = updateModelInputs[4].value
|
|
fetch(`update?sno=${sno}&sname=${sname}&ssex=${ssex}&sage=${sage}&saddr=${saddr}`).then(res => res.json()).then(res => {
|
|
console.log(res)
|
|
updateModal.style.display = "none"
|
|
search("")
|
|
})
|
|
}
|
|
const insert = () => { //插入函数 插入成功后自动关闭遮罩并重新查询
|
|
const insertModelInputs = document.querySelectorAll("div.insertModal input")
|
|
const sno = insertModelInputs[0].value
|
|
const sname = insertModelInputs[1].value
|
|
const ssex = insertModelInputs[2].value
|
|
const sage = insertModelInputs[3].value
|
|
const saddr = insertModelInputs[4].value
|
|
fetch(`insert?sno=${sno}&sname=${sname}&ssex=${ssex}&sage=${sage}&saddr=${saddr}`).then(res => res.json()).then(res => {
|
|
console.log(res)
|
|
insertModal.style.display = "none"
|
|
search("")
|
|
})
|
|
}
|
|
const Delete = () => { //删除函数 删除成功后自动关闭遮罩并重新查询
|
|
const deleteModelInputs = document.querySelectorAll("div.deleteModal input")
|
|
const sno = deleteModelInputs[0].value
|
|
fetch(`delete?sno=${sno}`).then(res => res.json()).then(res => {
|
|
console.log(res)
|
|
deleteModal.style.display = "none"
|
|
search("")
|
|
})
|
|
}
|
|
const searchButton = document.querySelector("div.search button")
|
|
searchButton.addEventListener("click", () => {
|
|
const saddr = document.querySelector("div.search input").value //用户输入的地址
|
|
search(saddr)
|
|
})
|
|
|
|
const updateModal = document.querySelector("div.updateModal") //修改 遮罩
|
|
updateModal.addEventListener("click", (e) => {
|
|
if (e.target == updateModal) { //点击遮罩边缘，关闭遮罩
|
|
e.target.style.display = "none" //display设置为none实现隐藏
|
|
}
|
|
})
|
|
const insertModal = document.querySelector("div.insertModal") //插入 遮罩
|
|
insertModal.addEventListener("click", (e) => {
|
|
if (e.target == insertModal) {
|
|
e.target.style.display = "none"
|
|
}
|
|
})
|
|
const deleteModal = document.querySelector("div.deleteModal") //插入 遮罩
|
|
deleteModal.addEventListener("click", (e) => {
|
|
if (e.target == deleteModal) {
|
|
e.target.style.display = "none"
|
|
}
|
|
})
|
|
const updateButton = document.querySelector("button.update") //修改 按钮
|
|
updateButton.addEventListener("click", () => { //开启遮罩updateModal
|
|
updateModal.style.display = "flex"
|
|
})
|
|
const insertButton = document.querySelector("button.insert") //插入 按钮
|
|
insertButton.addEventListener("click", () => {
|
|
insertModal.style.display = "flex"
|
|
})
|
|
const updateConfirmButton = document.querySelector("button.update.confirm")
|
|
updateConfirmButton.addEventListener("click", (e) => { //确认修改
|
|
update()
|
|
})
|
|
const insertConfirmButton = document.querySelector("button.insert.confirm")
|
|
insertConfirmButton.addEventListener("click", (e) => { //确认修改
|
|
insert()
|
|
})
|
|
const deleteButton = document.querySelector("button.delete") //删除 按钮
|
|
deleteButton.addEventListener("click", () => {
|
|
deleteModal.style.display = "flex"
|
|
})
|
|
const deleteConfirmButton = document.querySelector("button.delete.confirm")
|
|
deleteConfirmButton.addEventListener("click", (e) => { //确认删除
|
|
Delete()
|
|
})
|
|
</script> |