Vue项目连接MySQL数据库实现增删改查的详细教程

Vue 项目与 MySQL 数据库：实现增删改查功能

简介

Vue.js 和 MySQL 是两个在 Web 开发中广泛使用的强大工具。将它们结合起来，可以构建具有数据持久性和交互性的应用程序。本文将详细介绍如何使用 Vue 项目连接 MySQL 数据库并实现增删改查 (CRUD) 操作。

创建 Vue 项目

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

vue create 项目名

安装必要插件

安装用于实现 Vue 和 MySQL 交互的必要插件：

npm install express
npm install cors
npm install mysql
npm install axios

搭建本地服务器

在项目中创建一个 server 文件夹并创建 app.js 文件：

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

const app = express();

app.use(cors());

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

app.listen(3000);

连接数据库

在 app.js 中，使用 mysql.createConnection() 连接到 MySQL 数据库。

编写 CRUD 代码

实现以下增删改查接口：

• 获取产品列表：/api/products
• 创建产品：/api/products
• 更新产品：/api/products/:id
• 删除产品：/api/products/:id

示例代码

// 获取产品列表
app.get('/api/products', (req, res) => {
  connection.query('SELECT * FROM products', (err, results) => {
    if (err) {
      res.status(500).send(err);
    } else {
      res.status(200).send(results);
    }
  });
});

// 创建产品
app.post('/api/products', (req, res) => {
  const product = req.body;
  connection.query('INSERT INTO products SET ?', product, (err, result) => {
    if (err) {
      res.status(500).send(err);
    } else {
      res.status(201).send(result);
    }
  });
});

// 更新产品
app.put('/api/products/:id', (req, res) => {
  const product = req.body;
  connection.query('UPDATE products SET ? WHERE id = ?', [product, req.params.id], (err, result) => {
    if (err) {
      res.status(500).send(err);
    } else {
      res.status(200).send(result);
    }
  });
});

// 删除产品
app.delete('/api/products/:id', (req, res) => {
  connection.query('DELETE FROM products WHERE id = ?', req.params.id, (err, result) => {
    if (err) {
      res.status(500).send(err);
    } else {
      res.status(200).send(result);
    }
  });
});

结论

通过遵循本文的步骤，您可以轻松地将 Vue 项目连接到 MySQL 数据库并实现 CRUD 操作。这将使您能够创建具有交互性且数据驱动的应用程序。

常见问题解答

1. 如何使用 axios 发送 HTTP 请求？

import axios from 'axios';

axios.get('/api/products')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

2. 如何处理服务器端错误？

在 app.js 中使用 error-handling 中间件：

app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).send('Something broke!');
});

3. 如何防止跨域请求错误？

在服务器端使用 cors 中间件：

app.use(cors());

4. 如何进行数据库事务？

connection.beginTransaction(err => {
  if (err) {
    throw err;
  }
  // 执行事务
  // ...
  connection.commit(err => {
    if (err) {
      connection.rollback(() => {});
    }
  });
});

5. 如何使用 Docker 部署 Vue 项目和 MySQL 数据库？

可以创建两个单独的 Docker 容器，一个用于 Vue 项目，另一个用于 MySQL 数据库。