Vue 3 前端获取 MySQL 数据库数据：Axios 和 Node.js 交互

在 Vue 3 中，可以使用 Axios 库来进行前后端数据交互。以下是一个简单的示例：

安装 Axios 库：

npm install axios


2. 在前端代码中导入 Axios：
```javascript
import axios from 'axios';

发起 GET 请求获取数据：

axios.get('/api/data').then(response => {
  // 处理返回的数据
  console.log(response.data);
}).catch(error => {
  // 处理错误
  console.error(error);
});

在后端使用 Node.js 和 Express 来处理请求：

const express = require('express');
const app = express();

// 设置允许跨域请求
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

// 处理 GET 请求
app.get('/api/data', (req, res) => {
  // 从数据库中获取数据
  // 假设这里使用了 mysql2 库来连接 MySQL 数据库
  const mysql = require('mysql2');

  const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'mydatabase'
  });

  connection.query('SELECT * FROM mytable', (error, results) => {
    if (error) {
      res.status(500).json({ error: 'Failed to retrieve data from database' });
    } else {
      res.json(results);
    }
  });
});

// 启动服务器
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

以上代码示例了一个基本的前后端数据交互过程。前端通过 Axios 发送 GET 请求到后端的/api/data接口，后端从 MySQL 数据库中获取数据并返回给前端。注意需要设置允许跨域请求，以便前端能够访问后端接口。

Vue 3 前端获取 MySQL 数据库数据：Axios 和 Node.js 交互