关于web前端通过js获取后端mysql数据库数据的一个方法
问题引入
关于html的教程很多,关于mysql的教程也很多,那么怎么让html展示mysql的数据呢?
一言以蔽之
前端通过js向后端发起一个http请求,后端响应这个请求并返回数据
实现
js代码
// 使用 fetch 发起 GET 请求
fetch('http://127.0.0.1:3000/api/login', {
method: 'POST',
headers: {
'Content-type': 'application/json'
},
body: JSON.stringify(data) //data是传递给后端的数据
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
// 处理从服务器获取到的数据
console.log(data);
if(data.status == false){
Error.innerHTML = "username not exists or password wrong";
}
else{
alert("success!");
}
})
.catch(error => {
// 处理请求错误
console.error('Error:', error);
});
后端nodejs代码
//登陆
app.post('/api/login', (req, res) => {
const data = req.body;
//这个pool是创建的mysql连接池,这里没展出来,不懂可以百度如何创建
pool.query('select * from users where username = ?',[data.username], (error,results) => {
if (error) {
console.error('Error querying database:', error);
res.status(500).send('Internal Server Error');
return;
}
console.log(results);
if(results.length == 0){
res.json({status: false});
}
else{
if(results[0].password != data.password){
res.json({status: false});
}
else{
res.json({status: true,id:results[0].id});
}
}
})
});
逻辑解释
前端js使用fetch方法向后端发送一个http请求,请求里面可以携带一些数据,然后后端nodejs通过前端发来的http信息来访问服务端数据库响应请求,并返回数据给前端。
什么是nodejs?
你可以把它理解成一个运行在服务器端的脚本,负责响应请求,就像饭店的厨师,而js就像前台负责给顾客点菜的人
nodejs怎么运行?
这个网上教程很多,得现在服务器端安装一下node,npm啥的(好像是一起的)
说明
向后端发送请求的方法不止这一个,但是这个还算比较简洁
有什么问题可以直接私信我