likes
comments
collection
share

Vue3 + Nest 实现博客管理系统 后端篇(一):NestJS创建项目及数据库连接

作者站长头像
站长
· 阅读数 36

全局安装 NestJS

npm install -g @nestjs/cli

创建一个 NestJS 项目

nest new management_nest

Vue3 + Nest 实现博客管理系统 后端篇(一):NestJS创建项目及数据库连接 我这里选择的是pnpm,选择之后等待创建完成就可以在src目录下面看到这几个文件

Vue3 + Nest 实现博客管理系统 后端篇(一):NestJS创建项目及数据库连接

启动项目(热更新)

pnpm run start:dev

正常情况下项目会在默认的3000端口启动,如果端口被占用的话,可以修改src/main.ts文件夹里面的监听端口号(换成未被占用的即可),再次启动即可

Vue3 + Nest 实现博客管理系统 后端篇(一):NestJS创建项目及数据库连接 查看是否启动成功:

curl http://localhost:3333

Hello World!

或者在浏览器打开http://localhost:3333,页面显示Hello World!

创建用户模块

如果不想生成测试文件可以在nest-cli.json中配置

"generateOptions": { 
    "spec": false 
 }

我这里就不配置了

nest g res user

它会让你选择是哪种代码风格,这里我选择的是http的REST风格api:

Vue3 + Nest 实现博客管理系统 后端篇(一):NestJS创建项目及数据库连接 然后会让你选择是否生成CRUD代码:选择是 等待执行完毕,就会生成整个模块的CRUD + RESR api 的代码

Vue3 + Nest 实现博客管理系统 后端篇(一):NestJS创建项目及数据库连接

Vue3 + Nest 实现博客管理系统 后端篇(一):NestJS创建项目及数据库连接 同时也会自动在AppModule引入:

Vue3 + Nest 实现博客管理系统 后端篇(一):NestJS创建项目及数据库连接

连接 MySql 数据库

NestJS连接数据库我选择的是MySql,首先先安装@nestjs/typeormtypeormmysql2 执行命令:

pnpm install @nestjs/typeorm typeorm mysql2 -S

连接数据库需要你本地安装mysql数据库,这个就自行百度~ 其次确保你的mysql是启动状态

Vue3 + Nest 实现博客管理系统 后端篇(一):NestJS创建项目及数据库连接 关于数据库可视化操作的工具有很多,NavicatmysqslWorkBench等等。。。我这里使用的是VScode的插件Database Client

Vue3 + Nest 实现博客管理系统 后端篇(一):NestJS创建项目及数据库连接 插件安装好之后,输入数据库的密码进行连接即可

然后新建数据库manageAdmin

Vue3 + Nest 实现博客管理系统 后端篇(一):NestJS创建项目及数据库连接 下一步开始连接mysql,进入app.module.ts中进行数据库连接的配置

autoLoadEntities 自动加载实体配置,forFeature()注册的每个实体都自动加载

Vue3 + Nest 实现博客管理系统 后端篇(一):NestJS创建项目及数据库连接user.entity.ts文件里面添加实体,实体是一个映射到数据库表的类。 换句话说实体就是一张数据表,在typeorm中我们不需要对数据库的表使用相关工具进行创建与关联,而只需要创建一个实体,并且将实体中的数据内容设置好,那么在项目启动后,就会自动生成对应的表,并且将表与表之间的关系给创建好。

Vue3 + Nest 实现博客管理系统 后端篇(一):NestJS创建项目及数据库连接

import { Column, Entity, PrimaryGeneratedColumn } from 'typeorm';
  @PrimaryGeneratedColumn('uuid')
  id: string; // 主键,自动生成

  @Column({
    type: 'varchar',
    length: 50,
    unique: true,
    comment: '用户名',
  })
  username: string;

  @Column({
    type: 'varchar',
    length: 50,
    comment: '密码',
    select: false,
  })
  password: string;

然后重新启动,如果数据库并没有添加User表,可以看下user.module.ts,添加下图中圈起来的代码,重新启动

Vue3 + Nest 实现博客管理系统 后端篇(一):NestJS创建项目及数据库连接 添加成功就可以看到添加的User表

Vue3 + Nest 实现博客管理系统 后端篇(一):NestJS创建项目及数据库连接

插入和查询数据

user.service.ts 文件里面添加以下代码

Vue3 + Nest 实现博客管理系统 后端篇(一):NestJS创建项目及数据库连接 打开调试工具进行接口调试,我这里使用的是apifox,调用 user 接口,传入 username 和 password

Vue3 + Nest 实现博客管理系统 后端篇(一):NestJS创建项目及数据库连接 然后在database里面就可以看到插入的这条数据

在面板中打开时候会一直查询,点击关闭之后,再点击执行就可以看到这条数据了

Vue3 + Nest 实现博客管理系统 后端篇(一):NestJS创建项目及数据库连接

Vue3 + Nest 实现博客管理系统 后端篇(一):NestJS创建项目及数据库连接 还可以执行查询接口,看数据是否已经存在

Vue3 + Nest 实现博客管理系统 后端篇(一):NestJS创建项目及数据库连接

一般来说数据库的配置包含了一些敏感信息不宜写在代码中提交到远程仓库,所以我们可以将配置写在配置文件中,然后提交 git 时候将生产环境的配置文件其忽略,这里我们新建.env.stage.default.env.stage.dev.env.stage.prod文件分别存放默认、开发与生产环境配置

我们还需要安装 cross-env 来判断我们是处于什么环境,检查下有没有安装@nestjs/config,如果没有也要安装

pnpm install cross-env @nestjs/config

首先修改package.json 里面的启动命令(打包修改一样),在命令后面添加 STAGE=dev 用于判断不同的环境加载不同的环境配置

Vue3 + Nest 实现博客管理系统 后端篇(一):NestJS创建项目及数据库连接 在根目录创建 .env.stage.default.env.stage.dev.env.stage.prod 并在default文件里面配置数据库基本配置,在prod 文件里面添加DB_SYNC=false,这里面主要是配置生产的数据库一些配置

Vue3 + Nest 实现博客管理系统 后端篇(一):NestJS创建项目及数据库连接 .env.stage.default

DB_HOST=localhost
DB_PORT=3306
SERVE_PORT=3333
DB_USERNAME=root
DB_PASSWORD=123456
DB_DATABASE=manageadmin
DB_SYNC=true

接下来就是修改链接数据库的配置app.module.ts,由于数据库配置比较多,我们可以单独把这些配置抽离出去,首先在根目录创建libs/db/src/index.ts 以及在libs/src/下面创建db.module.ts文件,在libs/db/下面创建tsconfig.lib.json 如下: Vue3 + Nest 实现博客管理系统 后端篇(一):NestJS创建项目及数据库连接

Vue3 + Nest 实现博客管理系统 后端篇(一):NestJS创建项目及数据库连接 tsconfig.lib.json

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "declaration": true,
    "outDir": "../../dist/libs/db"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist", "test", "**/*spec.ts"]
}

libs/db/src/db.module.ts

import { Global, Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { ConfigModule, ConfigService } from '@nestjs/config';

@Global()
@Module({
  imports: [
    ConfigModule.forRoot({
      isGlobal: true,
      envFilePath: [`.env.stage.${process.env.STAGE}`, '.env.stage.default'],
    }),
    TypeOrmModule.forRootAsync({
      imports: [ConfigModule],
      inject: [ConfigService],
      useFactory: (ConfigService: ConfigService) => ({
        type: 'mysql',
        host: ConfigService.get('DB_HOST'),
        port: ConfigService.get('DB_PORT'), // 端口号
        username: ConfigService.get('DB_USERNAME'), // 用户名
        password: ConfigService.get('DB_PASSWORD'), // 密码
        database: ConfigService.get('DB_DATABASE'), //数据库名
        autoLoadEntities: true, //自动加载实体配置,forFeature()注册的每个实体都自己动加载
        synchronize: ConfigService.get('DB_SYNC'), // 是否将实体同步到数据库
      }),
    }),
  ],
})
export class DbModule {}

libs/db/src/index.ts

export * from './db.module';

然后修改main.ts

Vue3 + Nest 实现博客管理系统 后端篇(一):NestJS创建项目及数据库连接 接下来重启项目,测试刚才的查询是否好使,如果重启失败报错,请仔细检查代码是否有出入

个人学习记录!!!

转载自:https://juejin.cn/post/7265149630924374056
评论
请登录