准备工作
npm下载express和mysql模块
- npm init -y
- npm i express
- npm i mysql
目标
实现对数据库的增加与查询功能
结构
创建server.js文件
使用node开启3000端口的服务器,并创建测试接口
const express = require('express')
const app = express()
app.use('/api/test', (req, res) => {
res.json('测试接口')
})
app.listen(3000, () => {
console.log('3000端口就绪');
})
测试结果
MySQL操作
在MySQL中创建名为stu的新表
在表中添加数据
创建/my/sql.js 文件并连接MySQL以及导出模块
// 1. 加载mysql
const mysql = require('mysql');
// 2. 创建连接对象
const connection = mysql.createConnection({
// 对象的属性名字不能改变
host: 'localhost', //本次连接的数据库地址
port: 3306, //端口号
user: 'root', //数据库账号
password: 'root', //数据库密码
database: 'node' //数据库名
});
// 3. 连接到MySQL服务器
connection.connect((err) => {
// 如果有错误对象,表示连接失败
if (err) return console.log('数据库连接失败')
// 没有错误对象提示连接成功
console.log('mysql数据库连接成功')
});
//导出connection模块
module.exports = connection
注意host port user password database的填写正确
测试connection模块 与 MySQL的交互功能
sql.js同目录下新建testsql.js
//导入模块
const connection = require('./sql')
let sql = 'select * from stu';
connection.query(sql, (err, result) => {
if (err) {
console.log('错误', err)
} else {
// 做添加,result是一个对象,其中有一个属性affectedRows
// 表示本次操作之后,影响的行数
console.log(result); // result就是查询结果
}
});
cmd运行testsql.js返回结果
mysql数据库连接成功
[
RowDataPacket { Id: 1, name: '张三', age: '18' },
RowDataPacket { Id: 2, name: '李四', age: '20' },
RowDataPacket { Id: 3, name: '王五', age: '22' }
]
回到server.js中编写接口代码
查询
app.get('/api', (req, res) => {
let sql = 'select * from stu';
connection.query(sql, (err, result) => {
if (err) {
console.log('错误', err)
} else {
// 做添加,result是一个对象,其中有一个属性affectedRows
// 表示本次操作之后,影响的行数
// console.log(result); // result就是查询结果
res.json(result)
}
});
})
增加
app.post('/api', (req, res) => {
// insert into 表名(字段名1,字段名2,....) values (值1,值2,....)
// let sql = 'insert into stu (name , age) values("小丽" , 18)';
let { name, age } = req.body
let sql = `insert into stu (name , age) values('${name}' , ${age})`
connection.query(sql, (err, result) => {
if (err) {
console.log('错误', err)
} else {
// 做添加,result是一个对象,其中有一个属性affectedRows
// 表示本次操作之后,影响的行数
// console.log(result); // result就是查询结果
res.json(result)
}
});
})
修改
app.put('/api', (req, res) => {
//通过id修改name和age属性值
let { name, age, id } = req.body
// update 表名 set 字段1=值1, 字段2=值2,... where 修改条件
let sql = `update stu set name='${name}' , age=${age} where id=${id}`
connection.query(sql, (err, result) => {
if (err) {
console.log('错误', err)
} else {
// 做添加,result是一个对象,其中有一个属性affectedRows
// 表示本次操作之后,影响的行数
// console.log(result); // result就是查询结果
res.json(result)
}
});
})
删除
app.delete('/api', (req, res) => {
//通过id删除
let { id } = req.body
// delete from 表名 where 删除条件
let sql = `delete from stu where id=${id}`;
connection.query(sql, (err, result) => {
if (err) {
console.log('错误', err)
} else {
// 做添加,result是一个对象,其中有一个属性affectedRows
// 表示本次操作之后,影响的行数
// console.log(result); // result就是查询结果
res.json(result)
}
});
})
编写H5内容实现数据可视化
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr> -->
</tbody>
</table>
<div class="Get">
<input type="button" value="GET" id="getBtn">
</div>
<div class="Post">
<form action="" id="postForm" method="post">
<input type="text" name="name" value="">
<input type="number" name="age" value="">
<button type="submit">POST</button>
</form>
</div>
<div class="Put">
<form action="" id="putForm" method="api">
<input type="text" name="name">
<input type="text" name="age">
<button type="submit">PUT</button>
</form>
</div>
获取数据填入表格
document.getElementById('getBtn').onclick = function () {
dataGet()
}
//获取数据
function dataGet() {
//1.创建 xhr 对象
let xhr = new XMLHttpRequest()
//2.设置监听事件
xhr.onreadystatechange = function () {
document.querySelector('tbody').innerHTML = ''
// console.log(xhr);
if (xhr.readyState === 4 && xhr.status === 200) {
// console.log(xhr.responseText)
// console.log(JSON.parse(xhr.response));
JSON.parse(xhr.responseText).forEach(item => {
//创建tr元素
let tr = document.createElement('tr')
//设置每个tr的data-id属性,方便创建事件
tr.setAttribute('data-id', item.Id)
//设置tr内容
tr.innerHTML =
`<td>${item.Id}</td><td>${item.name}</td><td>${item.age}</td>`
//添加到tbody中
document.querySelector('tbody').appendChild(tr)
});
}
}
//3.open方法 设置请求方式和url
xhr.open('GET', '/api')
//4.send方法,发送请求
xhr.send()
}
dataGet()
双击删除数据
//删除数据 双击
document.querySelector('tbody').addEventListener('dblclick', function (e) {
// console.log(e.target.parentNode.parentNode.getAttribute('data-id'));
let id = e.target.parentNode.getAttribute('data-id')
//1.创建 xhr 对象
let xhr = new XMLHttpRequest()
//2.设置监听事件
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// console.log(xhr.responseText)
console.log('删除成功');
dataGet()
}
}
//3.open方法 设置请求方式和url
xhr.open('delete', '/api?id=' + id)
//4.send方法,发送请求
xhr.send()
})
添加数据
//添加数据
document.getElementById('postForm').onsubmit = function (e) {
e.preventDefault()
let name = this.elements[0].value
let age = +this.elements[1].value
//1.创建 xhr 对象
let xhr = new XMLHttpRequest()
//2.设置监听事件
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// console.log(xhr.responseText)
console.log('添加成功');
dataGet()
}
}
//3.open方法 设置请求方式和url
xhr.open('post', '/api' + '?name=' + name + '&age=' + age)
//4.send方法,发送请求
xhr.send()
this.elements[0].value = ''
this.elements[1].value = ''
}
修改数据
略