wuuconix/DBForAutum
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
wuuconix 2022-06-02 08:46:12 +08:00
commit 784234ddf4
7 changed files with 3364 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
node_modules/

34
README.md Normal file
View 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
View File

Binary file not shown.

80
index.js Normal file
View 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
View File

File diff suppressed because it is too large Load Diff

24
package.json Normal file
View 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
View 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>