ToB企服应用市场:ToB评测及商务社交产业平台

标题: 使用 Next.js 毗连 mysql 数据库 [打印本页]
作者: 拉不拉稀肚拉稀    时间: 2024-8-13 15:39
标题: 使用 Next.js 毗连 mysql 数据库
前言

本文主要为大家介绍，如何使用 Next 框架实现一个简单的后端接口，并且从数据库中请求数据返回给前端。
实现

创建api/getData文件夹

项目创建完成后在 app 文件下新建api文件夹，在 api 文件夹下新建 getData 文件夹，在 getData 文件夹下新建 route.js，这里面用于存储我们的接口信息，如下

留意：在 Next.js中，app文件夹通常用于存放应用程序的配置和组件，而 api文件夹则用于存放API路由处置惩罚程序。
当我们在 api文件夹中创建子文件夹时，Next.js 会将这些子文件夹视为 API 的路径的一部分。我们就可以直接将子文件夹的名称作为 API 的路径的一部分。
拿我们上面创建的举例，我们在页面中请求的路径就为：api/getData
route.js中写接口信息

  1. import { NextResponse } from 'next/server'
  2. const mysql = require('mysql2/promise')
  4. // 创建全局的 MySQL 连接池
  5. const pool = mysql.createPool({
  6.   connectionLimit: 10,
  7.   host: '127.0.0.1', // 服务器地址
  8.   user: 'root',
  9.   password: '123456', // 密码
  10.   database: 'jackson_blog_dev',
  11. })
  13. export async function GET(request) {
  14.   try {
  15.     // 从连接池中获取连接
  16.     const connection = await pool.getConnection()
  18.     // 执行 MySQL 查询
  19.     const [rows, fields] = await connection.query('SELECT * FROM jacksonblogbacked')
  21.     // 释放连接回连接池
  22.     connection.release()
  24.     return NextResponse.json({ data: rows }, { status: 200 })
  25.   } catch (error) {
  26.     console.error('Error:', error)
  27.     return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 })
  28.   }
  29. }
复制代码
安装 mysql2
安装 mysql2 用于毗连本地数据库
   npm install mysql2
  创建 mysql 毗连，并把相应信息填写上
（这一步大家要按照本身的数据库信息）
  1. // 创建全局的 MySQL 连接池
  2. const pool = mysql.createPool({
  3.   connectionLimit: 10,
  4.   host: '127.0.0.1', // 服务器地址
  5.   user: 'root',
  6.   password: '123456', // 密码
  7.   database: 'jackson_blog_dev',
  8. })
复制代码
接下来就是从表中查询数据，我们使用 'next/server' 提供的 NextResponse 把数据以 json 对象的形式返回出去即可。
  1. export async function GET(request) {
  2.   try {
  3.     // 从连接池中获取连接
  4.     const connection = await pool.getConnection()
  6.     // 执行 MySQL 查询
  7.     const [rows, fields] = await connection.query('SELECT * FROM jacksonblogbacked')
  9.     // 释放连接回连接池
  10.     connection.release()
  12.     return NextResponse.json({ data: rows }, { status: 200 })
  13.   } catch (error) {
  14.     console.error('Error:', error)
  15.     return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 })
  16.   }
  17. }
复制代码
使用接口

现在我们已经在把接口信息写好了，如何在页面中使用呢？
页面中使用

接口已经初始化好了，接下来就是在页面中使用接口
在 app/page.tsx 中
  1. 'use client' //客户端渲染时
  2. import React, { useState, useEffect } from 'react'
  4. const Home = () => {
  5.   const [data, setData] = useState([])
  7.   useEffect(() => {
  8.     fetchData()
  9.   }, [])
  11.   const fetchData = async () => {
  12.     try {
  13.       const response = await fetch('/api/getData')
  14.       const res = await response.json()
  15.       const data = res.data[0]
  16.       setData(data.title)
  17.       console.log('data: ', data)
  18.     } catch (error) {
  19.       console.error('Error fetching data:', error)
  20.     }
  21.   }
  23.   return (
  24.     <div>
  25.       <h1>测试mysql连接:{data}</h1>
  26.     </div>
  27.   )
  28. }
  30. export default Home
复制代码
这里为了测试数据响应渲染到页面中，我们使用了useState钩子函数，需要在顶部加上 'use client' 表现在客户端渲染即可。
我们直接使用fetch请求我们的接口，正如我上面所说的，直接请求 /api/getData 这个接口地址即可，无需再进行其他接口配置。
  1.   const fetchData = async () => {
  2.     try {
  3.       const response = await fetch('/api/getData')
  4.       const res = await response.json()
  5.       const data = res.data[0]
  6.       setData(data.title)
  7.       console.log('data: ', data)
  8.     } catch (error) {
  9.       console.error('Error fetching data:', error)
  10.     }
  11.   }
复制代码
最后将得到的数据渲染到页面中即可
  1.       const data = res.data[0]
  2.       setData(data.title)
复制代码
效果如下：


总结

首先在 Next 中创建好接口文件，接口文件的模式按照 Next 所提供的接口格式进行接口配置，最后在页面中直接使用接口路径使用即可。
以上就是如何使用 Next 框架实现一个简单的后端接口全部内容，如果你感觉写的还不错对你有帮助的话，可以点个赞支持一下，你的支持就是作者最大的动力 ！
源码

全部代码都已经提交到 GitHub
GitHub：chenyajun-create/next-mysql (github.com)

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4