docs: add nuxt/server

Author: Sun-ZhenXing

src/.vuepress/sidebar.ts

@@ -7,8 +7,8 @@ export default sidebar({
       children: 'structure',
       collapsible: true,
       icon: 'fluent:document-bullet-list-24-filled',
-      prefix: '1.nuxt/',
-      text: '1. Nuxt 教程',
+      prefix: 'nuxt/',
+      text: '1. Nuxt 笔记',
     },
   ],
 })

src/nuxt/index.md renamed to src/nuxt/README.md

@@ -1,3 +1,7 @@
+---
+index: false
+---
+
 # Nuxt 笔记
 
 ```component Catalog

src/nuxt/nuxt-tutorial/0.catalog.md

@@ -0,0 +1,11 @@
+# 0. Nuxt3 教程目录
+
+本教程参考官方文档以及多份资料，力求帮助读者完整地入门并精通 Nuxt3。
+
+本教程不会追求介绍完整 API 和函数功能用法，而是以最佳实践为主，帮助读者快速上手 Nuxt3，并快速完成实践项目。
+
+本教程优先使用 `pnpm`，以及 Node.js 20+。
+
+```component Catalog
+{}
+```

src/nuxt/nuxt-tutorial/chapter01/index.md renamed to src/nuxt/nuxt-tutorial/1.intro.md

@@ -1,55 +1,55 @@
-# 1. 了解同构渲染
-
-[[TOC]]
-
-## 1.1 模板渲染
-
-*@def* **模板渲染** 即动态网站使用相同的模板和不同的数据来生成不同的 HTML 页面。
-
-可以在哪些位置进行渲染？
-
-- 服务端渲染
-- 客户端渲染
-- 同构渲染
-
-使用同构渲染系统中的数据，部分可能由服务端去渲染，而另一部分由客户端渲染。
-
-Nuxt3 即同构渲染框架，帮助我们快速开发同构渲染页面。
-
-## 1.2 服务端渲染
-
-早期我们使用服务端渲染，数据通过模板字符串进行拼接，生成 HTML 返回给客户端。
-
-每次请求页面服务器都进行一次渲染，然后返回整个页面的数据。但是浏览器会直接得到 HTML 内容，显示更快。
-
-这类系统主要使用预处理模板的技术（如 PHP、JSP 等），并使用 MVC 设计模式。
-
-传统的服务端渲染的主要缺点如下：
-
-- 所有的渲染都发生在服务端，因此服务器压力较大
-- 常常需要返回整个 HTML 数据，占用带宽
-
-## 1.3 客户端渲染
-
-后来我们通过 AJAX 等相关的技术，通过服务器提供 JSON 格式的 API 接口，就可以在客户端渲染各种不同的数据。每次请求可以只请求必要数据，因而可以有更强的灵活性。
-
-这类系统主要基于 SPA 类的框架（如 React、Vue 等），使用 MVVM 设计模式。
-
-基于 MVVM 的客户端渲染的主要缺点如下：
-
-- 首屏渲染慢
-- 不利于 SEO（搜索引擎优化）
-
-## 1.4 Nuxt3 用于？
-
-![app](./../images/app.svg)
-
-> 图片来源于：<https://nuxt.com/docs/getting-started/views>。
-
-Nuxt3 是基于 Vue3 的混合式框架，用于解决：
-
-- 首屏渲染慢的问题
-- SEO 优化问题
-- 同时兼备客户端渲染的优点
-
-了解了基本概念之后，你可以在 [Nuxt 官方文档](https://nuxt.com/docs/getting-started/introduction) 或 [Nuxt 中文文档](https://nuxt.com.cn/docs/getting-started/introduction) 中学习它的基本使用。
+# 1. 了解同构渲染
+
+[[TOC]]
+
+## 1.1 模板渲染
+
+*@def* **模板渲染** 即动态网站使用相同的模板和不同的数据来生成不同的 HTML 页面。
+
+可以在哪些位置进行渲染？
+
+- 服务端渲染
+- 客户端渲染
+- 同构渲染
+
+使用同构渲染系统中的数据，部分可能由服务端去渲染，而另一部分由客户端渲染。
+
+Nuxt3 即同构渲染框架，帮助我们快速开发同构渲染页面。
+
+## 1.2 服务端渲染
+
+早期我们使用服务端渲染，数据通过模板字符串进行拼接，生成 HTML 返回给客户端。
+
+每次请求页面服务器都进行一次渲染，然后返回整个页面的数据。但是浏览器会直接得到 HTML 内容，显示更快。
+
+这类系统主要使用预处理模板的技术（如 PHP、JSP 等），并使用 MVC 设计模式。
+
+传统的服务端渲染的主要缺点如下：
+
+- 所有的渲染都发生在服务端，因此服务器压力较大
+- 常常需要返回整个 HTML 数据，占用带宽
+
+## 1.3 客户端渲染
+
+后来我们通过 AJAX 等相关的技术，通过服务器提供 JSON 格式的 API 接口，就可以在客户端渲染各种不同的数据。每次请求可以只请求必要数据，因而可以有更强的灵活性。
+
+这类系统主要基于 SPA 类的框架（如 React、Vue 等），使用 MVVM 设计模式。
+
+基于 MVVM 的客户端渲染的主要缺点如下：
+
+- 首屏渲染慢
+- 不利于 SEO（搜索引擎优化）
+
+## 1.4 Nuxt3 用于？
+
+![Nuxt3](./images/app.svg)
+
+> 图片来源于：<https://nuxt.com/docs/getting-started/views>。
+
+Nuxt3 是基于 Vue3 的混合式框架，用于解决：
+
+- 首屏渲染慢的问题
+- SEO 优化问题
+- 同时兼备客户端渲染的优点
+
+了解了基本概念之后，你可以在 [Nuxt 官方文档](https://nuxt.com/docs/getting-started/introduction) 或 [Nuxt 中文文档](https://nuxt.com.cn/docs/getting-started/introduction) 中学习它的基本使用。

src/nuxt/nuxt-tutorial/2.get-started.md

@@ -0,0 +1,43 @@
+# 2. 开始使用 Nuxt3
+
+> [!TIP]
+> 如果你已经安装了 Node.js，请检查版本大于 18，命令：
+>
+> ```bash
+> node --version
+> ```
+
+推荐 VS Code 安装插件 TypeScript Vue Plugin (Volar)：
+
+```bash
+code --install-extension Vue.volar
+```
+
+## 2.1 创建项目
+
+首先创建项目：
+
+```bash
+pnpm dlx nuxi init $PROJECT_NAME
+```
+
+然后安装依赖：
+
+```bash
+cd $PROJECT_NAME
+pnpm install
+```
+
+接着在 VS Code 中打开：
+
+```bash
+code .
+```
+
+启动开发模式：
+
+```bash
+pnpm dev -o
+```
+
+其中 `-o` 表示自动打开浏览器页面（<http://localhost:3000>），这样你可以直接看到效果了，请等待一会完成初始渲染。

src/nuxt/nuxt-tutorial/chapter03/index.md renamed to src/nuxt/nuxt-tutorial/3.route.md

@@ -0,0 +1,204 @@
+# 6. 服务端程序
+
+[[TOC]]
+
+`server/` 目录用于在应用中注册 API 和服务器处理程序。
+
+每个文件应该默认导出由 `defineEventHandler()` 或 `eventHandler()` 定义的函数。
+
+处理程序可以直接返回 JSON 数据、`Promise`，或使用 `event.node.res.end()` 发送响应。
+
+```ts
+// server/api/hello.ts
+export default defineEventHandler((event) => {
+  return {
+    hello: 'world'
+  }
+})
+```
+
+## 6.1 服务器路由
+
+### 路由参数
+
+服务器路由可以使用文件名中括号内的动态参数，例如 `/api/hello/[name].ts`，并通过 `event.context.params` 访问。
+
+```ts
+// server/api/hello/[name].ts
+export default defineEventHandler((event) => {
+  const name = getRouterParam(event, 'name')
+  return `Hello, ${name}!`
+})
+```
+
+也可以配合验证器使用：
+
+```ts
+// server/api/hello/[name].ts
+import { z } from 'zod'
+
+const userSchema = z.object({
+  name: z.string().default('Guest'),
+  email: z.string().email(),
+})
+
+export default defineEventHandler(async (event) => {
+  const result = await readValidatedBody(event, body => userSchema.safeParse(body))
+  // or `.parse` to directly throw an error
+
+  if (!result.success)
+    throw result.error.issues
+
+  // User object is validated and typed!
+  return result.data
+})
+```
+
+### 匹配 HTTP 方法
+
+可以使用形如 `name.[method].ts` 的文件名来匹配 HTTP 方法，例如 `hello.get.ts`。
+
+```ts
+// server/api/hello.get.ts
+export default defineEventHandler((event) => {
+  return '...'
+})
+```
+
+### 全局捕获路由
+
+使用形如 `[...].ts` 或 `[...slug].ts` 文件名来捕获所有路由，其中可以通过 `event.context.params.slug` 获得 `slug` 的值。
+
+### 读取请求体
+
+使用 `readBody(event)` 或者使用 `readValidatedBody(event)` 来读取请求体。
+
+与 `$fetch()` 一起使用，可以自动包装/解包 JSON 数据。
+
+> [!WARNING]
+> 如果在 GET 等不支持请求体的方法中使用 `readBody(event)`，将会抛出错误并返回 405。
+
+### 读取查询参数
+
+使用 `getQuery(event)` 或者使用 `getValidatedQuery(event)` 来读取查询参数。
+
+### 读取 Cookies
+
+使用 `parseCookies(event)` 来读取请求中的 Cookies。
+
+### 错误处理
+
+在每个请求处理程序中，可以使用 `createError()` 来创建错误响应。
+
+```ts
+export default defineEventHandler((event) => {
+  const id = parseInt(event.context.params.id) as number
+
+  if (!Number.isInteger(id)) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'ID should be an integer',
+    })
+  }
+  return 'All good'
+})
+```
+
+可以使用 `setResponseStatus(event, code)` 来设置响应状态码。
+
+### 配置
+
+可使用 `useRuntimeConfig()` 来读取运行时配置。
+
+将事件作为参数提供给 `useRuntimeConfig()` 是可选的，但建议传递它以获取服务器路由在运行时被环境变量覆盖的运行时配置。
+
+```ts
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig(event)
+
+  const repo = await $fetch('https://api.github.com/repos/nuxt/nuxt', {
+    headers: {
+      Authorization: `token ${config.githubToken}`
+    }
+  })
+
+  return repo
+})
+```
+
+现在，环境变量 `NUXT_GITHUB_TOKEN` 将覆盖自定义的 `config.githubToken` 值。
+
+### 重定向
+
+```ts
+export default defineEventHandler(async (event) => {
+  await sendRedirect(event, '/path/redirect/to', 302)
+})
+```
+
+## 6.2 中间件
+
+## 6.3 插件
+
+## 6.4 高级
+
+### 发送流
+
+*@note:实验性* 现在可以使用 `sendStream(event, stream)` 来发送流。
+
+```ts
+import fs from 'node:fs'
+import { sendStream } from 'h3'
+
+export default defineEventHandler((event) => {
+  return sendStream(event, fs.createReadStream('/path/to/file'))
+})
+```
+
+### 服务端 K/V 存储
+
+Nitro 集成了 [unjs/unstorage](https://unstorage.unjs.io/)，支持在服务端存储 K/V 信息。可安装各种适配器以支持不同环境和中间件。请阅读 [官方文档](https://nitro.unjs.io/guide/storage) 了解详细信息。
+
+下面以 Redis 为例：
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  nitro: {
+    storage: {
+      redis: {
+        driver: 'redis',
+        /* redis connector options */
+        port: 6379, // Redis port
+        host: "127.0.0.1", // Redis host
+        username: "", // needs Redis >= 6
+        password: "",
+        db: 0, // Defaults to 0
+        tls: {} // tls/ssl
+      }
+    }
+  }
+})
+```
+
+使用：
+
+```ts
+export default defineEventHandler(async (event) => {
+  // List all keys with
+  const keys = await useStorage('redis').getKeys()
+
+  // Set a key with
+  await useStorage('redis').setItem('foo', 'bar')
+
+  // Remove a key with
+  await useStorage('redis').removeItem('foo')
+
+  return {}
+})
+```
+
+### WebSocket
+
+建议使用 Socket.IO 等成熟的库来处理 WebSocket，Nuxt3 可用的库如 [nuxt-socket-io
+](https://www.npmjs.com/package/nuxt-socket-io)。

src/nuxt/nuxt-tutorial/chapter04/index.md renamed to src/nuxt/nuxt-tutorial/4.component.md

@@ -1,3 +1,7 @@
+---
+index: false
+---
+
 # Nuxt3 教程
 
 ```component Catalog