【原生js案例】前端封装ajax请求及node连接 MySQL获取真实数据

上篇文章,我们封装了ajax方法来请求后端数据,这篇文章将介绍如何使用 Node.js 来连接 MySQL,并对数据库进行操作。

实现效果

代码实现

  • 后端接口处理
const express = require("express");
const connection = require("../data/index");
const router = express.Router();
const { proxy } = require("../utils");
const names = ["张三", "李四", "王五", "赵六"];

router.get("/", (req, res) => {
  res.send("Hello World!");
});

router.post("/form", (req, res) => {
  const { name, pwd } = req.body;
  if (names.includes(name)) {
    return res.json({
      code: 1,
      data: {
        name: "该用户名已经注册啦",
        pwd: "",
      },
    });
  } else {
    return res.json({
      code: 0,
      data: {
        name: "可以注册啦",
        pwd: "",
      },
    });
  }
  connection.end();
});

router.get("/song-list", async (req, res) => {
  const sql = "select * from music_list";
  try {
    const data = await proxy(connection, sql);
    return res.json({ code: 0, data });
  } catch (error) {
    return res.json({ code: 1, msg: "获取数据失败" });
  }
  connection.end();
});
module.exports = router;
  • mysql连接初始化
var mysql = require("mysql");
var connection = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "123456",
  database: "songdata",
});

module.exports = connection;

nodemysql的查询是使用的函数回调,这样就把我们的查询数据业务和对数据操作的业务耦合在一起了,我们封装这个方法,进行查询操作和数据处理的解耦

function proxy(connection, sql) {
  return new Promise((resolve, reject) => {
    connection.query(sql, (err, results) => {
      console.log("🚀 ~ connection.query ~ results:", results);
      if (err) {
        // console.log("🚀 ~ router.post ~ err", err);
        reject(err);
      } else {
        resolve(results);
      }
    });
  });
}

module.exports = { proxy };
  • 在首页增补上
// 链接数据库
const connection = require("./data/index");
connection.connect();

mysql数据库

  • 温馨提示:最好是使用可视化工具来查看,工具很多,大家可以自行去找适合自己的工具

在这里插入图片描述
这样我们,就实现了前端通过ajax请求后端真实数据库的操作

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

使用FakeSMTP创建本地SMTP服务器接收邮件具体实现。

以下代码来自Let’s Go further节选。具体说明均为作者本人理解。 编辑邮件模版 主要包含三个template: subject:主题plainBody: 纯文本正文htmlBody:超文本语言正文 {{define "subject"}}Welcome to Greenlight!{{end}} {{def…

在Linux系统安装配置 MySQL 和 hive,hive配置为远程模式

前提:已安装配置好了Hadoop环境,因为hive的底层是Hadoop 1 Mysql安装 搜索Centos7自带的mariadb rpm -qa|grep mariadb 卸载mariadb rpm -e mariadb-libs-5.5.64-1.el7.x86_64 --nodeps 再搜索一次看看是否还存在 rpm -qa|grep mariadb 安装mysql 创…

【JetPack】Room数据库笔记

Room数据库笔记 ORM框架&#xff1a;对齐数据库数据结构与面向对象数据结构之间的关系&#xff0c;使开发编程只考虑面向对象不需要考虑数据库的结构 Entity : 数据实体&#xff0c;对应数据库中的表 <完成面向对象与数据库表结构的映射> 注解&#xff1a; 类添加注解…

OpenHarmony-4.HDI 框架

HDI 框架 1.HDI介绍 HDI&#xff08;Hardware Device Interface&#xff0c;硬件设备接口&#xff09;是HDF驱动框架为开发者提供的硬件规范化描述性接口&#xff0c;位于基础系统服务层和设备驱动层之间&#xff0c;是连通驱动程序和系统服务进行数据流通的桥梁&#xff0c;是…

AI Agent与MEME:技术与文化融合驱动Web3创新

AI Agent如何引领Web3新时代&#xff1f; 随着Web3与区块链技术的迅速发展&#xff0c;AI Agent作为人工智能与区块链的交汇点&#xff0c;正在逐步成为推动去中心化生态的重要力量。同时&#xff0c;MEME文化凭借其强大的社区驱动力和文化渗透力&#xff0c;在链上生态中扮演着…

接口测试-Fidder及jmeter使用

一、接口测试的基础 1.接口的含义 也叫做API&#xff0c;是一组定义、程序及协议的集合&#xff0c;提供访问一组例程的能力&#xff0c;无需访问源码获理解内部工作细节 2.接口的分类 代码内部的接口&#xff0c;程序模块间的接口&#xff0c;对于程序接口测试&#xff0c;需…

【数据集】医学常见9种皮肤疾病检测数据集11294张YOLO+VOC格式(已增强)

数据集格式&#xff1a;VOC格式YOLO格式 压缩包内含&#xff1a;3个文件夹&#xff0c;分别存储图片、xml、txt文件 JPEGImages文件夹中jpg图片总计&#xff1a;11294 Annotations文件夹中xml文件总计&#xff1a;11294 labels文件夹中txt文件总计&#xff1a;11294 标签种类数…

JavaSE——绘图入门

一、Java绘图坐标体系 下图说明了Java坐标系&#xff0c;坐标原地位于左上角&#xff0c;以像素为单位。在Java坐标系中&#xff0c;第一个是x坐标&#xff0c;表示当前位置为水平方向&#xff0c;距离坐标原点x个像素&#xff1b;第二个是y坐标&#xff0c;表示当前位置为垂直…

探索 Seaborn Palette 的奥秘:为数据可视化增色添彩

一、引言 在数据科学的世界里&#xff0c;视觉传达是不可或缺的一环。一个好的数据可视化不仅能传递信息&#xff0c;还能引发共鸣。Seaborn 是 Python 中一款广受欢迎的可视化库&#xff0c;而它的调色板&#xff08;palette&#xff09;功能&#xff0c;则为我们提供了调配绚…

Sigrity System Explorer Snip Via Pattern From Layout模式从其它设计中截取过孔模型和仿真分析操作指导

Sigrity System Explorer Snip Via Pattern From Layout模式从其它设计中截取过孔模型和仿真分析操作指导 Sigrity System Explorer Snip Via Pattern From Layout模式支持从其它设计中截取过孔模型用于仿真分析,同样以差分模板为例 具体操作如下 双击打开System Explorer软件…

数据分析实战—玻璃类别分类

1.实战内容 (1) 加载玻璃类别数据集&#xff0c;划分训练集、测试集 import pandas as pd import numpy as np pd.set_option(display.max_columns, None) pd.set_option(display.max_rows, None) # 读取数据集 glass pd.read_csv(glass.csv, encodinggbk, headerNone) glas…

Hive是什么,Hive介绍

官方网站&#xff1a;Apache Hive Hive是一个基于Hadoop的数据仓库工具&#xff0c;主要用于处理和查询存储在HDSF上的大规模数据‌。Hive通过将结构化的数据文件映射为数据库表&#xff0c;并提供类SQL的查询功能&#xff0c;使得用户可以使用SQL语句来执行复杂的​MapReduce任…

GIN

gin是什么 Gin 是一个用 Go (Golang) 编写的 HTTP Web 框架。 它具有类似 Martini 的 API&#xff0c;但性能比 Martini 快 40 倍。如果你需要极好的性能&#xff0c;使用 Gin 吧。 特点&#xff1a;gin是golang的net/http库封装的web框架&#xff0c;api友好&#xff0c;注…

初始Python篇(13)—— 模块以及Python中常用的内置模块

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a; Python 目录 模块的概念 模块的导入 包的概念以及使用 主程序运行 Python中常用的内置模块 random模块 time模块 datetime模块 …

时间序列异常值检测方法

文章目录 一、基于统计的方法1.1、标准差1.2、箱线图1.3、Z-Score法 二、基于机器学习算法的方法2.1、K-NN2.2、孤立森林 三、基于密度的方法3.1、LOF3.2、DBSCAN密度聚类 时间序列相关参考文章&#xff1a; 时间序列预测算法—ARIMA 时间序列预测算法—Prophet 时间序列分类任…

8K+Red+Raw+ProRes422分享5个影视级视频素材网站

Hello&#xff0c;大家好&#xff0c;我是后期圈&#xff01; 在视频创作中&#xff0c;电影级的视频素材能够为作品增添专业质感&#xff0c;让画面更具冲击力。无论是广告、电影短片&#xff0c;还是品牌宣传&#xff0c;高质量的视频素材都是不可或缺的资源。然而&#xff…

顺序表的操作

注意位序和数组下标的关系 插入&#xff1a; 插入的时间复杂度&#xff1a; 最深层语句&#xff1a; 最好情况 最坏情况 平均情况 删除&#xff1a; 查找&#xff1a;

五、windows上vscode构建c/c++环境

1、安装vscode 官网下载界面&#xff1a;https://code.visualstudio.com/Download 请根据电脑系统安装所需版本点击下载链接&#xff08;一般情况下点击windows按钮即可&#xff09;鼠标左键双击&#xff0c;即可运行安装程序&#xff0c;点击【确认】&#xff1b;选择安装路径…

Spring实例化的基本流程和Bean处理器

目录 Spring实例化的基本流程 Bean的处理器 Bean工厂后处理器&#xff08;BeanFactoryPostProcessor&#xff09; 动态注册beanDefinition Bean后处理器&#xff08;BeanPostProcessor&#xff09; Spring实例化的基本流程 在了解处理器之前&#xff0c;要清除spring实例化…

【SH】Ubuntu Server 24搭建Web服务器访问Python程序研发笔记

文章目录 说个问题写个方案一、安装Ubuntu Server二、安装Web服务器采用Nginx服务器 三、安装Python及依赖创建项目虚拟环境 四、安装Python Web框架采用Flask框架创建和运行Flask应用&#xff08;以后的重点&#xff09; 五、安装WSGI服务器采用Gunicorn 六、配置Nginx七、验证…