init
This commit is contained in:
wuuconix
211
static/index.html
Normal file
211
static/index.html
Normal file
@@ -0,0 +1,211 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user