vue连接mysql数据库

Vue.js 是一款前端框架，主要负责构建用户界面。而 MySQL 是一款关系型数据库，主要用于存储数据。Vue.js 本身并不能直接连接 MySQL 数据库，但可以通过与后端技术（如 Node.js、PHP等）进行配合来实现连接。

以下是一个简单的示例，演示如何使用 Vue.js 和 Node.js 来连接 MySQL 数据库：

1. 创建一个 Vue.js 项目

使用 Vue CLI 来创建一个新的 Vue.js 项目：

vue create my-project

2. 安装依赖

在项目根目录下，安装以下依赖：

npm install axios mysql --save

- `axios`：用于发送 HTTP 请求。
- `mysql`：用于连接 MySQL 数据库。

3. 编写后端代码

创建一个 Node.js 服务器，并编写一个接口用于连接 MySQL 数据库：

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

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

app.get('/users', (req, res) => {
  const query = 'SELECT * FROM users';
  connection.query(query, (error, results, fields) => {
    if (error) throw error;
    res.json(results);
  });
});

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

4. 编写前端代码

在 Vue.js 的组件中，使用 `axios` 发送请求来获取从后端返回的数据：

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

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: []
    };
  },
  mounted() {
    axios.get('http://localhost:3000/users')
      .then(response => {
        this.users = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
};
</script>

在以上代码中，我们通过 `axios.get()` 发送 GET 请求到服务器，获取从 MySQL 数据库返回的用户数据，并将其渲染到页面上。

以上就是一个简单的示例，演示了如何使用 Vue.js 和 Node.js 来连接 MySQL 数据库。当然，这只是一个示例，实际应用中需要更加完善和安全的代码来连接数据库。