refactor: 教程重组为在线教程与本地工具两部分，导航栏新增"工具使用"

- 导航栏新增"工具使用"入口（docs/tools） - 本地工具：install(nodejs/vscode)、git、nvm、docker、prisma、vscode 排错、linux alias - 在线教程保留 web、full_guide、full-stack、advance - 修复 prisma 文档指向旧 recipes 路径的失效链接 - 更新 README/TODO 说明两部分定位，同步 yarn.lock Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
2026-08-19 13:43:16 +08:00
1 parent 1042c0536e
commit 43581b238c
@@ -1,6 +1,6 @@
 {
-  "label": "工具",
-  "position": 5,
+  "label": "工具使用",
+  "position": 4,
  "link": {
    "type": "generated-index"
  }
@@ -0,0 +1,7 @@
+{
+  "label": "Docker",
+  "position": 4,
+  "link": {
+    "type": "generated-index"
+  }
+}
@@ -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)
+
@@ -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
+```
+
@@ -0,0 +1,7 @@
+{
+  "label": "Git",
+  "position": 2,
+  "link": {
+    "type": "generated-index"
+  }
+}
@@ -0,0 +1,19 @@
+---
+sidebar_position: 1
+---
+
+# 工具使用
+
+本章节为 **本地工具** 教程，需要读者在自己的电脑上安装、配置并实践操作。
+
+与在线教程不同，这些内容无法仅通过阅读掌握，请务必在本地环境中跟随练习。
+
+## 内容
+
+1. [安装工具（nodejs、vscode）](./install/nodejs.md)
+2. [Git](./git/index.mdx)
+3. [NVM](./nvm/install_nvm.md)
+4. [Docker](./docker/install.md)
+5. [Prisma](./prisma/prisma.md)
+6. [VSCode 常见问题](./vscode/exception)
+7. [Linux Alias](./linux/alias.md)
@@ -0,0 +1,7 @@
+{
+  "label": "安装工具-win",
+  "position": 1,
+  "link": {
+    "type": "generated-index"
+  }
+}
@@ -0,0 +1,17 @@
+---
+sidebar_position: 2
+---
+
+# 安装 nodejs
+
+访问网站 https://nodejs.org/zh-cn/
+
+点击下载长期维护版 并且安装
+
+全默认选项安装
+
+> 安装完成重启电脑，使环境变量生效。
+
+## 为什么需要 nodejs
+1. nodejs 可以用来启动简单的 http 服务
+2. nodejs 可以用来构建模块化的工程
@@ -0,0 +1,13 @@
+---
+sidebar_position: 1
+---
+
+# 安装 vscode 编辑器
+
+访问网站 https://code.visualstudio.com/
+
+点击下载并且安装
+
+## 下载速度慢
+
+参考 https://zhuanlan.zhihu.com/p/112215618
@@ -0,0 +1,7 @@
+{
+  "label": "Linux",
+  "position": 7,
+  "link": {
+    "type": "generated-index"
+  }
+}
@@ -0,0 +1,41 @@
+---
+sidebar_position: 1
+---
+
+# Linux alias
+在Linux中，`alias`是一个用于创建命令别名的内置命令；通过`alias`，可以把常用的命令或命令组合设置为简短的别名，从而简化操作。
+
+## 使用方法
+### 1. 创建别名
+ 运行以下命令：            
+```
+alias 别名='命令'
+```
+例如：
+```
+alias ll='ls -l'
+```
+在命令行中输入`ll`就相当于输入`ls-l`
+
+### 2. 永久别名
+在`~/.bashrc`或者`~/.zshrc`文件中配置以下内容：          
+```
+alias ll='ls -l'
+```
+
+### 3. 查看别名
+在命令行中输入以下命令：
+```
+alias
+```
+
+### 4. 删除别名
+在命令行中输入以下命令：
+```
+unalias 别名
+```
+例如：
+```
+unalias ll
+```
+这样ll别名就会被删除
@@ -0,0 +1,7 @@
+{
+  "label": "NVM",
+  "position": 3,
+  "link": {
+    "type": "generated-index"
+  }
+}
@@ -0,0 +1,7 @@
+{
+  "label": "Prisma",
+  "position": 5,
+  "link": {
+    "type": "generated-index"
+  }
+}
@@ -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启动数据库](/docs/tools/docker/start)文档
+
+## 项目初始化
+- 打开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
+```
@@ -0,0 +1,7 @@
+{
+  "label": "VSCode",
+  "position": 6,
+  "link": {
+    "type": "generated-index"
+  }
+}
@@ -0,0 +1,39 @@
+---
+sidebar_position: 1
+---
+
+# 如何处理vscode安装插件异常
+让我们通过以下步骤来解决插件安装失败
+
+## 1. 检查网络是否异常
+在浏览器中输入以下网址，看是否能访问，若能则不存在网络问题
+```
+https://marketplace.visualstudio.com
+```
+如果一切正常，您应该在`https://marketplace.visualstudio.com`有一个Extensions for Visual Studio Code的页面。
+
+![vscode扩展页面](./marketplace.png)
+
+## 2. 防火墙阻止
+当我们第一次启动调试功能的时候，正常情况vscode会弹出防火墙阻止的界面
+
+![防火墙](./code.png)
+
+## 3. 设置代理
+![设置图片](./setting.png)
+
+![json图片](./json.png)
+
+在`setting.json`中添加以下代理
+```
+  "http.proxy": "http://127.0.0.1:7897",
+  "https.proxy": "http://127.0.0.1:7897",
+  "http.proxyAuthorization": null,
+  "http.proxyStrictSSL": false
+```
+
+## 4. clash配置
+如果以上步骤都解决不了，需要查看以下`clash`的配置是否完成
+
+## 5. 配置恢复
+当需要安装的插件安装完成后，就可以上面的代理配置给注释了