Nextjs 中如何连接 Mysql 数据库并进行添加、删除、更改等操作

最编程 2024-05-22 11:13:38

...

要在 Next.js 中连接 MySQL 数据库并实现增删改查（CRUD）操作，我们通常会在 API 路由中处理这些逻辑。下面的步骤将指导你如何实现这一过程：

步骤1：安装必要的 npm 包

首先安装 mysql 或 mysql2 包来操作 MySQL 数据库，以及 dotenv 包来管理配置信息。

npm install mysql2 dotenv

步骤2：配置环境变量

在根目录下创建 .env.local 文件，添加数据库连接信息以保护敏感数据：

MYSQL_HOST=localhost
MYSQL_USER=root
MYSQL_PASSWORD=password
MYSQL_DATABASE=mydatabasename

在 next.config.js 中确保 dotenv 被加载：

require('dotenv').config();
 
module.exports = {
  // Your next.js config
};

步骤3：建立数据库连接

创建数据库连接的辅助函数 db.js：

import mysql from 'mysql2/promise';
 
// 创建数据库连接池以提高性能
const pool = mysql.createPool({
  host: process.env.MYSQL_HOST,
  user: process.env.MYSQL_USER,
  password: process.env.MYSQL_PASSWORD,
  database: process.env.MYSQL_DATABASE,
  waitForConnections: true,
  connectionLimit: 10,
  queueLimit: 0,
});
 
export default pool;

步骤4：创建 API 路由

在 pages/api/ 目录下创建 CRUD 相关的 API 路由。例如，我们创建 pages/api/users.js：

import pool from '../../db';
 
export default async function handler(req, res) {
  switch (req.method) {
    case 'GET':
      return getUsers(req, res);
    case 'POST':
      return addUser(req, res);
    // 添加其它方法的处理逻辑（PUT、DELETE）
    default:
      return res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}
 
const getUsers = async (req, res) => {
  try {
    const [rows] = await pool.query('SELECT * FROM users');
    res.status(200).json(rows);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
};
 
const addUser = async (req, res) => {
  const { name, email } = req.body;
  try {
    const [result] = await pool.query('INSERT INTO users (name, email) VALUES (?, ?)', [name, email]);
    res.status(201).json(result);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
};

步骤5：在前端页面中使用 API

在你的 React 组件中使用 fetch 调用 API 路由：

const fetchUsers = async () => {
  const res = await fetch('/api/users');
  const data = await res.json();
  // 使用 data
};
 
const createUser = async (userData) => {
  const res = await fetch('/api/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(userData),
  });
  const data = await res.json();
  // 使用 data
};

提示与最佳实践

API 路由中的数据库操作应尽量简洁，业务逻辑应该放在服务层。既然你已经设置好了 /api/data API 路由的基本情况，你可能希望在不同的 API 路由中实现CRUD的其他部分。让我们接着上述的例子，为了实现创建（Create）、更新（Update）和删除（Delete）的操作，你可能需要设置新的 API 路由。

例如，你可能会有以下的 API 路由：

POST /api/create：用于创建新的记录
PUT /api/update：用于更新已有的记录
DELETE /api/delete：用于删除记录

这些路由会分别在它们各自的文件中被处理，比如 create.js, update.js, delete.js 在 pages/api 目录中。每个文件中，你会根据 HTTP 方法的不同来编写不同的逻辑，就像例子中显示的 /api/data 路由一样。

这里是一个创建数据记录的简单例子：

// pages/api/create.js
import mysql from 'mysql2/promise';
 
export default async function handler(req, res) {
  if (req.method === 'POST') {
    // 从请求体中获取数据
    const { name, value } = req.body;
    
    // 获取数据库连接
    const connection = await mysql.createConnection({
      host: process.env.MYSQL_HOST,
      user: process.env.MYSQL_USER,
      password: process.env.MYSQL_PASSWORD,
      database: process.env.MYSQL_DATABASE,
    });
 
    try {
      // 在数据库中执行插入语句
      const query = 'INSERT INTO my_table (name, value) VALUES (?, ?)';
      const [result] = await connection.execute(query, [name, value]);
      connection.end();
 
      // 返回插入结果
      res.status(200).json({ result });
    } catch (error) {
      // 处理可能的错误
      console.error('Failed to create record', error);
      connection.end();
      res.status(500).json({ error: 'Failed to create record' });
    }
  } else {
    // 处理不正确的 HTTP 方法
    res.setHeader('Allow', ['POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

在上述代码中，你会看到一个处理 POST 请求的 API 路由，并在数据库中插入数据。类似的模式可以用于实现更新和删除操作。

请注意，与生产环境中的企业应用程序相比，该示例简化了错误处理和安全考虑，比如对用户输入的验证和清理。在生产环境中，建议使用 ORM（对象关系映射）工具，比如 Sequelize 或 TypeORM，这些工具为数据库操作提供了更安全、更易于管理的接口，并对输入进行了更彻底的验证。此外，对于复杂的场景，还应考虑使用适当的数据库事务管理。

上一篇： Q 扎 16E 数据库--金块

下一篇：如何在 Debian 11 上安装 SQLite