init
This commit is contained in:
wuuconix
commit
784234ddf4
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
node_modules/
|
||||
34
README.md
Normal file
34
README.md
Normal file
@ -0,0 +1,34 @@
|
||||
# DBForAutumn
|
||||
<!--
|
||||
建立数据库文件
|
||||
|
||||
```sql
|
||||
sqlite3 student.db
|
||||
```
|
||||
|
||||
创建数据表
|
||||
|
||||
```sql
|
||||
CREATE TABLE S(
|
||||
SNO INT PRIMARY KEY NOT NULL,
|
||||
SNAME TEXT NOT NULL,
|
||||
SSEX TEXT NOT NULL,
|
||||
SAGE INT,
|
||||
SADDR TEXT
|
||||
);
|
||||
```
|
||||
|
||||
插入数据
|
||||
|
||||
```sql
|
||||
INSERT INTO S VALUES (95001, "张三", "男", 18, "北京"),
|
||||
(95002, "李四", "男", 19, "南京"),
|
||||
(95003, "王五", "男", 18, "威海");
|
||||
``` -->
|
||||
|
||||
程序运行
|
||||
|
||||
```
|
||||
npm i
|
||||
node index.js
|
||||
```
|
||||
BIN
db/student.db
Normal file
BIN
db/student.db
Normal file
Binary file not shown.
80
index.js
Normal file
80
index.js
Normal file
@ -0,0 +1,80 @@
|
||||
const express = require('express')
|
||||
const sqlite3 = require("sqlite3").verbose()
|
||||
const app = express()
|
||||
|
||||
const db = new sqlite3.Database("db/student.db")
|
||||
|
||||
app.get('/', function (req, res) { //根路由返回index.html前端文件
|
||||
res.setHeader('Content-Type', 'text/html')
|
||||
res.sendFile(`${__dirname}/static/index.html`)
|
||||
})
|
||||
app.get('/select', (req, response) => { //查询
|
||||
const saddr = req.query.saddr ?? ""
|
||||
console.log(saddr)
|
||||
if (saddr) {
|
||||
db.all(`select * from S where SADDR = '${saddr}';`, (e, res) => {
|
||||
console.log(res)
|
||||
response.json(res)
|
||||
})
|
||||
} else {
|
||||
db.all(`select * from S;`, (e, res) => {
|
||||
console.log(res)
|
||||
response.json(res)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
app.get('/update', (req, res) => { //修改
|
||||
const sno = req.query.sno
|
||||
const sname = req.query.sname
|
||||
const ssex = req.query.ssex
|
||||
const sage = req.query.sage
|
||||
const saddr = req.query.saddr
|
||||
if (sno) {
|
||||
db.run(`update S set SNAME = '${sname}', SSEX = '${ssex}', SAGE = ${sage}, SADDR = '${saddr}' where SNO = ${sno};`, (e) => {
|
||||
if (!e) {
|
||||
res.json({success: "更新成功"})
|
||||
} else {
|
||||
res.json({err: e.toString()})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
res.json({err: "sno is required"})
|
||||
}
|
||||
})
|
||||
|
||||
app.get('/insert', (req, res) => { //插入
|
||||
const sno = req.query.sno
|
||||
const sname = req.query.sname
|
||||
const ssex = req.query.ssex
|
||||
const sage = req.query.sage
|
||||
const saddr = req.query.saddr
|
||||
if (sno) {
|
||||
db.run(`insert into S values(${sno}, '${sname}', '${ssex}', ${sage}, '${saddr}')`, (e) => {
|
||||
if (!e) {
|
||||
res.json({success: "插入成功"})
|
||||
} else {
|
||||
res.json({err: e.toString()})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
res.json({err: "sno is required"})
|
||||
}
|
||||
})
|
||||
|
||||
app.get('/delete', (req, res) => { //删除
|
||||
const sno = req.query.sno
|
||||
if (sno) {
|
||||
db.run(`delete from S where SNO = ${sno}`, (e) => {
|
||||
if (!e) {
|
||||
res.json({success: "删除成功"})
|
||||
} else {
|
||||
res.json({err: e.toString()})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
res.json({err: "sno is required"})
|
||||
}
|
||||
})
|
||||
app.listen(3000)
|
||||
console.log("程序运行在 http://127.0.0.1:3000")
|
||||
3014
package-lock.json
generated
Normal file
3014
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
24
package.json
Normal file
24
package.json
Normal file
@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "dbforautumn",
|
||||
"version": "1.0.0",
|
||||
"description": "给浩天做的数据库实验三",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/wuuconix/DBForAutumn.git"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"bugs": {
|
||||
"url": "https://github.com/wuuconix/DBForAutumn/issues"
|
||||
},
|
||||
"homepage": "https://github.com/wuuconix/DBForAutumn#readme",
|
||||
"dependencies": {
|
||||
"express": "^4.18.1",
|
||||
"sqlite3": "^5.0.8"
|
||||
}
|
||||
}
|
||||
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>
|
||||
Loading…
x
Reference in New Issue
Block a user