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

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

搭建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"

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

设置src路径的别名为@，方便我们快速定位src文件夹下的文件，下载"@types/node"依赖，找到根目录下的vite.config.ts，在里面进行配置，如下。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname,'./src')
    },
  },
})

进行上面配置之后还需要在根目录中的tsconfig.json中进行配置，不然ts组件无法使用@符号导入，如下。

"compilerOptions": {
    "paths":{
      "@/*":["./src/*"]
    },
}

如果需要修改数据库，那么需要再次运行prisma包，生成新的prisma的客户端，修改数据库中的表结构。需要注意的是，重新修改数据库的表结构需要数据库中的表是空表，不能有数据，不然会修改失败。修改之后代码中可能需要等一会，重新生成的prisma客户端才会生效。

npx prisma migrate dev --name "修改记录名"

使用nest cli可以快速生成模块和服务，命令如下。

npx nest generate module prisma
npx nest generate service prisma

配置prisma的服务，在prisma.service.ts文件中让PrismaService继承prisma/client，这样就拥有了操作数据库的一系列方法，接着在prisma.module.ts中导入并在模块中导出PrismaService。模块中的providers定义服务（模块内部使用），exports导出服务（模块被导入时供其他模块使用）。

import { Injectable } from '@nestjs/common';
import { PrismaClient } from '@prisma/client';
@Injectable()
export class PrismaService  extends PrismaClient{}

import { Module } from '@nestjs/common';
import { PrismaService } from './prisma.service';

@Module({
  providers: [PrismaService],
  exports: [PrismaService],
})
export class PrismaModule {}

使用指令快速生成一个增删改查的模块，指令如下。需要设置模块的名称，选择传输协议（这里选择rest api），最后是否选择增删改查，选择yes，这样nestcli就为我们生成了一个增删改查的模块，非常地便捷。

npx nest generate resource

新生成的模块会自动注册到app.module.ts中去，新模块的接口自然可以直接访问到。新模块中需要使用PrismaService操作数据库，直接在service层引入在项目启动时会报错。正确的使用方法是在新模块的module文件中引入prisma中的模块，这样就可以在新模块的service层使用构造方法注入PriamServie方法来操作数据库。（这里发现了nestjs的模块机制，模块与模块之间不能跨模块访问模块内部的方法，如需访问必需要导入模块且导入模块中将方法exports出去，不然还是访问不到）。