关于web前端通过js获取后端mysql数据库数据的一个方法

关于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啥的(好像是一起的)

说明

向后端发送请求的方法不止这一个,但是这个还算比较简洁

有什么问题可以直接私信我

相关推荐
Martin -Tang29 分钟前
vite和webpack的区别
前端·webpack·node.js·vite
迷途小码农零零发30 分钟前
解锁微前端的优秀库
前端
PGCCC33 分钟前
【PGCCC】Postgresql 存储设计
数据库·postgresql
王解1 小时前
webpack loader全解析,从入门到精通(10)
前端·webpack·node.js
老码沉思录1 小时前
写给初学者的React Native 全栈开发实战班
javascript·react native·react.js
我不当帕鲁谁当帕鲁1 小时前
arcgis for js实现FeatureLayer图层弹窗展示所有field字段
前端·javascript·arcgis
那一抹阳光多灿烂2 小时前
工程化实战内功修炼测试题
前端·javascript
放逐者-保持本心,方可放逐2 小时前
微信小程序=》基础=》常见问题=》性能总结
前端·微信小程序·小程序·前端框架
码上一元2 小时前
SpringBoot自动装配原理解析
java·spring boot·后端
PcVue China2 小时前
PcVue + SQL Grid : 释放数据的无限潜力
大数据·服务器·数据库·sql·科技·安全·oracle