要在 Next.js 中连接 MySQL 数据库并实现增删改查(CRUD)操作,我们通常会在 API 路由中处理这些逻辑。下面的步骤将指导你如何实现这一过程:
步骤1:安装必要的 npm 包
首先安装 mysql
或 mysql2
包来操作 MySQL 数据库,以及 dotenv
包来管理配置信息。
bash
npm install mysql2 dotenv
步骤2:配置环境变量
在根目录下创建 .env.local
文件,添加数据库连接信息以保护敏感数据:
env
MYSQL_HOST=localhost
MYSQL_USER=root
MYSQL_PASSWORD=password
MYSQL_DATABASE=mydatabasename
在 next.config.js
中确保 dotenv
被加载:
JavaScript
require('dotenv').config();
module.exports = {
// Your next.js config
};
步骤3:建立数据库连接
创建数据库连接的辅助函数 db.js
:
JavaScript
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
:
JavaScript
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 路由:
JavaScript
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
路由一样。
这里是一个创建数据记录的简单例子:
JavaScript
// 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,这些工具为数据库操作提供了更安全、更易于管理的接口,并对输入进行了更彻底的验证。此外,对于复杂的场景,还应考虑使用适当的数据库事务管理。