使用Pages Functions为前端创建应用程序接口
在本教程中，你将构建一个全栈 Pages 应用程序。你的应用程序将包含
- 使用 Cloudflare 页面和 React 框架构建的前端。
- 使用 Pages Functions构建的 JSON API 可返回博客文章，并可在前端进行检索和渲染。
如果你希望使用无头内容管理系统(headless CMS)而不是应用程序接口(API)来呈现博客内容，请参阅无头内容管理系统教程。
建立你的前端
首先，使用 React 框架创建一个新的 Pages 应用程序。
创建一个新的 React 项目
在终端中使用 create-react-app 命令创建一个名为 blog-frontend 的新 React 项目。进入新创建的 blog-frontend 目录并启动本地开发服务器：
设置你的 React 项目
设置 React 项目
- 在
blog-frontend目录根目录下安装 React Router。
使用 npm：
With yarn:
- 清除
src/App.js中的内容。复制并粘贴以下代码，将 React 路由器导入App.js，并新建一个包含两条路由的路由器：
- 在
src目录中新建一个名为components的文件夹。 - 在
components目录中创建两个文件：posts.js和post.js。这些文件将从 API 中加载博客文章，并对其进行渲染。 - 用以下代码填充
posts.js：
- 用以下代码填充
post.js：
建立你的应用程序接口
现在，你将创建一个 Pages Function，用于存储博客内容并通过 JSON API 进行检索。
撰写你的Pages Function
创建作为 JSON API 的Pages Function：
- 在
blog-frontend目录下创建functions目录。 - 在
functions中创建名为api的目录。 - 在
api目录下创建一个posts.js文件。 - 用以下代码填充
posts.js：
这段代码将获取博客数据(来自 data.js，你将在第 8 步中制作)，并从路径 /api/posts以 JSON 响应形式返回。
- 在
api目录中创建名为post的目录。 - 在
post目录中创建一个data.js文件。 - 用以下代码填充
data.js。这是你的博客内容、博客标题和其他博客信息的存放位置。
- 在
post目录下创建一个[[id]].js文件。 - 用以下代码填充
[[id]].js：
[[id]].js是一个动态路由，用于接受博文id。
部署
配置好 Pages 应用程序和 Pages 功能后，使用 Wrangler 或通过仪表板部署项目。
使用 Wrangler 进行部署
在 blog-frontend 目录中，运行 wrangler pages deploy 将项目部署到 Cloudflare 控制面板。
通过仪表板部署
要通过 Cloudflare 控制面板进行部署，你需要为 Pages 项目创建一个新的 Git 仓库，并将 Git 仓库连接到 Cloudflare。本教程使用 GitHub 作为 Git 提供商。
创建新的存储库
访问 repo.new 创建一个新的 GitHub 仓库。创建新仓库后，在终端运行以下命令，准备并向 GitHub 推送本地应用程序：
使用 Cloudflare 页面进行部署
将应用程序部署到 Pages：
- 登录 Cloudflare 仪表板 并选择你的账户。
- 在账户主页，选择 工作者和页面> 创建应用程序> 页面> 连接到 Git。
- 选择创建的新 GitHub 仓库，并在 “设置构建和部署“部分提供以下信息：
| Configuration option | Value |
|---|---|
| Production branch | main |
| Build command | npm run build |
| Build directory | build |
配置网站后，开始首次部署。你应该会看到 Cloudflare 页面正在安装 blog-frontend、你的项目依赖项，并正在构建你的网站。
完成本教程后，你就创建了一个全栈 Pages 应用程序。
相关资源
- 了解页面功能路由