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

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

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

相关文章

vue预览和下载 pdf、ppt、word、excel文档,文件类型为链接或者base64格式或者文件流,

** 方法1&#xff1a;word、xls、ppt、pdf 这些文件&#xff0c; 如果预览的文件是链接可以直接打开&#xff0c;可用微软官方的预览地址 ** <iframe width"100%" :src"textVisibleURl " id"myFramePPT" style"border: none;backgroun…

跟沐神学读论文-论文阅读管理

摘要 近期有读论文的需求&#xff0c;就需要去了解一下论文到底要怎么读&#xff0c;同一个系列之间的论文如何作整理和归纳&#xff0c;之前也有了解过市面上有成熟的论文阅读工具&#xff0c;但是对于学生党来讲没什么性价比&#xff0c;在B站上看到沐神有讲解他的思路Typor…

day38-SSH安全登录

机器准备 什么是SSH SSH 或 Secure Shell 协议是一种远程管理协议&#xff0c;允许用户通过 Internet 访问、控制和修改其远程服务器。 SSH 服务是作为未加密 Telnet 的安全替代品而创建的&#xff0c;它使用加密技术来确保进出远程服务器的所有通信都以加密方式进行。 SS…

使用React构建一个掷骰子的小游戏

这是一个用 React 构建的小游戏应用&#xff0c;名为 Tenzies&#xff0c;目标是掷骰子&#xff0c;直到所有骰子的值相同。玩家可以“冻结”某些骰子&#xff0c;使它们在后续掷骰中保持不变。 1. App.jsx import Die from "../public/components/Die" import { us…

vue 文本域 展示的内容格式要和填写时保持一致

文本域 展示的内容格式要和填写时保持一致 <el-inputtype"textarea":rows"5"placeholder"请输入内容"v-model"formCredit.point"style"width:1010px;" > </el-input> 样式加个&#xff1a; white-space: pre-w…

[Linux] 信号保存与处理

&#x1fa90;&#x1fa90;&#x1fa90;欢迎来到程序员餐厅&#x1f4ab;&#x1f4ab;&#x1f4ab; 主厨&#xff1a;邪王真眼 主厨的主页&#xff1a;Chef‘s blog 所属专栏&#xff1a;青果大战linux 总有光环在陨落&#xff0c;总有新星在闪烁 信号的保存 下面的概…

【Axure高保真原型】伸缩表单

今天和大家分享伸缩表单的原型模板&#xff0c;效果包括在需要填写内容较多时&#xff0c;可以对填写内容进行分类&#xff0c;然后通过点击上下箭头&#xff0c;收起或展开对应的信息。这个模版里面包含了输入框、下拉列表、选择器、上次图片共多种种常用的元件&#xff0c;后…

InternVL简读

InternVL: Scaling up Vision Foundation Models and Aligning for Generic Visual-Linguistic Tasks 1. Introduction 需要解决的问题&#xff1a; existing VLLMs [5, 81, 131, 177, 187] commonly employ lightweight “glue” layers, such as QFormer [81] or linear pr…

从源码分析swift GCD_DispatchGroup

前言&#xff1a; 最近在写需求的时候用到了DispatchGroup&#xff0c;一直没有深入去学习&#xff0c;既然遇到了那么就总结下吧。。。。 基本介绍&#xff1a; 任务组&#xff08;DispatchGroup&#xff09; DispatchGroup 可以将多个任务组合在一起并且监听它们的完成状态。…

AFL-Fuzz 的使用

AFL-Fuzz 的使用 一、工具二、有源码测试三、无源码测试 一、工具 建议安装LLVM并使用afl-clang-fast或afl-clang-lto进行编译&#xff0c;这些工具提供了更现代和高效的插桩技术。您可以按照以下步骤安装LLVM和afl-clang-fast&#xff1a; sudo apt update sudo apt install…

ONES 功能上新|ONES Copilot、ONES Wiki 新功能一览

ONES Copilot 可基于工作项的标题、描述、属性信息&#xff0c;对工作项产生的动态和评论生成总结。 针对不同类型的工作项&#xff0c;总结输出的内容有对应的侧重点。 应用场景&#xff1a; 在一些流程步骤复杂、上下游参与成员角色丰富的场景中&#xff0c;工作项动态往往会…

EasyGBS国标GB28181平台P2P远程访问故障排查指南:客户端角度的排查思路

在现代视频监控系统中&#xff0c;P2P&#xff08;点对点&#xff09;技术因其便捷性和高效性而被广泛应用。然而&#xff0c;当用户在使用P2P远程访问时遇到设备不在线或无法访问的问题时&#xff0c;有效的排查方法显得尤为重要。本文将从客户端的角度出发&#xff0c;详细探…

Soul Android端稳定性背后的那些事

前言&#xff1a;移动应用的稳定性对于用户体验和产品商业价值都有着至关重要的作用。应用崩溃会导致关键业务中断、用户留存率下降、品牌口碑变差、生命周期价值下降等影响&#xff0c;甚至会导致用户流失。因此&#xff0c;稳定性是APP质量构建体系中最基本和最关键的一环。当…

mfc140u.dll是什么文件?如何解决mfc140u.dll丢失的相关问题

遇到“mfc140u.dll文件丢失”的错误通常影响应用程序的运行&#xff0c;这个问题主要出现在使用Microsoft Visual C环境开发的软件中。mfc140u.dll是一个重要的系统文件&#xff0c;如果它丢失或损坏&#xff0c;会导致相关程序无法启动。本文将简要介绍几种快速有效的方法来恢…

mybatis分页插件的使用

1. 引入依赖包 <dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper</artifactId><version>6.1.0</version> </dependency> 2 添加分页插件配置 2.1 使用配置类的方式&#xff08;推荐&#xff09…

手机便签哪个好用?手机桌面便签app下载推荐

在快节奏的现代生活中&#xff0c;我们常常需要记录一些重要的信息和灵感&#xff0c;以便于日后查阅和回顾。手机便签软件因其便携性和易用性&#xff0c;成为了我们日常生活中不可或缺的工具。无论是购物清单、待办事项、灵感记录还是重要笔记&#xff0c;手机便签都能帮助我…

Zabbix6.0升级为6.4

为了体验一些新的功能&#xff0c;比如 Webhook 和问题抑制等&#xff0c;升级个小版本。 一、环境信息 1. 版本要求 一定要事先查看官方文档&#xff0c;确认组件要求的版本&#xff0c;否则版本过高或者过低都会出现问题。 2. 升级前后信息 环境升级前升级后操作系统CentOS…

怎么将pdf中的某一个提取出来?介绍几种提取PDF中页面的方法

怎么将pdf中的某一个提取出来&#xff1f;传统上&#xff0c;我们可能通过手动截取屏幕或使用PDF阅读器的复制功能来提取信息&#xff0c;但这种方法往往不够精确&#xff0c;且无法保留原文档的排版和格式。此外&#xff0c;很多时候我们需要提取的内容可能涉及多个页面、多个…

LeetCode:101. 对称二叉树

跟着carl学算法&#xff0c;本系列博客仅做个人记录&#xff0c;建议大家都去看carl本人的博客&#xff0c;写的真的很好的&#xff01; 代码随想录 LeetCode&#xff1a;101. 对称二叉树 给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 示例 1&#xff1a; 输…

力扣-图论-18【算法学习day.68】

前言 ###我做这类文章一个重要的目的还是给正在学习的大家提供方向和记录学习过程&#xff08;例如想要掌握基础用法&#xff0c;该刷哪些题&#xff1f;&#xff09;我的解析也不会做的非常详细&#xff0c;只会提供思路和一些关键点&#xff0c;力扣上的大佬们的题解质量是非…