记账网站3-连数据库

第 1 步：打开 MySQL，然后创建一个数据库

CREATE DATABASE moneyweb
CHARACTER SET utf8mb4
COLLATE utf8mb4_unicode_ci;

然后：

USE moneyweb;

接着创建第一张表：

CREATE TABLE transactions (
    id BIGINT PRIMARY KEY AUTO_INCREMENT,
    type ENUM('income', 'expense') NOT NULL,
    amount DECIMAL(10, 2) NOT NULL,
    category VARCHAR(50) NOT NULL,
    note VARCHAR(255),
    transaction_date DATE NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

你现在先只做这一步。

做完以后执行：

SHOW TABLES;

如果看到：

transactions

就说明成功了。

第 2 步：让 Next.js 连接 MySQL

现在的网站和数据库还是两个互相不认识的人：

浏览器
   ↓
Next.js 页面
   ↓
？？？
   ↓
MySQL moneyweb
   ↓
transactions

我们接下来就是把中间打通。

1.退出 MySQL

你现在这个窗口输入：

exit;

回车。

然后回到你的 VS Code。

2.安装 MySQL 驱动

在 VS Code 的 moneyweb 项目终端里输入：

npm install mysql2

注意一定确认终端当前位置是类似：

D:\daima\moneyweb>

安装完成后，通常会看到类似：

added ... packages

或者：

up to date

都可以。

3.创建环境变量文件

在 VS Code 左边项目最外层，也就是和：

package.json
next.config.ts
tsconfig.json

同一级的位置，新建：

.env.local

里面写：

DB_HOST=localhost
DB_USER=root
DB_PASSWORD=你的MySQL密码
DB_NAME=moneyweb

4.创建数据库连接文件

接下来在项目里新建：

lib

文件夹。

然后在 lib 里面新建：

db.ts

所以结构大概变成：

moneyweb
├─ app
├─ lib
│  └─ db.ts       ← 新建
├─ public
├─ .env.local     ← 新建
├─ package.json
├─ tsconfig.json
└─ ...

打开 db.ts，写：

import mysql from "mysql2/promise";

const pool = mysql.createPool({
  host: process.env.DB_HOST,
  user: process.env.DB_USER,
  password: process.env.DB_PASSWORD,
  database: process.env.DB_NAME,
});

export default pool;

第 3 步：查数据

1.创建 API

在 app 文件夹里面依次创建：

api
└─ transactions
   └─ route.ts

最后的目录应该是：

moneyWeb
├─ app
│  ├─ api
│  │  └─ transactions
│  │     └─ route.ts
│  ├─ globals.css
│  ├─ layout.tsx
│  └─ page.tsx
├─ lib
│  └─ db.ts
├─ .env.local
└─ ...

然后打开 route.ts，写：

import { NextResponse } from "next/server";
import pool from "@/lib/db";

export async function GET() {
  try {
    const [rows] = await pool.query(
      "SELECT * FROM transactions ORDER BY transaction_date DESC"
    );

    return NextResponse.json(rows);
  } catch (error) {
    console.error("查询账单失败：", error);

    return NextResponse.json(
      { error: "查询账单失败" },
      { status: 500 }
    );
  }
}

这几行在干嘛：

浏览器访问 /api/transactions
              ↓
        GET() 被执行
              ↓
         pool.query()
              ↓
          连接 MySQL
              ↓
SELECT * FROM transactions
              ↓
        返回查询结果
              ↓
      浏览器看到 JSON

2.启动项目测试

保存文件后，在下面终端输入：

npm run dev

看到类似：

Local: http://localhost:3000

之后在浏览器访问：

http://localhost:3000/api/transactions

这里有两个很重要的可能结果：

如果看到：

[]

🎉 成功了。

[] 不是报错，而是代表：

Next.js 已经成功连接 MySQL，并且成功查询了 transactions 表，只是表里目前一条账单都没有。

如果看到：

{"error":"查询账单失败"}

把浏览器页面 + VS Code 终端报错截图 给chatgpt。

ps:不放心可以额外加一条测试（这个可做可不做）

进入 MySQL，然后执行：

USE moneyweb;

再插入一条测试数据：

INSERT INTO transactions
(type, amount, category, note, transaction_date)
VALUES
('expense', 25.00, '餐饮', '午饭', '2026-08-12');

然后查询一下：

SELECT * FROM transactions;

如果能看到刚才这条记录，再回浏览器刷新：

http://localhost:3000/api/transactions

正常情况下就不再是 []，而会出现类似：

[
  {
    "id": 1,
    "type": "expense",
    "amount": "25.00",
    "category": "餐饮",
    "note": "午饭",
    "transaction_date": "2026-08-11T16:00:00.000Z",
    "created_at": "..."
  }
]

这里日期如果显示成前一天的 16:00:00.000Z，也先不用慌，这是 时区显示问题 ，后面做页面时再处理。

今日最终效果呈现