Next.js【详解】获取数据（访问接口）
Next.js 中分为 服务端组件 和 客户端组件，内置的获取数据各不相同
服务端组件
方式1 – 使用 fetch
export default async function Page() {const data = await fetch('https://api.vercel.app/blog')const posts = await data.json()return (<ul>{posts.map((post) => (<li key={post.id}>{post.title}</li>))}</ul>)
}
方式2 – 使用 ORM 或 数据库
以 MongoDB 为例，使用 mongoose 连接
1. 安装 mongoose
pnpm i mongoose
2. 创建数据库连接文件 src\app\lib\db.js
const mongoose = require("mongoose");async function connectDB() {try {// 连接到本地 MongoDB 数据库 -- mongodb://数据库的用户名:密码@数据库的主机名:端口号/数据库的名称await mongoose.connect("mongodb://test:password@localhost:27018/test");console.log("MongoDB 连接成功");} catch (error) {console.error("MongoDB 连接报错", error);// 退出进程process.exit(1);}
}module.exports = connectDB;
3. 创建数据表映射文件 src\app\lib\models\Blog.js
const mongoose = require("mongoose");const blogSchema = new mongoose.Schema({title: String,content: String,
});
// 需要有第三个参数，否则对应的数据表名称会是blogs
const Blog = mongoose.model("blog", blogSchema, "blog");module.exports = Blog;
4. 页面中导入使用
src\app\test\page.tsx
import connectDB from "../lib/db";
import Blog from "../lib/models/Blog";export default async function HomePage() {try {// 连接数据库let res = await connectDB();// 查询博客数据const blogList = await Blog.find();return (<div><h1>博客列表</h1><ul>{blogList.map((blog) => (<li key={blog._id.toString()}>{blog.title}</li>))}</ul></div>);} catch (error) {console.error("获取数据出错:", error);return <div>获取数据失败</div>;}
}
5. Docker destop 安装 MongoDB
见 https://blog.csdn.net/weixin_41192489/article/details/145176073
6. 使用 MongoDB Compass 连接 MongoDB
下载安装 MongoDB Compass
https://www.mongodb.com/zh-cn/docs/compass/current/
新建连接
7. 创建数据库 test , 数据表 blog
8. 创建一条测试数据
{"_id": {"$oid": "67aefdd5de9bca5aae5aa6f8"},"title": "第1篇博客的标题","content": "第1篇博客的内容"
}
9. 为数据库 test 创建用户名、密码和角色
db.createUser( { user: "test", pwd: "password", roles: [ { role: "dbOwner", db: "test" } ] } )
- user：指定要创建的用户名。
- pwd：指定该用户的密码。
- roles：指定用户的角色，角色决定了用户对数据库的操作权限。可以指定多个角色，每个角色是一个包含 role 和 db 的对象。role 是角色名称，db 是角色生效的数据库。
常见的角色及其说明：
- read：允许用户读取指定数据库中的数据。
- readWrite：允许用户读写指定数据库中的数据。
- dbAdmin：允许用户管理指定数据库，如创建索引、查看统计信息等。
- userAdmin：允许用户管理指定数据库中的用户和角色。
- dbOwner：拥有指定数据库的所有权限，包括读写、管理用户和角色等。
- root：拥有所有数据库的最高权限。
10. 启动项目，测试效果
浏览器访问 http://localhost:3000/test，效果如下：
客户端组件
见官网 https://nextjs.org/docs/app/getting-started/fetching-data#client-components