- 支持试读
准备工作
本专题需要事先做的准备工作。专题完结之后，你可以通过 zliu.tech、liziqi.ggff.net、zlusi.me和reqwest.me 体验我们提供的域名分发服务。 Cloudflare 常用 API
本章我们讨论本专题需要的 Cloudflare API。- 支持试读
项目初始化及配置
本章将对我们的项目进行初始化，然后编写配置。 数据及模型定义
本章我们将对数据表和对应的数据模型进行定义。数据库操作模块
本章我们将简单实现一些数据库的操作。- 支持试读
注册 Cloudflare Turnstile 并将其集成到 AXUM 应用中
本章将讨论注册 Cloudflare Turnstile 并将其集成到 AXUM 应用中。 - 支持试读
开发前端 SPA
为了更直观的进行 API 开发，我们先来编写前端 SPA。 用户注册及邮箱激活
本章将实现用户注册功能：包括数据库操作、邮箱激活账号等。本章包含后端和前端功能。用户登录、退出登录及鉴权中间件
本章将实现用户登录和退出登录功能：包括会话管理、鉴权中间件等。本章包含后端和前端功能。用户注册域名
本章将实现用户注册域名功能：包括数据库操作、CF API 封装调用等。本章包含后端和前端功能。用户管理域名
本章将实现用户管理域名功能：包括修改、删除域名的数据库操作、CF API 封装调用等。本章包含后端和前端功能。- 支持试读
用户积分变动记录
本章将实现用户查看本账号积分变动功能。本章包含后端和前端功能。 用户修改密码
本章将实现用户修改密码功能。本章包含后端和前端功能。后台管理
本章将实现后台管理功能。本章包含后端和前端功能。由于后台大部分功能和用户面板的功能重合，所以后台管理功能将集中在本章一个大章来进行全部讲解。把 React 开发的 SPA 嵌入 AXUM 应用中
本章将讨论把 React 开发的 SPA 嵌入 AXUM 应用中，并将其部署到生产环境。
开发前端 SPA
- 9370
- 2024-12-11 13:51:40
为了更直观的进行 API 开发，我们先来编写前端 SPA。
依赖
我们的前端使用 React 开发，它需要一下依赖：
react-router-dom：路由tailwind css：CSSshadcn-ui：Tailwind CSS 组件库react-use：一些使用的 React Hookreact-turnstile：Clodflare Turnstile 人机验证的 React 组件zod：表单验证@hookform/resolvers：将 zod 集成到 React 的 Hook
比较复杂的是 Tailwind CSS ，我们参照官方文档来逐步进行：
-
/：首页 -
/login：用户登录 -
/register：用户注册 -
/user：用户面板/user/domain：用户的域名管理/user/profile：用户资料/user/pointer：积分变动
-
/admin：后台管理/admin/domain：后台域名管理/admin/user：后台用户管理/admin/change-pwd：管理员修改密码/admin/login：后台登录/admin/pointer：后台积分变动管理
本章代码位于05.前端分支。