Vue3 + Node.js 连接 MySQL 数据库的完整指南

在现代网页开发中，前端和后端技术的结合变得尤为重要。本文将带领读者通过一个简单的示例，了解如何使用 Vue3 作为前端框架，与 Node.js 作为后端服务器，连接 MySQL 数据库并进行数据的增、删、改、查操作。

一、技术栈介绍

  • Vue3：一款流行的前端 JavaScript 框架，用于构建用户界面。
  • Node.js：一个基于 Chrome V8 引擎的 JavaScript 运行时，用于构建服务器端应用。
  • MySQL：关系型数据库管理系统，用于存储和管理数据。

二、项目结构

我们将创建一个基本的项目结构，主要包含以下目录和文件：

my-project/
├── backend/
│   ├── package.json
│   ├── server.js
│   ├── db.js
├── frontend/
│   ├── package.json
│   └── src/
│       ├── main.js
│       ├── App.vue
│       └── components/
│           └── DataDisplay.vue

三、后端开发

1. 后端环境搭建

首先，在 backend 目录下初始化 Node.js 项目并安装依赖：

cd backend
npm init -y
npm install express mysql cors
  • express：用于创建服务器。
  • mysql：用于连接 MySQL 数据库。
  • cors：用于解决跨域问题。

2. 数据库连接

创建 db.js 文件，用于连接 MySQL 数据库，这里我们使用一个名为 test_db 的数据库。

// db.js
const mysql = require('mysql');

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'your_username',
  password: 'your_password',
  database: 'test_db'
});

connection.connect((err) => {
  if (err) {
    console.error('数据库连接失败:', err);
    return;
  }
  console.log('数据库连接成功');
});

module.exports = connection;

3. 创建 API 接口

接下来，在 server.js 文件中创建 API 接口，实现数据的增、删、改、查。

// server.js
const express = require('express');
const cors = require('cors');
const db = require('./db');

const app = express();
app.use(cors());
app.use(express.json());

// 获取所有数据
app.get('/api/data', (req, res) => {
  db.query('SELECT * FROM sample_table', (err, results) => {
    if (err) {
      return res.status(500).send(err);
    }
    res.json(results);
  });
});

// 添加数据
app.post('/api/data', (req, res) => {
  const { name, value } = req.body;
  db.query('INSERT INTO sample_table (name, value) VALUES (?, ?)', [name, value], (err) => {
    if (err) {
      return res.status(500).send(err);
    }
    res.sendStatus(201);
  });
});

// 启动服务
const PORT = 3000;
app.listen(PORT, () => {
  console.log(`服务器已启动，监听端口 ${PORT}`);
});

4. 数据库表结构

确保在 MySQL 中创建如下的表结构：

CREATE TABLE sample_table (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    value INT NOT NULL
);

四、前端开发

1. 前端环境搭建

在 frontend 目录下初始化 Vue3 项目：

cd frontend
npm init vue@next

根据提示选择所需的配置。然后进入项目目录，安装 Axios，用于 HTTP 请求：

cd my-vue-app
npm install axios

2. 创建数据展示组件

在 src/components/ 目录下创建 DataDisplay.vue，用于获取并展示数据：

<template>
  <div>
    数据展示
    <ul v-if="dataList.length">
      <li v-for="item in dataList" :key="item.id">
        {{ item.name }}: {{ item.value }}
      </li>
    </ul>
    <p v-else>没有数据可显示</p>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      dataList: []
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      const response = await axios.get('http://localhost:3000/api/data');
      this.dataList = response.data;
    }
  }
};
</script>

3. 主文件配置

在 src/main.js 中引入组件并渲染：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import DataDisplay from './components/DataDisplay.vue';

const app = createApp(App);
app.component('DataDisplay', DataDisplay);
app.mount('#app');

4. 主组件构建

在 src/App.vue 中使用 DataDisplay 组件来展示数据：

<template>
  <div id="app">
    <DataDisplay />
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

五、数据可视化 （可选）

为了更直观地展示数据，可以添加一个饼状图，使用 mermaid 语法表示：

pie
    title 数据分布
    "类型A": 40
    "类型B": 30
    "类型C": 20
    "类型D": 10

六、总结

通过上述步骤，我们已经成功搭建了一个基于 Vue3 和 Node.js 的全栈应用，实现了连接 MySQL 数据库并进行数据的增、删、改、查操作。希望这篇文章能帮助你更好地理解前后端分离开发及数据库操作的基本流程。

在实际项目中，你可能需要考虑数据验证、错误处理和安全性等因素，以确保应用的健壮性。如果希望进一步提升性能，可以考虑使用ORM框架，简化数据库操作。

希望这篇文章对你有所帮助，祝你在Web开发的道路上越走越远！