标签

通过《使用 axum 和 dioxus 构建全栈 Web 应用》专题的学习，相信你已经掌握了 dioxus 前端应用的开发，dioxus 还提供了 fullstack，可以快速的构建一个全栈应用，可喜的是，dioxus fullstack 的后端是由 axum 实现的。

本章我们将实现图床的后台管理功能，你将学习到：如何在 dioxus 自定义 AXUM、如何实现 dioxus fullstack JWT 鉴权。

本章我们将开始实现图床。我们将从创建一个开启路由及 tailwind css 的 dioxus fullstack 项目开始，并在本章实现图片上传并保存到 B2 存储桶。

在构建待办事项App时，我们讨论了如何在 dioxus 中，使用单例模式共享数据存储。本章我们讨论如何在 dioxus 中共享 sqlx 连接池。

我们在《【加餐】dioxus 和 axum 实现文件上传》讲解过如果使用 dioxus 编写文件上传组件，该案例中，我们使用的是原生 axum 实现的后端。本章，我们将讨论使用 dioxus fullstack 实现文件上传。和原生 axum 相比，dioxus fullstack 实现文件上传非常容易。

本章我们将代办事项App的开发，掌握 dioxus fullstack 的基本知识。

本章将讨论 Next.js 的错误处理。

Next.js 的 App 路由有一个约定：定义 `loading.js`，那么 Next.js 会自动在页面加载中显示这个组件，加载完成之后，自动隐藏该组件。

本章讨论新版 Next.js 中变化最大的部分：组件和渲染。

本章讨论 Next.js App 路由的布局。相比之前的 Pages 路由，App 路由的布局简单多了：Next.js 会自动调用布局文件。

本章将讨论 Next.js 定义路由的方式，包括：普通路由、动态路由、嵌套路由及嵌套动态路由。

本章我们来看一下 `create-next-app` 的选项、目录结构以及 Next.js 的「约定即配置」。

本章我们使用 tailwind 将之前课程中 NextJS 迷你博客改造为响应式的布局。

本章将讨论如何配置 tailwind，以及几个 tailwind 官方插件。

本章通过将之前撸的按钮改成 NextJS 版，进而讨论 Tailwind 的复用原则。

本章将介绍如何将 Tailwind 集成到 React 或 NextJS 项目中。

本章将使用 tailwind 撸一个响应式的、纯 CSS 的导航栏。

本章我们将使用 tailwind 撸一个报价卡片。

本章将使用 tailwind 实现一个没有任何 Javscript 代码的纯 CSS 的下拉框，把应用到导航栏、菜单栏时，也被称为下拉菜单。同时我们将讨论如何在 tailwind 中使用图标，包括图标的进化史：从字体文件到SVG。

本章我们将讨论使用 `flex` 和 `grid` 进行响应式布局，以及为什么不建议再使用 `float` 进行布局。

本章将带你使用 tailwind 撸一个按钮

Tailwind 定义了一系列变量，比如颜色、大小、间距等。本章将介绍 tailwind 的一些默认设置。

本章通过两个小示例来体验一下 tailwind 的魔力。

TailwindCSS 是一款响应式的、移动设备优先的 CSS 工具类框架。本章对响应式布局、移动设备优先、断点等基本概念进行简要说明；并讨论几种安装 tailwind 的方式。

本章我们将使用 NextJS 开发一个小型的博客系统，你将学习到如何从远程服务器获取数据以及数据过滤、NextJS 常用组件的用法、NextJS 的自动路由等功能。

NextJS 既然是 React 的框架，自然提供了一些内置组件来扩展 React。本章将介绍几个常用的 NextJS 内置组件，同时也将介绍 NextJS 的路由系统。

趁你现在对我们刚刚讨论的有关 React 和 SEO 的问题还保持有较强的印象，我们先来讨论 NextJS 是如何利用多种渲染模式来应用 SEO 挑战的。

NextJS 是一个 React 框架，它提供了很多有用的功能把 React 的力量发挥地淋漓尽致。本章我们将开始 NextJS 之旅，首先自然是安装它，然后来一个「你好，NextJS」

经过紧张的学习，React 课程终于暂告一个段落了。本章将是一个相对轻松的内容，我们一起探讨一下 React 应用的 SEO 以及为什么需要服务端渲染，同时对 React 课程做个简单的小结。

本章将通过一个非常典型的案例来讨论 React 的状态共享：只有登录用户才能看到某些内容。早期的 React 完全依靠其生态中的 redux 等第三方库来实现状态共享；现在 React 提供了官方的 `Context` 来实现这一目的。