当前位置: 首页 > news >正文

【原生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请求后端真实数据库的操作

相关文章:

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

上篇文章,我们封装了ajax方法来请求后端数据,这篇文章将介绍如何使用 Node.js 来连接 MySQL,并对数据库进行操作。 实现效果 代码实现 后端接口处理 const express require("express"); const connection require("../da…...

Ubuntu将深度学习环境配置移植到新电脑

这里默认新电脑已经安装好了conda、CUDA这些,可以直接创建新的虚拟环境。 参考链接: https://blog.csdn.net/Chujun123528/article/details/143788565https://blog.csdn.net/qq_41779275/article/details/122868946https://blog.csdn.net/YajunLin/art…...

vue基础作业实验十

vue基础作业实验十 实验要求案例要点:代码以及思考style部分Vue.js 部分Vue 实例部分 这段代码是一个基于 Vue.js 的静态页面,功能包括商品品牌的添加、删除和搜索。 实验要求 一、实验的基本内容 (1)Vue模板语法。 &#xff08…...

冒泡排序(JAVA)

package com.guangyunl.f_array;import java.util.Random; import java.util.Scanner;// 数组的冒泡排序 // 冒泡排序法是采用数组中相邻元素进行比较换位 public class Demo02Bubble {public static void main(String[] args) {Demo02Bubble demo02Bubble new Demo02Bubble()…...

如何测量分辨率

一、什么是分辨率? 分辨率指的是分清物体细节的能力。分辨率是一个成像系统还原空间频率的能力。一些人只是简单的用分辨率去描述极限分辨率,但是相机在在不同的对比度的情况下还原低,中和高频率的能力,也可以显示全面综合的信息。…...

【Mysql索引优化】索引优化的最佳实现

文章目录 【Mysql优化】索引优化的最佳实现1. 全值匹配:索引的最佳使用方式2. 最左前缀法则3. 尽量使用覆盖索引:优化查询性能。减少 select \* 语句4. 范围查询优化5. 不在索引列上做任何操作(计算、函数、(自动or手动&#xff0…...

centos使用mkisofs构建无人值守镜像(附官方学习文档)

安装mkisofs yum install -y mkisofs 挂载镜像并确认 并拷贝文件(/mnt 为我们的工作目录) 1.3 准备自动应答文件(保存为 ins.ks) 修改系统引导 实际上就是添加inst.ks 这个引导参数 传递应答文件 传统模式引导 UEFI模式引导 打包镜像 通用选项 -v:启用详细模式&a…...

Python获取当前系统中可用的串口设备

import serial.tools.list_portsdef checkDevice(self):port_data []for port in serial.tools.list_ports.comports():port_data.append(port.description)if port_data:for devInfo in port_data:self.toolLogPrinting(可用设备 devInfo)RET Trueelse:self.toolLogPrinti…...

基于蓝牙通信的手机遥控智能灯(论文+源码)

1.系统设计 灯具作为人们日常生活的照明工具为人们生活提供光亮,本次基于蓝牙通信的手机遥控智能灯设计功能如下: (1)用户可以通过蓝牙通信模块的作用下,在手机端遥控切换智能灯不同的工作模式; &#x…...

【Prometheus 】【实战篇(五)】深入解析 Prometheus 监控指标类型:Counter、Gauge、Histogram 和 Summary

Prometheus 提供了四种核心的指标类型,分别是 Counter(计数器)、Gauge(仪表)、Histogram(直方图)和 Summary(摘要)。这些指标类型在客户端库中有具体的使用说明&#xff…...

进程间通信方式---消息队列(System V IPC)

进程间通信方式—消息队列(System V IPC) 文章目录 进程间通信方式---消息队列(System V IPC)消息队列1.消息队列进程间通信原理2.msgget 系统调用3.msgsnd 系统调用4.msgrcv 系统调用5.msgctl 系统调用6.函数使用案例7.实现生产者…...

【笔记】深度学习模型评估指标

推荐链接: (0)多分类器的评价指标 (1)泛化误差的评价方法:【机器学习】模型评估与选择(留出法、交叉验证法、查全率、查准率、偏差、方差) (2)机器学习&…...

Python语法之列表(包含检测练习)

看完后有没有学会呢?主页有一个列表知识小检测^V^ 关注我更新更多初学实例 主页还有字典的,这个系列会持续更新 列表 列表中的查找数据(index,count,len) 一 列表的格式 【数据1,数据2, 】 index():返回指定数据…...

气象与旅游之间的关系,如果借助高精度预测提高旅游的质量

气象与旅游之间存在密切的关系,天气条件直接影响旅游者的出行决策、旅游体验和安全保障。通过高精度气象预测技术,可以有效提升旅游质量,为游客和旅游行业带来显著的优势。 1. 提高游客出行决策效率 个性化天气服务:基于高精度气象预测,旅游平台可以提供个性化的天气预报服…...

JVM(Java虚拟机)分区详情

JVM(Java虚拟机)运行时数据区是Java虚拟机的内存管理模型,它包括了多个关键的内存区域,这些区域各自承担着不同的职责,共同支持着Java程序的运行。以下是JVM运行时数据区的详细介绍: 一、整体概述 JVM运行时数据区按照线程占用的情况可以分为两类:线程共享和线程独享。…...

计算机组成原理的学习笔记(2)--数据表示与运算·其二 逻辑门和加减乘

学习笔记 前言 本文主要是对于b站尚硅谷的计算机组成原理的学习笔记,仅用于学习交流。 1. 逻辑门 逻辑门是数字电路中用于执行基本逻辑运算的组件。每种逻辑门都有独特的功能和特性: 与门(AND Gate): 符号&#xff1…...

数据科学与SQL:如何利用本福特法则识别财务数据造假?

目录 0 本福特法则介绍 1 数据准备 2 问题分析 步骤1:提取首位数: 步骤2:计算首位数字的实际频率分布 <...

Mapbox-GL 的源码解读的一般步骤

Mapbox-GL 是一个非常优秀的二三维地理引擎&#xff0c;随着智能驾驶时代的到来&#xff0c;应用也会越来越广泛&#xff0c;关于mapbox-gl和其他地理引擎的详细对比&#xff08;比如CesiumJS&#xff09;&#xff0c;后续有时间会加更。地理首先理解 Mapbox-GL 的源码是一项复…...

常见网络命令

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 常见网络命令 收录于专栏【计算机网络】 本专栏旨在分享学习计算机网络的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 Ping 命令 …...

Ubuntu上如何部署Nginx?

环境&#xff1a; Unbuntu 22.04 问题描述&#xff1a; Ubuntu上如何部署Nginx&#xff1f; 解决方案&#xff1a; 在Ubuntu上部署Nginx是一个相对简单的过程&#xff0c;以下是详细的步骤指南。我们将涵盖安装Nginx、启动服务、配置防火墙以及验证安装是否成功。 1. 更新…...

微店商品详情API:获取商品信息的高效途径

引言 在电商领域&#xff0c;获取商品详情是开发者和商家进行数据分析、精准营销和店铺管理的重要一环。微店作为知名的电商平台&#xff0c;提供了丰富的API接口供开发者使用&#xff0c;其中商品详情API接口尤为关键。本文将详细介绍如何使用微店API接口获取商品详情&#x…...

编程语言注释的方式

Python 单行注释 # 这是一个单行注释多行注释&#xff08;本质上是跨行字符串&#xff09; 这是一个多行注释的示例。它可以跨越多行。 """这是一个多行注释的示例。它可以跨越多行。 """ C 单行注释 // 这是一个单行注释 多行注释 /*这是…...

抓住节假日的机会调整ASO优化策略

节日季和全年的特殊活动为提高应用程序的知名度和下载量提供了独特的机会。忽略节假日意味着错过这些有限的扩大用户群的机会。相反&#xff0c;调整您的应用商店优化 (ASO) 策略以适应这些高流量时段至关重要。以下是如何在假期期间最大限度地提高应用程序的性能。 一、为什么…...

AOI外观缺陷检测机

主要功能&#xff1a; 快速检测产品装配缺陷&#xff0c;包括螺丝、元器件、端子排线、二维码、一维条码、识别读码、产品外观 Logo缺陷以及产品标签、字符缺陷检测等产品的缺陷检测。 设备优势&#xff1a;1.采用轻型可移动支架&#xff0c;可以快速对接产线工艺工序&am…...

BERT模型

目录 1.BERT介绍2.BERT框架2.1 Embedding2.2 Transformer Encoder 3.BERT可视化4.注意力六种模式4.1 模式1&#xff1a;注意下一个词4.2 模式2&#xff1a;注意前一个词4.3 模式3&#xff1a;注意相同或相关的单词4.4 模式4&#xff1a;注意“其他”句子中相同或相关词4.5 模式…...

Ubuntu22.04上安装esp-idf

一、安装准备# 建议使用Ubuntu 20.04 或 Ubuntu 22.04 操作系统 为了在 Ubuntu 22.04 中使用 esp-idf&#xff0c;需要安装一些依赖包 sudo apt-get install git wget flex bison gperf python3\python3-pip python3-venv cmake ninja-build ccache\libffi-dev libssl-dev dfu…...

Synchronous Serial Port 协议详解

1、简介 Synchronous Serial Port (SSP) &#xff0c;基于下图文档的设计标准 1.1、包含3种数据帧格式&#xff1a; a Motorola SPI-compatible interface&#xff08;以下简称SPI&#xff09;a Texas Instruments synchronous serial interface&#xff08;简写SSI&#xff…...

BSM和BMS什么区别?

BSM BSM&#xff08;Battery System Manager&#xff09;是指用于管理和控制电动车辆的电池系统的设备&#xff0c;其功能包括监测电池状态、控制充放电过程、保护电池安全等。 BMS BMS&#xff08;Battery Management System&#xff09;是指用于监测、控制和保护电池组的设…...

基于海思soc的智能产品开发(巧用mcu芯片)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 对于开发车规级嵌入式软件的同学来说&#xff0c;socmcu这样的组合&#xff0c;他们并不陌生。但是传统的工业领域&#xff0c;比如发动机、医疗或…...

R语言混合模型回归GBTM群组轨迹模型绘图可视化研究

全文链接&#xff1a;https://tecdat.cn/?p38581 在回归分析的广袤领域中&#xff0c;面对具有多条未知函数线的复杂数据时&#xff0c;传统方法常常捉襟见肘。混合模型作为一种强有力的分析手段应运而生&#xff0c;其在处理此类复杂情境时展现出独特的优势与潜力&#xff08…...

Flink2.0未来趋势中需要注意的一些问题

手机打字&#xff0c;篇幅不长&#xff0c;主要讲一下FFA中关于Flink2.0的未来趋势&#xff0c;直接看重点。 Flink Forward Asia 2024主会场有一场关于Flink2.0的演讲&#xff0c;很精彩&#xff0c;官方也发布了一些关于Flink2.0的展望和要解决的问题。 1.0时代和2.0时代避免…...

android recycleview 中倒计时数据错乱

原因 recyceleview 当页面划出屏幕外后&#xff0c;默认会有两条进入缓存区&#xff0c;这些item的结构会被保存&#xff0c;数据被清除&#xff0c;方便其他新进入屏幕的数据复用item&#xff0c;超过两条外的item会进入缓存池被完全销毁重用。 如果我们的页面上有editText 或…...

康冠科技嵌入式面试题及参考答案

LCD 驱动你自己做了哪些内容? 在 LCD 驱动开发中,首先是硬件层面的理解。需要仔细研究 LCD 的数据手册,明确其引脚定义,包括电源引脚、数据引脚、控制引脚等。比如,对于常见的 RGB 接口 LCD,要清楚哪几个引脚是用于传输红、绿、蓝三种颜色的数据,以及像 VSYNC(垂直同步…...

FreeRTOS的任务调度

1.启动任务调度器 vTaskStartScheduler void vTaskStartScheduler( void ) { BaseType_t xReturn;/* Add the idle task at the lowest priority. */#if ( INCLUDE_xTaskGetIdleTaskHandle 1 ){/* Create the idle task, storing its handle in xIdleTaskHandle so it canbe …...

scala中模式匹配的应用

package test34object test6 {case class Person(name:String)case class Student(name:String, className:String)// match case 能根据 类名和属性的信息&#xff0c;匹配到对应的类// 注意&#xff1a;// 1 匹配的时候&#xff0c;case class的属性个数要对上// 2 属性名不需…...

基于Springboot人口老龄化社区服务与管理平台【附源码】

基于Springboot人口老龄化社区服务与管理平台 效果如下&#xff1a; 系统登陆页面 系统主页面 社区信息页面 社区文件页面 活动报名页面 走访任务管理页面 社区资讯页面 老人信息管理页面 研究背景 随着社会老龄化的加剧&#xff0c;老年人口比例逐渐增加&#xff0c;对老年…...

前端生成docx文档、excel表格、图片、pdf文件

一、前端将页面某区域内容下载为word文档&#xff1a;html-to-docx、file-saver插件组合使用 import HTMLtoDOCX from html-to-docx; import { saveAs } from file-saver;const exportTest async () > {const fileBuffer await HTMLtoDOCX(<h2>文件标题</h2>&…...

Ubantu22系统安装Miniconda3

1、Anaconda和Miniconda异同 清华源镜像的Miniconda3和Anaconda都是用于管理Python环境和软件包的工具&#xff0c;但它们之间存在一些关键的不同之处。下面将分别介绍它们的特点以及使用清华源镜像的差异。 相同点&#xff1a; &#xff08;1&#xff09;功能相似&#xff1a…...

详细解读TISAX认证的意义

详细解读TISAX认证的意义&#xff0c;犹如揭开信息安全领域的一颗璀璨明珠&#xff0c;它不仅代表了企业在信息安全管理方面的卓越成就&#xff0c;更是通往全球汽车供应链信任桥梁的关键一环。TISAX&#xff0c;即“Trusted Information Security Assessment Exchange”&#…...

kubeadm_k8s_v1.31高可用部署教程

kubeadm_k8s_v1.31高可用部署教程 实验环境部署拓扑图**部署署架构****Load Balance****Control plane node****Worker node****资源分配&#xff08;8台虚拟机&#xff09;**集群列表 前置准备关闭swap开启ipv4转发更多设置 1、Verify the MAC address and product_uuid are u…...

MyBatis写法汇总

Mybatis写法汇总 1. 批量操作 1.1 批量插入 <insert id"batchInsert" parameterType"java.util.List">INSERT INTO user (username, password, create_time) VALUES<foreach collection"list" item"item" separator"…...

【C++】优先级队列以及仿函数

本篇我们来介绍一下优先级队列 priority_queue 。优先级队列的底层是数据结构中的堆&#xff0c;在C中它是一个容器适配器&#xff0c;这个容器适配器比之前的栈和队列更复杂。 1.priority_queue的介绍 1.1 优先级队列的底层 因为优先级队列就是堆&#xff0c;堆的底层是数组…...

【VUE】13、安装nrm管理多个npm源

nrm&#xff08;npm registry manager&#xff09;是一个 npm 源管理器&#xff0c;它允许用户快速地在不同的 npm 源之间进行切换&#xff0c;以提高包管理的速度和效率。以下是对 nrm 使用的详细介绍&#xff1a; 1、安装nrm 在使用 nrm 之前&#xff0c;需要先确保已经安装…...

selenium工作原理

原文链接&#xff1a;https://blog.csdn.net/weixin_67603503/article/details/143226557 启动浏览器和绑定端口 当你创建一个 WebDriver 实例&#xff08;如 webdriver.Chrome()&#xff09;时&#xff0c;Selenium 会启动一个新的浏览器实例&#xff0c;并为其分配一个特定的…...

Reactor 响应式编程(第三篇:R2DBC)

系列文章目录 Reactor 响应式编程&#xff08;第一篇&#xff1a;Reactor核心&#xff09; Reactor 响应式编程&#xff08;第二篇&#xff1a;Spring Webflux&#xff09; Reactor 响应式编程&#xff08;第三篇&#xff1a;R2DBC&#xff09; Reactor 响应式编程&#xff08…...

从零开始掌握 React 前端框架:入门指南与实战案例

&#x1f680; 从零开始掌握 React 前端框架&#xff1a;入门指南与实战案例 &#x1f4d6; 前言 React 是由 Facebook 推出的前端框架&#xff0c;用于构建高效、可复用的用户界面&#xff08;UI&#xff09;。本文将手把手教你如何从零开始掌握 React&#xff0c;内容覆盖 …...

【日常笔记】Spring boot:编写 Content type = ‘text/plain‘ 接口

一、项目场景&#xff1a; 接口&#xff1a;Context-Type&#xff1a;text/plain 方式&#xff1a;POST 项目场景&#xff1a;硬件回调接口 二、实战 PostMapping(value "/xx/xxx", consumes "text/plain" ) 2.1、接口 /*** return String* time 202…...

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

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

多智能体/多机器人网络中的图论法

一、引言 1、网络科学至今受到广泛关注的原因&#xff1a; &#xff08;1&#xff09;大量的学科&#xff08;尤其生物及材料科学&#xff09;需要对元素间相互作用在多层级系统中所扮演的角色有更深层次的理解&#xff1b; &#xff08;2&#xff09;科技的发展促进了综合网…...

【中标麒麟服务器操作系统实例分享】java应用DNS解析异常分析及处理

了解更多银河麒麟操作系统全新产品&#xff0c;请点击访问 麒麟软件产品专区&#xff1a;https://product.kylinos.cn 开发者专区&#xff1a;https://developer.kylinos.cn 文档中心&#xff1a;https://documentkylinos.cn 情况描述 中标麒麟服务器操作系统V7运行在 ARM虚…...