使用nestjs和react快速搭建项目架子

发布时间 2024-01-10 13:46:44作者: 数星观月

首先搭建前后端的项目架子

搭建nestjs架子

npx @nestjs/cli new 项目名

使用vite搭建一个react+ts的架子,vite地址:https://cn.vitejs.dev/guide/。搭建好后cd到项目中,然后安装依赖,尝试启动。

npm create vite@latest 项目名 -- --template react-ts

数据库使用postgresql,使用docker直接部署好数据库环境,windows可以下载docker的桌面版,需要开启windows的虚拟化来支持docker。下载地址:https://docs.docker.com/desktop/install/windows-install/。下载安装好后,下载postgresql的镜像(postgres,可以用cmd指令下载也可以使用docker desktop图形化界面搜索下载),然后使用下载好的镜像实例化成容器,cmd命令如下(也可以使用图形化界面)。解释一下下面的指令docker run是启动一个容器;name是启动容器的名称;e是环境,这里的POSTGRES_PASSWORD是给postgresql数据库设置的密码;p是容器运行的端口,有两个端口是将宿主机上的端口映射到容器上的端口,这样我们在外部可以通过5432端口访问到容器内部运行的postgresql数据库;d就是容器的镜像模板。

docker run --name 容器名 -e POSTGRES_PASSWORD=数据库密码 -p 5432:5432 -d postgres

这里在nestjs中使用prisma完成和数据库的增删改查操作(教程地址:https://www.prisma.io/blog/nestjs-prisma-rest-api-7D056s1BmOL0)。

先在postgresql中新建一个数据库,可以使用可视化工具Navicat Premium创建,也可以在容器中使用指令创建。我这里使用可视化工具创建比较简便。在nestjs中下载prisma并初始化。

npm install -D prisma
npx prisma init

npx命令会运行prisma依赖,然后在根目录下面生成了一个prisma文件夹,里面还有一个schema.prisma文件,这个文件就是prisma连接数据库的配置文件。可以看到datasource db里面有个连接数据的url,需要用到环境变量中的DATABASE_URL,因此需要在根目录下创建一个.env文件,里面创建连接数据库完整的url连接。url连接如下,刚才创建容器的时候没有声明数据库用户名,postgresql默认的用户名是postgres。

DATABASE_URL="postgres://用户名:用户密码@localhost:5432/数据库名"

接下来就是在schema.prisma文件中定义我们的数据库中每张表的模型。

创建好表模型后生成迁移文件,在prisma/migrations下可以查看,然后sql文件在数据库执行,命令如下。name是为本次迁移命名。最后prisma会根据我们设计好的表模型生成prisma-client客户端,用来执行SQL,第一次会自动下载生成,后续修改数据库的表结构会自动更新,不过比较慢可能会等一会才生效。

npx prisma migrate dev --name "init"

这样前后端项目架子和数据库都搭建好了,接下只需要完善项目的内容就可以了。