景德镇市建设局建设信用网站,南阳微网站制作,中国广告公司,兰州最新消息今天前言
本文主要为大家介绍#xff0c;如何使用 Next 框架实现一个简单的后端接口#xff0c;并且从数据库中请求数据返回给前端。
实现
创建api/getData文件夹
项目创建完成后在 app 文件下新建api文件夹#xff0c;在 api 文件夹下新建 getData 文件夹#xff0c;在 ge…前言
本文主要为大家介绍如何使用 Next 框架实现一个简单的后端接口并且从数据库中请求数据返回给前端。
实现
创建api/getData文件夹
项目创建完成后在 app 文件下新建api文件夹在 api 文件夹下新建 getData 文件夹在 getData 文件夹下新建 route.js这里面用于存储我们的接口信息如下 注意在 Nuxt.js中app文件夹通常用于存放应用程序的配置和组件而 api文件夹则用于存放API路由处理程序。
当我们在 api文件夹中创建子文件夹时Nuxt.js 会将这些子文件夹视为 API 的路径的一部分。我们就可以直接将子文件夹的名称作为 API 的路径的一部分。
拿我们上面创建的举例我们在页面中请求的路径就为api/getData
route.js中写接口信息
import { NextResponse } from next/server
const mysql require(mysql2/promise)// 创建全局的 MySQL 连接池
const pool mysql.createPool({connectionLimit: 10,host: 127.0.0.1, // 服务器地址user: root,password: 123456, // 密码database: jackson_blog_dev,
})export async function GET(request) {try {// 从连接池中获取连接const connection await pool.getConnection()// 执行 MySQL 查询const [rows, fields] await connection.query(SELECT * FROM jacksonblogbacked)// 释放连接回连接池connection.release()return NextResponse.json({ data: rows }, { status: 200 })} catch (error) {console.error(Error:, error)return NextResponse.json({ error: Internal Server Error }, { status: 500 })}
}安装 mysql2
安装 mysql2 用于连接本地数据库 npm install mysql2 创建 mysql 连接并把相应信息填写上
这一步大家要按照自己的数据库信息
// 创建全局的 MySQL 连接池
const pool mysql.createPool({connectionLimit: 10,host: 127.0.0.1, // 服务器地址user: root,password: 123456, // 密码database: jackson_blog_dev,
})接下来就是从表中查询数据我们使用 next/server 提供的 NextResponse 把数据以 json 对象的形式返回出去即可。
export async function GET(request) {try {// 从连接池中获取连接const connection await pool.getConnection()// 执行 MySQL 查询const [rows, fields] await connection.query(SELECT * FROM jacksonblogbacked)// 释放连接回连接池connection.release()return NextResponse.json({ data: rows }, { status: 200 })} catch (error) {console.error(Error:, error)return NextResponse.json({ error: Internal Server Error }, { status: 500 })}
}
使用接口
现在我们已经在把接口信息写好了如何在页面中使用呢
页面中使用
接口已经初始化好了接下来就是在页面中使用接口
在 app/page.tsx 中
use client //客户端渲染时
import React, { useState, useEffect } from reactconst Home () {const [data, setData] useState([])useEffect(() {fetchData()}, [])const fetchData async () {try {const response await fetch(/api/getData)const res await response.json()const data res.data[0]setData(data.title)console.log(data: , data)} catch (error) {console.error(Error fetching data:, error)}}return (divh1测试mysql连接:{data}/h1/div)
}export default Home这里为了测试数据响应渲染到页面中我们使用了useState钩子函数需要在顶部加上 use client 表示在客户端渲染即可。
我们直接使用fetch请求我们的接口正如我上面所说的直接请求 /api/getData 这个接口地址即可无需再进行其他接口配置。 const fetchData async () {try {const response await fetch(/api/getData)const res await response.json()const data res.data[0]setData(data.title)console.log(data: , data)} catch (error) {console.error(Error fetching data:, error)}}
最后将得到的数据渲染到页面中即可 const data res.data[0]setData(data.title)
效果如下 总结
首先在 Next 中创建好接口文件接口文件的模式按照 Next 所提供的接口格式进行接口配置最后在页面中直接使用接口路径使用即可。
以上就是如何使用 Next 框架实现一个简单的后端接口所有内容如果你感觉写的还不错对你有帮助的话可以点个赞支持一下你的支持就是作者最大的动力
源码
所有代码都已经提交到 GitHub
GitHubchenyajun-create/next-mysql (github.com)
