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

【nodeJS】服务端连接mysql、定义一个接口,并在前端调用

服务端连接数据库,并简单使用

  • 服务器连接mysql
  • 后端定义接口
  • 前端调用接口
    • 封装axios(简易版)
      • 解决前端请求接口返回了一个html
    • 定义api请求
    • vue中调用接口

服务器连接mysql

  1. 安装mysql2:npm install mysql2
  2. 启动服务:npm start

后端定义接口

const express = require('express');  
const app = express();
const mysql = require('mysql2')app.listen(3000, () => {console.log('Server is running on port 3000');
});// 创建数据库连接
const connection = mysql.createConnection({host: 'localhost',port: 3306,user: 'root',database: '数据库名',password: '数据库密码'
});// 【定义接口】根据用户ID查询用户信息
app.get('/userInfo', (req, res) => {const userId = req?.query?.id;if(!userId) {return res.status(400).send("用户ID为空");}// 构造查询语句(使用参数化查询防止SQL注入)const statement = `SELECT * FROM sys_user WHERE ID = ?`;connection.query(statement, [userId], (err, resultes, fields) => {if(err) {return res.status(500).send(err);}if(resultes.length === 0) {return res.status(400).send("用户未找到")}res.json(resultes[0]); // 假设用户ID是唯一的,返回第一个结果})
});

前端调用接口

封装axios(简易版)

// src\utils\request.js
import axios from 'axios'
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 对应国际化资源文件后缀
axios.defaults.headers['Content-Language'] = 'zh_CN'
// 创建axios实例
const service = axios.create({// axios中请求配置有baseURL选项,表示请求URL公共部分baseURL: import.meta.env.VITE_APP_BASE_API, //  Vite中环境变量需要以 VITE_ 为前缀,并通过import.meta.env 访问// 超时timeout: 30000,
})export default service

解决前端请求接口返回了一个html

axios.create时添加baseURL参数(与vue.config中的一致即可),目的是为了便于axios实例的方法传递相对URL。

  1. 如果你使用的是 Vite,环境变量需要以 VITE_ 为前缀,并通过 import.meta.env 访问。
  2. 如果你使用的是 Vue CLI,环境变量需要以 VUE_APP_ 为前缀,并通过 process.env 访问。

定义api请求

//src\api\users\index.js
import request from '@/utils/request'export function userInfoApi(params) {return request({url: '/userInfo',method: 'get',params,})
}

vue中调用接口

<template><div>用户信息<button @click="getUserInfo">获取用户信息</button></div>
</template><script setup lang="ts">
import { userInfoApi } from '@/api/users'
const getUserInfo = () => {userInfoApi({ id: 'f0019fdebedb443c98dcb17d88222c38' }).then((res) => {console.log('接口数据:', res.data)})
}
</script>

相关文章:

【nodeJS】服务端连接mysql、定义一个接口,并在前端调用

服务端连接数据库&#xff0c;并简单使用 服务器连接mysql后端定义接口前端调用接口封装axios&#xff08;简易版&#xff09;解决前端请求接口返回了一个html 定义api请求vue中调用接口 服务器连接mysql 安装mysql2&#xff1a;npm install mysql2启动服务&#xff1a;npm sta…...

驱动开发系列40 - Linux 显卡KMD驱动代码分析(一) - 设备初始化过程

目录 一:概述 二:显卡内核态驱动的主要功能 1. 设备初始化 2. 内存管理 3. 中断处理 4. 显示管理 5. 电源管理 三:Linux显卡内核态驱动的架构 四:PCI设备初始化过程 五:显卡设备初始化 一:概述 显卡内核态驱动(KMD)负责与GPU硬件直接交互,提供底层接口、管理显存…...

玩转大语言模型——Ubuntu系统环境下使用llama.cpp进行CPU与GPU混合推理deepseek

系列文章目录 玩转大语言模型——使用langchain和Ollama本地部署大语言模型 玩转大语言模型——三分钟教你用langchain提示词工程获得猫娘女友 玩转大语言模型——ollama导入huggingface下载的模型 玩转大语言模型——langchain调用ollama视觉多模态语言模型 玩转大语言模型—…...

20250301在chrome中安装CRX猫抓

20250301在chrome中安装CRX猫抓 2025/3/1 18:08 百度&#xff1a;猫抓 CRX https://www.crx4chrome.com/crx/49597/ 猫抓 (cat-catch) Crx File 2.5.9 for Chrome (Latest Version) Get Latest Version of 猫抓 (cat-catch) from Web Store Developer Tools > cat-catch / E…...

Docker 深度解析:适合零基础用户的详解

此博客涵盖 Docker 的基本概念和作用、架构和核心组件、与传统虚拟机的对比、安装与基本操作&#xff0c;以及在实际开发和运维中的应用场景。 首先&#xff0c;详细解释了 Docker 的基本概念&#xff0c;包括它的诞生背景、作用及其如何解决传统应用部署中的问题。然后&#…...

LeetCode 分割回文串(回溯、dp)

131.分割回文串 给你一个字符串 s&#xff0c;请你将 s 分割成一些 子串&#xff0c;使每个子串都是 回文串 。返回 s 所有可能的分割方案。 示例 1&#xff1a; 输入&#xff1a;s "aab" 输出&#xff1a;[["a","a","b"],["a…...

期权帮|股指期货入门知识:什么是股指期货基差?什么是股指期货价差?

锦鲤三三每日分享期权知识&#xff0c;帮助期权新手及时有效地掌握即市趋势与新资讯&#xff01; 股指期货入门知识&#xff1a;什么是股指期货基差&#xff1f;什么是股指期货价差&#xff1f; 股指期货的基差与价差是两个重要的价格关系指标&#xff0c;它们反映了现货市场…...

解锁GPM 2.0「卡顿帧堆栈」|代码示例与实战分析

每个游戏开发者都有一个共同的愿望&#xff0c;那就是能够在无需复现玩家反馈的卡顿现象时&#xff0c;快速且准确地定位卡顿的根本原因。为了实现这一目标&#xff0c;UWA GPM 2.0推出了全新功能 - 卡顿帧堆栈&#xff0c;旨在为开发团队提供高效、精准的卡顿分析工具。在这篇…...

Python:类型转换和深浅拷贝,可变与不可变对象

int()&#xff1a;转换为一个整数&#xff0c;只能转换由纯数字组成的字符串 浮点型强转整型会去掉小数点及后面的数&#xff0c;只保留整数部分 #如果字符串中有数字和正负号以外的字符就会报错 float()&#xff1a;整形转换为浮点型会自动添加一位小数 .0 如果字符串中有…...

Redis——缓存穿透、击穿、雪崩

缓存穿透 什么是缓存穿透 缓存穿透说简单点就是大量请求的 key 根本不存在于缓存中&#xff0c;导致请求直接到了数据库上&#xff0c;根本没有经过缓存这一层。举个例子&#xff1a;某个黑客故意制造我们缓存中不存在的 key 发起大量请求&#xff0c;导致大量请求落到数据库…...

8.1.STM32_OLED

4.STM32_OLED 跟着江协科大的视频&#xff0c;无法点亮OLED屏幕解决办法 每个人使用的0.96寸OLED屏幕信号不一样&#xff0c;存在很多兼容性问题 归根结底就是驱动的问题&#xff01; 本人的OLED是SSD1306,在淘宝店铺找了驱动文件后成功点亮&#xff0c;示例见文末 请针对自…...

Gartner发布安全运营指标构建指南

如何为安全运营指标构建坚实的基础 安全运营经理需要报告威胁检测、调查和响应计划的有效性&#xff0c;但难以驾驭大量潜在的 SOC 指标。本研究提供了设计针对 SOC 的指标系统的示例和实践。 主要发现 需要清晰、一致的衡量标准来向董事会成员或服务提供商等更广泛的团队传达…...

【赵渝强老师】监控Redis

对运行状态的Redis实例进行监控是运维管理中非常重要的内容&#xff0c;包括&#xff1a;监控Redis的内存、监控Redis的吞吐量、监控Redis的运行时信息和监控Redis的延时。通过Redis提供的监控命令便能非常方便地实现对各项指标的监控。 一、监控Redis的内存 视频讲解如下 【…...

【Unity】搭建HTTP服务器并解决IP无法访问问题解决

一、核心目标与背景 在Unity中搭建本地HTTP服务器&#xff0c;可以用于实现Web与游戏交互、本地数据接口测试、跨设备通信等场景。但在实际部署中&#xff0c;开发者常遇到以下问题&#xff1a; ​本机IP无法访问&#xff1a;服务绑定localhost时&#xff0c;局域网设备无法连…...

如何远程访问svn中的URL

简介&#xff1a; 主要opencascade相关知识学习 格言&#xff1a; 万丈高楼平地起 要远程访问 SVN&#xff08;Subversion&#xff09;仓库中的 URL&#xff0c;通常需要以下步骤和注意事项&#xff1a; 1. 确认远程 SVN 服务器的访问协议 SVN 支持多种协议访问远程仓库&…...

Free Auto Clicker - 在任意位置自动重复鼠标点击

“想让鼠标自己动起来&#xff0c;解放双手去做更有趣的事&#xff1f;”Free Auto Clicker 就像你的数字小助手&#xff0c;能在任意位置自动重复点击鼠标。从玩游戏到刷网页&#xff0c;这款免费工具让你告别枯燥的重复操作&#xff0c;效率瞬间起飞&#xff01; 你有没有想…...

0005__PyTorch 教程

PyTorch 教程 | 菜鸟教程 离线包&#xff1a;torch-1.13.1cpu-cp39-cp39-win_amd64.whl https://download.pytorch.org/whl/torch_stable.html...

Unity Burst编译

官网文档&#xff1a;https://docs.unity3d.com/Packages/com.unity.burst1.8/manual/index.html Unity 之Burst 底层原理&#xff1a;https://zhuanlan.zhihu.com/p/623274986 Burst 编译器入门&#xff08;五&#xff09;&#xff1a;https://developer.unity.cn/projects/5e…...

软件测试中的BUG

文章目录 软件测试的生命周期BugBug 的概念描述 Bug 的要素案例Bug 级别Bug 的生命周期与开发产生争执怎么办&#xff1f;【高频面试题】先检查自身&#xff0c;Bug 是否描述的不清楚站在用户角度考虑并抛出问题Bug 的定级要有理有据提⾼自身技术和业务水平&#xff0c;做到不仅…...

LabVIEW基于IMAQ实现直线边缘检测

本程序基于 NI Vision Development 模块&#xff0c;通过 IMAQ Find Straight Edges 函数&#xff0c;在指定 ROI&#xff08;感兴趣区域&#xff09; 内检测多条直线边缘。用户可 动态调整检测参数 或 自定义ROI&#xff0c;实时观察识别效果&#xff0c;适用于 高精度视觉检测…...

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

Chromium 136 编译指南 Windows篇:depot_tools 配置与源码获取(二)

引言 工欲善其事&#xff0c;必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后&#xff0c;我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集&#xff0c;就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...

Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...

Python 训练营打卡 Day 47

注意力热力图可视化 在day 46代码的基础上&#xff0c;对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...

协议转换利器,profinet转ethercat网关的两大派系,各有千秋

随着工业以太网的发展&#xff0c;其高效、便捷、协议开放、易于冗余等诸多优点&#xff0c;被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口&#xff0c;具有实时性、开放性&#xff0c;使用TCP/IP和IT标准&#xff0c;符合基于工业以太网的…...

Python训练营-Day26-函数专题1:函数定义与参数

题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一个名为 calculate_circle_area 的函数&#xff0c;该函数接收圆的半径 radius 作为参数&#xff0c;并返回圆的面积。圆的面积 π * radius (可以使用 math.pi 作为 π 的值)要求&#xff1a;函数接收一个位置参数 radi…...

从实验室到产业:IndexTTS 在六大核心场景的落地实践

一、内容创作&#xff1a;重构数字内容生产范式 在短视频创作领域&#xff0c;IndexTTS 的语音克隆技术彻底改变了配音流程。B 站 UP 主通过 5 秒参考音频即可克隆出郭老师音色&#xff0c;生成的 “各位吴彦祖们大家好” 语音相似度达 97%&#xff0c;单条视频播放量突破百万…...

Python爬虫(52)Scrapy-Redis分布式爬虫架构实战:IP代理池深度集成与跨地域数据采集

目录 一、引言&#xff1a;当爬虫遭遇"地域封锁"二、背景解析&#xff1a;分布式爬虫的两大技术挑战1. 传统Scrapy架构的局限性2. 地域限制的三种典型表现 三、架构设计&#xff1a;Scrapy-Redis 代理池的协同机制1. 分布式架构拓扑图2. 核心组件协同流程 四、技术实…...

链结构与工作量证明7️⃣:用 Go 实现比特币的核心机制

链结构与工作量证明:用 Go 实现比特币的核心机制 如果你用 Go 写过区块、算过哈希,也大致理解了非对称加密、数据序列化这些“硬核知识”,那么恭喜你,现在我们终于可以把这些拼成一条完整的“区块链”。 不过别急,这一节我们重点搞懂两件事: 区块之间是怎么连接成“链”…...