diff --git a/docs/docker/3.png b/docs/docker/3.png deleted file mode 100644 index 33106dd..0000000 Binary files a/docs/docker/3.png and /dev/null differ diff --git a/docs/docker/8.png b/docs/docker/8.png new file mode 100644 index 0000000..6b329a5 Binary files /dev/null and b/docs/docker/8.png differ diff --git a/docs/docker/_category_.json b/docs/docker/_category_.json index d29b68e..efecf14 100644 --- a/docs/docker/_category_.json +++ b/docs/docker/_category_.json @@ -1,5 +1,5 @@ { - "label": "docker安装教程", + "label": "docker工具", "position": 7, "link": { "type": "generated-index" diff --git a/docs/docker/install.md b/docs/docker/install.md index ab4572c..7a9049f 100644 --- a/docs/docker/install.md +++ b/docs/docker/install.md @@ -2,13 +2,16 @@ sidebar_position: 1 --- -# docker的安装与使用 +# docker的安装与验证 docker是一种开源平台，用于开发、部署和运行应用程序。 ## 先决条件 1. 确保您的系统是windows专业版 2. 已安装了wsl2 +>**提示** +如果没有安装wsl2，可以参考[安装wsl文档](https://learn.microsoft.com/zh-cn/windows/wsl/install) + ## docker的安装 ### 1. 开启windows功能 通过控制面板，开启Hyper-v和适用于windows子系统功能 @@ -23,9 +26,8 @@ docker是一种开源平台，用于开发、部署和运行应用程序。 https://docs.docker.com/desktop/install/windows-install/ ``` -## docker的使用 -### 1. 配置镜像 -进入docker后，开始配置镜像 +## 配置Docker镜像 +安装docker后，进入docker，开始配置镜像 ![设置页面](./6.png) @@ -36,21 +38,11 @@ https://docs.docker.com/desktop/install/windows-install/ "registry-mirrors":["https://docker.m.daocloud.io","https://docker.1panel.live"] ``` -### 2. 拉取镜像 - 这里我在wsl命令行中拉取的postgres镜像，运行以下命令：`pull` + ## 验证Docker + 运行以下命令，测试Docker是否正确安装并运行 ``` - sudo docker pull postgres + docker run hello-world ``` + 当输出`Hello from Docker`命令时，表明Docker安装正确 + ![验证Docker](./8.png) -### 3. 创建并启动容器 -创建包含以下内容的文件：`docker-compose.yml` - -![内容](./3.png) - -### 4. 验证容器启动 -运行以下命令`ps`，当STATUS出现`up`的时候，容器就表示启动成功 -``` -docker ps -``` - - ![运行容器](./5.png) diff --git a/docs/docker/start.md b/docs/docker/start.md new file mode 100644 index 0000000..3112125 --- /dev/null +++ b/docs/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 +``` + diff --git a/docs/linux-alias/linux-alias.md b/docs/linux-alias/linux-alias.md deleted file mode 100644 index 37e8d57..0000000 --- a/docs/linux-alias/linux-alias.md +++ /dev/null @@ -1,9 +0,0 @@ -# Linux alias -## 1. 临时设置别名 -在Ubantu中如果有每次进入命令行都需要输入一串相同的命令，就可以设置别名，输入以下命令，其中ev就是3e3e3e...的别名 -`alias ev='3e3e3e...'` -## 2. 永久设置别名 -要想每次关闭了wsl后还能执行别名，就需要在.zshrc里面添加别名，这里我用的vscode打开，也可以用vim进行编写以下命令，记得保存 -`alias ev='3e3e3e...` -## 3. 临时取消别名 -`unalias ev=alias ev='3e3e3e...` \ No newline at end of file diff --git a/docs/install_nvm/_category_.json b/docs/linux_alias/_category_.json similarity index 50% rename from docs/install_nvm/_category_.json rename to docs/linux_alias/_category_.json index 287d492..954580a 100644 --- a/docs/install_nvm/_category_.json +++ b/docs/linux_alias/_category_.json @@ -1,6 +1,6 @@ { - "label": "以wsl为开发环境", - "position": 8, + "label": "Alias命令", + "position": 9, "link": { "type": "generated-index" } diff --git a/docs/linux_alias/alias.md b/docs/linux_alias/alias.md index 37e8d57..8b69ff6 100644 --- a/docs/linux_alias/alias.md +++ b/docs/linux_alias/alias.md @@ -1,9 +1,41 @@ +--- +sidebar_position: 1 +--- + # Linux alias -## 1. 临时设置别名 -在Ubantu中如果有每次进入命令行都需要输入一串相同的命令，就可以设置别名，输入以下命令，其中ev就是3e3e3e...的别名 -`alias ev='3e3e3e...'` -## 2. 永久设置别名 -要想每次关闭了wsl后还能执行别名，就需要在.zshrc里面添加别名，这里我用的vscode打开，也可以用vim进行编写以下命令，记得保存 -`alias ev='3e3e3e...` -## 3. 临时取消别名 -`unalias ev=alias ev='3e3e3e...` \ No newline at end of file +在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别名就会被删除 \ No newline at end of file diff --git a/docs/install_nvm/install_nvm.md b/docs/tools/install_nvm.md similarity index 95% rename from docs/install_nvm/install_nvm.md rename to docs/tools/install_nvm.md index 8501f38..143d951 100644 --- a/docs/install_nvm/install_nvm.md +++ b/docs/tools/install_nvm.md @@ -1,9 +1,9 @@ -# 安装NVM以及Node.js教程 +# nvm - Node.js是用于服务器端JavaScript运行，适合高性能、实时应用 - NVM用于管理多个Node.js版本，便于在不同项目间切换 ## 先决条件 -1. 确保安装了Ubantu +1. 确保安装了Ubuntu ## 安装NVM ### 1. 安装cURL diff --git a/docs/install_nvm/nvm.png b/docs/tools/nvm.png similarity index 100% rename from docs/install_nvm/nvm.png rename to docs/tools/nvm.png diff --git a/docs/use_prisma/_category_.json b/docs/use_prisma/_category_.json new file mode 100644 index 0000000..7d6f4b0 --- /dev/null +++ b/docs/use_prisma/_category_.json @@ -0,0 +1,7 @@ +{ + "label": "Prisma工具", + "position": 10, + "link": { + "type": "generated-index" + } +} \ No newline at end of file diff --git a/docs/use_prisma/prisma.md b/docs/use_prisma/prisma.md new file mode 100644 index 0000000..cdf6acb --- /dev/null +++ b/docs/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启动数据库](http://localhost:3000/full-stack-tutorial/docs/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 +``` diff --git a/docs/use_prisma/verify1.png b/docs/use_prisma/verify1.png new file mode 100644 index 0000000..d68b594 Binary files /dev/null and b/docs/use_prisma/verify1.png differ diff --git a/docs/use_prisma/verify2.png b/docs/use_prisma/verify2.png new file mode 100644 index 0000000..bf8072f Binary files /dev/null and b/docs/use_prisma/verify2.png differ