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

说明

向后端发送请求的方法不止这一个,但是这个还算比较简洁
有什么问题可以直接私信我

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/189087.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

springboot参数汇总

multipart multipart.enabled 开启上传支持(默认:true) multipart.file-size-threshold: 大于该值的文件会被写到磁盘上 multipart.location 上传文件存放位置 multipart.max-file-size最大文件大小 multipart.max-request-size 最大请求…

2024年甘肃省职业院校技能大赛中职组 电子与信息类“网络安全”赛项竞赛样题-B卷

2024 年甘肃省职业院校技能大赛中职组 电子与信息类“网络安全”赛项竞赛样题-B卷 2024 年甘肃省职业院校技能大赛中职组 电子与信息类“网络安全”赛项竞赛样题-B卷A 模块基础设施设置/安全加固(200 分)A-1:登录安全加固(Windows…

Hdoop学习笔记(HDP)-Part.4 基础环境配置

四、基础环境配置 1.SSH免密登录 在hdp01、hdp02上生成公钥,配置免密登录到其他节点 ssh-keygen -t rsa -f ~/.ssh/id_rsa -C username_root ssh-copy-id -i ~/.ssh/id_rsa.pub -p 22 root192.168.111.201 ssh-copy-id -i ~/.ssh/id_rsa.pub -p 22 root192.168.1…

点云从入门到精通技术详解100篇-基于三维点云的工件曲面轮廓检测与机器人打磨轨迹规划(中)

目录 2.2.2 散乱点云滤波去噪 2.2.3 海量点云数据压缩 2.3 点云采集与预处理实验

智能安防无人机——一种安防巡检新方案

在高新技术的推动下,安防无人机在监控、巡逻等领域的使用频率越来越高,逐渐成为安防救援的重要帮手。安防无人机作为城市安全应急保障体系的重要组成部分,在未来将变得不可或缺。 一、安防无人机的定义及构成 复亚智能无人机全自主巡飞系统由…

系列十六、SpringBoot内置web服务器为Tomcat原理分析

一、概述 作为Spring家族的明星产品,SpringBoot极大地简化了程序员的日常开发,提高了开发效率。我们很容易得借助于SpringBoot就可以快速开发业务代码,不知道大家有没有思考过,当我们在idea中创建了一个SpringBoot项目&#xff0c…

Linux 权限管理

1 Linux 安全模型 AAA认证资源分派: 当用户登录时,系统会自动分配令牌 token,包括用户标识和组成员等等信息 1.1 用户 Linux 中每个用户是通过 User ID(UID)来唯一标识的。 1.2 用户组 Linux 中可以将一个或者多个…

详解Linux常用命令

目录 1. ps 命令 2. top 命令 3. grep 命令 4. df 命令 5. tail 命令 6. head 命令 7. cat 命令 8. --help 和 man 命令 9. cd 命令 10. mkdir 命令 11. rm 命令 12. mv 和 cp 命令 13. touch 命令 14. vi 或 vim 命令 15. chmod 修改权限 16. 打包和压缩文件 …

【开源视频联动物联网平台】j2mod 库写一个Modbus TCP 服务器

j2mod 是一个用于 Modbus 通信协议的 Java 库,可以用来创建 Modbus TCP 服务器。以下是一个简单的示例代码,演示如何使用 j2mod 创建一个 Modbus TCP 服务器。 首先,确保你已经添加 j2mod 库到你的项目中。你可以从 j2mod 的官方网站&#x…

LINUX 嵌入式C编程--信号编程

基本概念 信号是事件发生时对进程的通知机制,也可以把它称为软件中断。信号与硬件中断的相似之处在于能够打断程序当前执行的正常流程,其实是在软件层次上对中断机制的一种模拟。信号提供了一种处理异步事件的方法。 信号目的 **信号的目的是用来通信…

linux里source、sh、bash、./有什么区别

1、source source a.sh 在当前shell内去读取、执行a.sh,而a.sh不需要有"执行权限" source命令可以简写为"." . a.sh 注意:中间是有空格的。 2、sh/bash sh a.sh bash a.sh 都是打开一个subshell去读取、执行a.sh,而a.…

IntelliJ IDEA创建springboot项目时不能选择java8的问题解决方案

最近博主也有创建springboot项目,发现了IntelliJ IDEA在通过Spring Initilizer初始化项目的时候已经没有java8版本的选项了。 基于这个问题,有了这篇文章的分享,希望能够帮助大家克服这个困难。 如图,现在创建springboot项目的时…

C++ 传递指针给函数

C 允许您传递指针给函数&#xff0c;只需要简单地声明函数参数为指针类型即可。 下面的实例中&#xff0c;我们传递一个无符号的 long 型指针给函数&#xff0c;并在函数内改变这个值&#xff1a; #include <iostream> #include <ctime>using namespace std;// 在…

现代化工安全保障迎来巡查无人机新时代

当今现代化工企业呈现出规模不断扩大&#xff0c;设备逐渐趋向大型化的局面&#xff0c;由此导致化工安全生产面临日益严峻的挑战。然而&#xff0c;随着巡查无人机技术的成熟&#xff0c;这种新的高效手段正在提高化工安全检测的工作效率。 一、传统化工安全巡检存在弊端 化工…

了解 ignore_above 参数对 Elasticsearch 中磁盘使用的影响

在 Elasticsearch 中&#xff0c;ignore_above 参数允许你忽略&#xff08;而不是索引&#xff09;长于指定长度的字符串。 这对于限制字段的大小以避免性能问题很有用。 在本文中&#xff0c;我们将探讨 “ignore_above” 参数如何影响 Elasticsearch 中字段的大小&#xff0c…

Django-Redis

NoSQL&#xff1a;(不支持sql语句) Redis MongoDB Hbase hadoop Cassandra hadoop key-value数据库&#xff08;非关系性数据库&#xff09; redis优势 性能高&#xff0c;读取速度快&#xff0c;存在内存中 Redis应用场景 用来做缓存 在某些特定场景下替代传统数据库---社交…

SqlServer_分页_OFFSET_FETCH

使用SQL server分页 使用SQL server分页的时候踩了一个坑&#xff1a; 用mybatis-plus分页的时候始终报错 代码&#xff1a;Page<SystemDictCatalog> page new Page<>(data.getPage(), data.getLimit()); QueryWrapper<SystemDictCatalog> wrapper new Qu…

python接口自动化之allure报告优化,并且教你用后缀为bat文件执行pytest指令,来运行用例

1.定制化标签 使用方法参数值参数说明allure.epic()项目名称敏捷里面的概念&#xff0c;定义史诗&#xff0c;往下是featureallure.feature()模块名称功能点的描述&#xff0c;往下是storyallure.story()接口名称用户故事&#xff0c;往下是titleallure.title(用例的标题)用例…

matlab 路面裂缝检测识别系统设计GUI

1、内容简介 略 23-可以交流、咨询、答疑 2、内容说明 路面裂缝检测识别系统设计GUI 基于matlab的GUI设计路面裂缝检测识别系统 matlab、GUI、直方图、裂缝检测、二值化 3、仿真分析 4、参考论文 略 链接&#xff1a;https://pan.baidu.com/s/1AAJ_SlHseYpa5HAwMJlk…

电话号码的字母组合(C++实现)

电话号码的字母组合 题目代码思路及代码讲解代码&#xff08;有注释版&#xff09; 题目 电话号码的字母组合 代码 class Solution {const char* numsStrArr[10]{"","","abc","def","ghi","jkl","mno"…