web前端全系列 教程
1839个小节阅读:2243k
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
index.html
xxxxxxxxxx
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 600px;
margin: 50px auto;
}
table {
width: 100%;
text-align: center;
}
table thead th {
background-color: #aaa;
}
table tbody td {
background-color: #eee;
padding: 5px
}
form {
margin-bottom: 50px;
text-align: center;
}
input {
margin-bottom: 15px;
}
button {
margin-left: 10px
}
</style>
</head>
<body>
<div class="container">
<!-- 新增数据的表单 -->
<form id="form1" action="http://localhost:3030/add" method="post">
名称:<input type="text" name="name"><br />
数量:<input type="text" name="value"><br />
<input type="submit" value="提交" />
</form>
<!-- 查询数据的输入框 -->
<input type="text" placeholder="请输入搜索的名称" id="name">
<button onclick="onGetList()">搜索</button>
<!-- 展示数据的列表 -->
<table>
<thead>
<th>名称</th>
<th>数量</th>
<th>操作</th>
</thead>
<tbody>
</tbody>
</table>
</div>
<script>
// 获取数据
var onGetList = function () {
// 获取tbody
var tbody = document.querySelector('tbody')
// 获取搜索框里面的内容
const name = document.querySelector('#name').value
// 发送获取数据的请求
fetch('/getlist?name=' + name).then(function (data) {
data.json().then(function (result) {
tbody.innerHTML = null
// 遍历返回的数据,生成每一行数据
result.records.forEach(function (item) {
var tr = document.createElement('tr')
tr.innerHTML = '<td>' + item.name + '</td>' + '<td>' + item.value + '</td>'
var td = document.createElement('td')
var button = document.createElement('button')
button.innerHTML = '删除'
// 点击删除
button.onclick = function () {
remove(item)
}
td.append(button)
tr.appendChild(td)
tbody.appendChild(tr)
})
})
})
}
// 删除数据
function remove(item) {
// 发送请求,并传递要删除数据的id
fetch('/remove', { method: 'POST', body: JSON.stringify({ id: item.id }), headers: { 'Content-Type': 'application/json' } }).then(function (data) {
console.log(data)
data.json().then(function (result) {
console.log('成功')
onGetList()
})
})
}
window.onload = function () {
onGetList()
}
</script>
</body>
</html>
mysql.js
xxxxxxxxxx
var mysql = require('mysql');
const sqlConfig = {
host: 'localhost',
user: 'root',
password: '',
database: 'test'
}
let connection = mysql.createConnection(sqlConfig)
const sqlFn = function (sql, arr, callback) {
connection.query(sql, arr, callback)
}
module.exports = sqlFn
server.js
xxxxxxxxxx
const http=require('http')
const router=require('./router')
http.createServer(function(req,res){
router(req,res)
}).listen('3030')
router.js
xxxxxxxxxx
const sqlFn = require('./index')
const url = require('url')
const querystring = require('querystring')
const fs = require('fs')
module.exports = (req, res) => {
const { pathname, query } = url.parse(req.url, true)
console.log(req.method)
if (req.method == 'POST') {
let params = ''
req.on('data', (chunk) => {
params += chunk
})
req.on('end', () => {
console.log(params)
let postParams = querystring.parse(params)
if (req.headers['content-type'] == 'application/json') {
postParams = JSON.parse(params)
}
// 处理新增数据的请求
if (pathname == '/add') {
sqlFn('insert into test(id,name,value) values (null,?,?) ', [postParams.name, postParams.value], (results) => {
if (results.affectedRows) {
res.writeHead(200, { "Content-Type": 'application/json;charset=utf-8' })
res.end(JSON.stringify({ code: 0, message: '操作成功' }))
}
})
}
//处理删除请求
if (pathname == '/remove') {
console.log(postParams)
sqlFn('delete from test where id=? ', [postParams.id], (results) => {
if (results.affectedRows) {
console.log('删除成功')
res.writeHead(200, { "Content-Type": 'application/json;charset=utf-8' })
res.end(JSON.stringify({ code: 0, message: '操作成功' }))
}
})
}
})
}
if (req.method == 'GET') {
// 处理获取数据请求
if (pathname == '/getlist') {
sqlFn(`select * from test where ${query.name ? 'name=?' : 'name is not null'}`, [query.name], (results) => {
console.log(results)
res.writeHead(200, { "Content-Type": 'application/json;charset=utf-8' })
res.write(JSON.stringify({ code: 0, records: results }))
res.end()
})
}
//处理获取html页面请求
if (pathname == '/index.html') {
res.writeHead(200, { "Content-Type": 'text/html;charset=utf8' })
fs.readFile('./index.html', (err, data) => {
res.end(data)
})
}
}
}