正文

Vue3轻松征服MySQL：实战交互全解析

/0 浏览量
1229

引言

随着前端技术的发展，Vue.js 已经成为最受欢迎的前端框架之一。而 MySQL 作为一种流行的关系型数据库，在后端数据处理中扮演着重要角色。本文将详细介绍如何使用 Vue3 与 MySQL 进行交互，实现前后端的数据交互。

环境准备

在开始之前，请确保以下环境已准备好：

  • Node.js 和 npm
  • Vue CLI
  • MySQL 数据库

创建 Vue3 项目

  1. 使用 Vue CLI 创建一个新的 Vue3 项目：
vue create vue3-mysql-project
  1. 进入项目目录：
cd vue3-mysql-project
  1. 安装必要的依赖：
npm install axios mysql2

连接 MySQL 数据库

  1. 在 src 目录下创建一个名为 database.js 的文件，用于连接 MySQL 数据库。
const mysql = require('mysql2');

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

connection.connect(err => {
  if (err) throw err;
  console.log('Connected to the MySQL server.');
});

module.exports = connection;
  1. 修改 src/main.js 文件，引入 database.js：
import { createApp } from 'vue';
import App from './App.vue';
import database from './database';

createApp(App).use(database).mount('#app');

创建数据模型

  1. 在 src 目录下创建一个名为 models 的文件夹，用于存放数据模型。

  2. 在 models 文件夹下创建一个名为 User.js 的文件，用于定义用户模型。

const connection = require('../database');

class User {
  constructor(id, username, email) {
    this.id = id;
    this.username = username;
    this.email = email;
  }

  static async findAll() {
    const [rows] = await connection.query('SELECT * FROM users');
    return rows.map(row => new User(row.id, row.username, row.email));
  }

  static async find(id) {
    const [rows] = await connection.query('SELECT * FROM users WHERE id = ?', [id]);
    return rows.length > 0 ? new User(rows[0].id, rows[0].username, rows[0].email) : null;
  }

  async save() {
    const [rows] = await connection.query('INSERT INTO users (username, email) VALUES (?, ?)', [this.username, this.email]);
    this.id = rows.insertId;
  }

  async update() {
    await connection.query('UPDATE users SET username = ?, email = ? WHERE id = ?', [this.username, this.email, this.id]);
  }

  async delete() {
    await connection.query('DELETE FROM users WHERE id = ?', [this.id]);
  }
}

module.exports = User;

使用数据模型

  1. 在 src 目录下创建一个名为 components 的文件夹，用于存放 Vue 组件。

  2. 在 components 文件夹下创建一个名为 UserList.vue 的文件，用于展示用户列表。

<template>
  <div>
    <h1>User List</h1>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.username }} - {{ user.email }}
      </li>
    </ul>
  </div>
</template>

<script>
import User from '../models/User';

export default {
  data() {
    return {
      users: []
    };
  },
  async created() {
    this.users = await User.findAll();
  }
};
</script>
  1. 在 src/App.vue 文件中引入 UserList.vue 组件：
<template>
  <div id="app">
    <UserList />
  </div>
</template>

<script>
import UserList from './components/UserList.vue';

export default {
  components: {
    UserList
  }
};
</script>

总结

通过以上步骤，我们已经成功实现了 Vue3 与 MySQL 的交互。在实际项目中，您可以根据需要扩展数据模型和组件，实现更复杂的功能。希望本文能帮助您更好地理解 Vue3 与 MySQL 的交互。

-- 展开阅读全文 --