引言
随着前端技术的发展,Vue.js 已经成为最受欢迎的前端框架之一。而 MySQL 作为一种流行的关系型数据库,在后端数据处理中扮演着重要角色。本文将详细介绍如何使用 Vue3 与 MySQL 进行交互,实现前后端的数据交互。
环境准备
在开始之前,请确保以下环境已准备好:
- Node.js 和 npm
- Vue CLI
- MySQL 数据库
创建 Vue3 项目
- 使用 Vue CLI 创建一个新的 Vue3 项目:
vue create vue3-mysql-project
- 进入项目目录:
cd vue3-mysql-project
- 安装必要的依赖:
npm install axios mysql2
连接 MySQL 数据库
- 在
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;
- 修改
src/main.js文件,引入database.js:
import { createApp } from 'vue';
import App from './App.vue';
import database from './database';
createApp(App).use(database).mount('#app');
创建数据模型
在
src目录下创建一个名为models的文件夹,用于存放数据模型。在
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;
使用数据模型
在
src目录下创建一个名为components的文件夹,用于存放 Vue 组件。在
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>
- 在
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 的交互。
