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

全局安装 NestJS

bash 复制代码
npm install -g @nestjs/cli

创建一个 NestJS 项目

bash 复制代码
nest new management_nest

我这里选择的是pnpm,选择之后等待创建完成就可以在src目录下面看到这几个文件

启动项目(热更新)

bash 复制代码
pnpm run start:dev

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

查看是否启动成功:

bash 复制代码
curl http://localhost:3333

Hello World!

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

创建用户模块

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

js 复制代码
"generateOptions": { 
    "spec": false 
 }

我这里就不配置了

bash 复制代码
nest g res user

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

然后会让你选择是否生成CRUD代码:选择是 等待执行完毕,就会生成整个模块的CRUD + RESR api 的代码

同时也会自动在AppModule引入:

连接 MySql 数据库

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

bash 复制代码
pnpm install @nestjs/typeorm typeorm mysql2 -S

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

关于数据库可视化操作的工具有很多,NavicatmysqslWorkBench等等。。。我这里使用的是VScode的插件Database Client

插件安装好之后,输入数据库的密码进行连接即可

然后新建数据库manageAdmin

下一步开始连接mysql,进入app.module.ts中进行数据库连接的配置

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

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

添加成功就可以看到添加的User表

插入和查询数据

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

打开调试工具进行接口调试,我这里使用的是apifox,调用 user 接口,传入 username 和 password

然后在database里面就可以看到插入的这条数据

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

还可以执行查询接口,看数据是否已经存在

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

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

bash 复制代码
pnpm install cross-env @nestjs/config

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

在根目录创建 .env.stage.default.env.stage.dev.env.stage.prod 并在default文件里面配置数据库基本配置,在prod 文件里面添加DB_SYNC=false,这里面主要是配置生产的数据库一些配置

.env.stage.default

env 复制代码
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 如下:

tsconfig.lib.json

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

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

ts 复制代码
export * from './db.module';

然后修改main.ts

接下来重启项目,测试刚才的查询是否好使,如果重启失败报错,请仔细检查代码是否有出入

个人学习记录!!!

相关推荐
前端李易安6 小时前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js
Ztiddler15 小时前
【npm设置代理-解决npm网络连接error network失败问题】
前端·后端·npm·node.js·vue
前端青山16 小时前
webpack进阶(一)
前端·javascript·webpack·前端框架·node.js
老攀呀18 小时前
安装多个nodejs版本(nvm)
node.js
佚名程序员18 小时前
【Node.js】全面解析 Node.js 安全最佳实践:保护您的应用
安全·node.js
zxg_神说要有光1 天前
快速入门 AI:调用 AI 接口生成 React 组件
前端·javascript·node.js
佚名程序员1 天前
【Node.js】深入理解 V8 JavaScript 引擎
前端·javascript·node.js
赵闪闪1681 天前
Node.js 安装与开发环境配置全指南
node.js
前端与小赵1 天前
什么是Webpack,有什么特点
前端·webpack·node.js
生椰拿铁You1 天前
03 —— Webpack 自动生成 html 文件
前端·webpack·node.js