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

说明

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

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

相关推荐
发现你走远了1 分钟前
『VUE』elementUI dialog的子组件created生命周期不刷新(详细图文注释)
javascript·vue.js·elementui
22508249072 分钟前
【无标题】
javascript·vue.js·elementui
音仔小瓜皮3 分钟前
【bug记录10】同一iOS webview页面中相同的两个svg图标出现部分显示或全部不显示的情况
前端·bug·html5·xhtml·webview
漫天转悠10 分钟前
MySQL 中字符类型长度为什么推荐 2 的次方数大小?
数据库·mysql
漫天转悠14 分钟前
MySQL的DELETE(删除数据)详解
数据库·mysql
涔溪18 分钟前
css3弹性布局
前端·css·css3
无敌岩雀29 分钟前
深入探讨 Redis 持久化机制:原理、配置与优化策略
数据库·redis
Array[赵]31 分钟前
npm 最新国内淘宝镜像地址源 (旧版已不能用)
前端·npm·node.js
于慨33 分钟前
pnpm报错如Runing this command will add the dependency to the workspace root所示
前端·npm
NiJiMingCheng40 分钟前
Python爬取豆瓣电影全部分类数据并存入数据库
数据库·数据仓库·python·网络爬虫