插画师培训网站建设广州网站优化关键词公司

服务器连接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>