React+Node——next.js 构建前后端项目

一、安装全局依赖

npm i -g create-next-app
1

二、创建next项目

create-next-app react-next-demo
//或
create-next-app react-next-demo --typescript
1
2
3

三、加载mysql依赖

npm i -S mysql2
1

四、运行项目

npm run dev
1

五、创建db文件目录，目录下创建index.ts

import { createConnection } from "mysql2";

// 创建数据库连接
const db = createConnection({
  host: 'localhost',    // 数据库主机名
  user: 'root',         // 数据库用户名
  password: 'password', // 数据库密码
  database: 'mydb'      // 数据库名称
});

// 连接到数据库
db.connect((err) => {
  if (err) {
    console.error('无法连接到数据库:', err);
    return;
  }
  console.log('已成功连接到数据库');
});

module.exports = db;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

六、创建pages文件目录,目录下创建api文件目录，api目录下创建user.ts

请求地址 http://localhost:3000/api/user

import db from "@/db";
import { NextApiRequest, NextApiResponse } from "next";

export default (req: NextApiRequest, res: NextApiResponse) => {
  db.query(`SELECT * FROM ....`, (err, result) => {
    res.status(200).json(result)
  })
};
1
2
3
4
5
6
7
8

七、在pages目录下创建user.tsx

页面访问地址 http://localhost:3000/user

import { useEffect } from "react"

export default () => {
  useEffect(() => {
    fetch(`api/user`).then(res => {
      console.log(res) //接口数据
    })
  }, [])

  return <div>Hello Next.js</div>
}
1
2
3
4
5
6
7
8
9
10
11

Tip 目录结构