本地vue3 项目与Mysql服务器对接

要将本地的Vue3项目与MySQL服务器对接，你需要使用一些工具和技术来实现。

首先，你需要在Vue3项目中安装Axios库，用于向MySQL服务器发送HTTP请求。你可以使用以下命令安装Axios库：

npm install axios --save

接下来，你需要在Vue3项目中创建一个API服务来与MySQL服务器进行通信。你可以创建一个名为"api.js"的文件，然后将以下代码添加到文件中：

import axios from 'axios';

const api = axios.create({
  baseURL: 'http://localhost:3000', // MySQL服务器的地址和端口号
});

export default api;

在这个示例中，我们使用Axios创建了一个名为"api"的对象，并设置了MySQL服务器的地址和端口号。

然后，你需要编写服务器端代码以实现与MySQL数据库的通信。你可以使用Node.js和Express框架来编写服务器端代码。以下是一个简单的示例：

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

const app = express();

const connection = mysql.createConnection({
  host: 'localhost', // MySQL服务器的地址
  user: 'root', // MySQL用户名
  password: 'password', // MySQL密码
  database: 'database', // MySQL数据库名
});

connection.connect((err) => {
  if (err) {
    console.error('Error connecting to MySQL server: ' + err.stack);
    return;
  }
  console.log('Connected to MySQL server.');
});

app.get('/users', (req, res) => {
  connection.query('SELECT * FROM users', (err, results) => {
    if (err) {
      console.error('Error retrieving data from MySQL server: ' + err.stack);
      return;
    }
    res.send(results);
  });
});

app.listen(3000, () => {
  console.log('Server started on port 3000.');
});

在这个示例中，我们使用Express框架创建了一个名为"app"的应用程序，并使用MySQL连接对象连接到MySQL服务器。我们还定义了一个名为"/users"的路由，用于从MySQL数据库中检索用户数据。当我们向路由发送GET请求时，服务器将从MySQL数据库中检索用户数据，并将其发送回客户端。

最后，你需要在Vue3项目中使用"api"对象发送HTTP请求来获取MySQL服务器中的数据。以下是一个简单的示例：

<template>
  <div>
    <h1>Users</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
import api from './api';

export default {
  name: 'Users',
  data() {
    return {
      users: [],
    };
  },
  mounted() {
    api.get('/users')
      .then(response => {
        this.users = response.data;
      })
      .catch(error => {
        console.error('Error retrieving data from server: ' + error.stack);
      });
  },
};
</script>

在这个示例中，我们在Vue3项目中创建了一个名为"Users"的组件，并使用"api"对象从MySQL服务器中检索用户数据。我们在组件的"mounted"生命周期钩子中发送HTTP请求，并将响应数据存储在"users"数组中。最后，我们在组件模板中使用"v-for"指令来循环遍历"users"数组，并显示每个用户的名称。

希望这些代码能够帮助你将本地的Vue3项目与MySQL服务器对接。