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

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

news 来源：原创 2025/6/23 3:25:41

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

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

服务器连接mysql

安装mysql2：npm install mysql2
启动服务：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。

如果你使用的是 Vite，环境变量需要以 VITE_ 为前缀，并通过 import.meta.env 访问。
如果你使用的是 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>