docs: adjust docs (#26)

docs/recipes/_category_.json

@@ -0,0 +1,7 @@
+{
+    "label": "操作指南",
+    "position": 4,
+    "link": {
+      "type": "generated-index"
+    }
+  }

docs/recipes/docker/_category_.json

@@ -0,0 +1,8 @@
+{
+    "label": "docker工具",
+    "position": 7,
+    "link": {
+      "type": "generated-index"
+    }
+  }
+  

docs/recipes/docker/install.md

@@ -0,0 +1,48 @@
+---
+sidebar_position: 1
+---
+
+# docker的安装与验证
+docker是一种开源平台，用于开发、部署和运行应用程序。
+
+## 先决条件
+1. 确保您的系统是windows专业版
+2. 已安装了wsl2 
+
+>**提示**                                                                                                                                  
+如果没有安装wsl2，可以参考[安装wsl文档](https://learn.microsoft.com/zh-cn/windows/wsl/install)
+
+##  docker的安装
+### 1. 开启windows功能
+通过控制面板，开启Hyper-v和适用于windows子系统功能
+
+![控制面板](./1.png)
+
+![启动windows功能](./2.png)
+
+### 2. 下载并安装docker
+下载docker最安全的路径就是去官网，安装时要注意勾选`wsl`选项，安装成功后跳过登录docker Hub账号
+```
+https://docs.docker.com/desktop/install/windows-install/
+```
+
+## 配置Docker镜像
+安装docker后，进入docker，开始配置镜像
+
+![设置页面](./6.png)
+
+![Docker Engine](./7.png)
+
+配置镜像添加以下内容
+```                           
+"registry-mirrors":["https://docker.m.daocloud.io","https://docker.1panel.live"]
+```
+ 
+ ## 验证Docker
+ 运行以下命令，测试Docker是否正确安装并运行
+ ```
+ docker run hello-world
+ ```
+ 当输出`Hello from Docker`命令时，表明Docker安装正确
+ ![验证Docker](./8.png)
+

docs/recipes/docker/start.md

@@ -0,0 +1,64 @@
+---
+sidebar_position: 1
+---
+
+# Docker启动数据库
+使用Docker启动PostgreSQL数据库
+
+## 先决条件
+1. 已安装Docker
+2. 以wsl为开发环境
+
+##  拉取 PostgreSQL 镜像
+在wsl中,运行以下命令来拉取 `PostgreSQL` 镜像:
+ ```
+ sudo docker pull postgres
+ ```
+
+## 创建文件并启动容器
+### 1. 创建`docker-compose.yml`文件
+运行以下命令，创建`docker-compose.yml`文件
+```
+touch docker-compose.yml
+```
+### 2. 编写文件
+在`docker-compose.yml`文件中，写入以下内容：
+```
+version: '3.9'
+
+services:
+
+  db:
+    image: postgres
+    restart: always
+    shm_size: 128mb
+    environment: 
+      POSTGRES_PASSWORD: example
+    ports:
+      - "5432:5432"
+
+  adminer:
+    image: adminer
+    restart: always
+    ports:
+      - 7897:8080
+```
+### 3. 启动`PostgreSQL`数据库
+运行以下命令启动`PostgreSQL`数据库：
+```
+docker-compose up --build
+```
+
+### 4. 验证启动
+运行以下命令`ps`，当STATUS出现`up`的时候，容器就表示启动成功                   
+```
+docker ps
+```
+![运行容器](./5.png)
+
+### 5. 连接到PostgreSQL数据库
+运行以下命令，连接到PostgreSQL数据库：
+```
+docker exec -it my-postgres psql -U postgres
+```
+

docs/recipes/use_prisma/_category_.json

@@ -0,0 +1,7 @@
+{
+    "label": "Prisma工具",
+    "position": 10,
+    "link": {
+        "type": "generated-index"
+    }
+}

docs/recipes/use_prisma/prisma.md

@@ -0,0 +1,85 @@
+---
+sidebar_position: 1
+---
+
+# Next.js + Prisma + Docker构建全栈
+通过使用Next.js、Prisma和Docker来构建一个全栈应用。
+
+## 先决条件
+1. 已安装Node.js 18+
+2. Prisma Postgres数据库
+3. Next.js项目
+4. 已安装Docker
+5. 确认已启动数据库
+
+>**提示**                                                                                                                                    
+如果不知道怎么启动数据库，可以参考使用 [Docker启动数据库](https://github.com/idealjs/full-stack-tutorial/blob/main/docs/docker/start.md)文档
+
+## 项目初始化
+- 打开Next.js项目
+
+### 1. 安装并初始化Prisma
+
+我们需要安装Prisma客户端，运行以下代码
+```
+npm install prisma --save-dev
+```
+然后，项目初始化Prisma,运行以下命令：`init`
+```
+npx prisma init
+```
+这时会出现新目录，里面包含`schema.prisma`文件
+
+### 2.定义表结构
+#### 2.1 编辑`schema.prisma`文件
+在`prisma/schema.prisma`文件中定义数据库表结构，添加以下内容：
+```
+model User {
+  id    Int     @id @default(autoincrement())
+  email String  @unique
+  name  String?
+}
+```
+
+#### 2.2 配置`.env`文件
+打开`.env`文件，配置PostgreSQL数据库连接字符串。例如
+```
+DATABASE_URL="postgresql://postgres:example@localhost:5432/postgres"
+```
+
+### 3. 数据库migration
+配置完后，可以使用以下命令将架构应用到数据库中：`prisma migrate dev`
+```
+npx prisma migrate dev --name init
+```
+
+### 4. 使用Prisma Studio验证数据
+#### 4.1 启动Prisma Studio
+运行以下命令启动`Prisma Studio`:
+```
+npx prisma studio
+```
+#### 4.2 验证数据
+在`Prisma Studio`中，可以查看`User`表的数据，通过添加、编辑或修改记录，验证表是否正确
+
+![添加记录](./verify1.png)
+![添加成功](./verify2.png)
+
+### 5. 在Next.js中使用Prisma
+#### 5.1 设置Prisma客户端
+运行以下命令，创建一个新目录并在其添加一个新文件`lib/prisma.ts`
+```
+mkdir -p lib && touch lib/prisma.ts
+```
+在`lib/prisma.ts`文件中添加以下代码：
+```
+import { PrismaClient } from '@prisma/client'
+
+const prisma = new PrismaClient()
+
+const globalForPrisma = global as unknown as { prisma: typeof prisma }
+
+if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma
+
+export default prisma
+```