【Nest Tutorial】第三部分：连接 MySQL 数据库并呈现数据

2023-07-30 18:29:43

MySQL 数据库连接和 NestJS 服务端渲染指南

在当今数据驱动的世界中，数据库连接和服务端渲染在构建健壮、高效的 Web 应用程序中至关重要。NestJS ，一个流行的 Node.js 框架，通过简化这些任务为开发人员提供了宝贵的优势。本指南将深入探讨如何在 NestJS 中连接 MySQL 数据库并利用服务端渲染呈现数据。

NestJS 简介

NestJS 是一个模块化且可扩展的框架，它遵循基于类的编程范例。它提供了开箱即用的支持，用于处理请求、依赖项注入和数据库交互，从而简化了应用程序开发。

MySQL 连接

MySQL 是一个开源的关系型数据库管理系统 (RDBMS)，在 Web 应用程序中广泛使用。要连接到 MySQL 数据库，我们需要执行以下步骤：

安装 MySQL 依赖项： 使用 npm 安装 mysql2 包，这是 Node.js 的流行 MySQL 客户端。
配置连接： 在 NestJS 的 main.ts 文件中，使用 TypeORM 配置 MySQL 连接参数，包括主机、端口、用户名和密码。
创建实体类： 实体类代表数据库中的表。在我们的示例中，我们创建一个 Cat 实体类，它包含有关猫的详细信息。

服务端渲染 (SSR)

服务端渲染是一种在服务器端生成 HTML 页面并将其发送到客户端的做法。与客户端渲染 (CSR) 相比，SSR 提供了几个优势，包括：

更快的页面加载： SSR 可以在服务器端预先呈现页面，从而减少页面加载时间。
更好的 SEO： 搜索引擎更喜欢具有 SSR 的页面，因为它使它们能够直接抓取内容，而无需等待 JavaScript 呈现页面。

实现 SSR

要在 NestJS 中实现 SSR，我们需要：

使用模板引擎： 使用诸如 Pug 或 Handlebars 之类的模板引擎来创建 HTML 页面。
创建控制器： 创建控制器来处理 SSR 请求并返回渲染的页面。
配置 SSR： 在 NestJS 模块中配置 SSR，包括模板引擎和控制器。

代码示例

以下代码示例演示了如何在 NestJS 中连接 MySQL 数据库并使用 SSR 呈现数据：

// main.ts
import { TypeOrmModule } from '@nestjs/typeorm';

@Module({
  imports: [
    TypeOrmModule.forRoot({
      type: 'mysql',
      host: 'localhost',
      port: 3306,
      username: 'root',
      password: '',
      database: 'nest_mysql',
      entities: [Cat],
      synchronize: true,
    }),
  ],
})
export class AppModule {}

// Cat.ts
import { Entity, PrimaryGeneratedColumn, Column } from 'typeorm';

@Entity()
export class Cat {
  @PrimaryGeneratedColumn()
  id: number;

  @Column()
  name: string;

  @Column()
  age: number;

  @Column()
  breed: string;
}

// CatsController.ts
import { Controller, Get, Post, Body, Delete, Param } from '@nestjs/common';
import { CatsService } from './cats.service';
import { Cat } from '../entities/Cat';

@Controller('cats')
export class CatsController {
  constructor(private readonly catsService: CatsService) {}

  @Get()
  findAll(): Promise<Cat[]> {
    return this.catsService.findAll();
  }
}

// CatsService.ts
import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { Cat } from '../entities/Cat';

@Injectable()
export class CatsService {
  constructor(
    @InjectRepository(Cat)
    private readonly catsRepository: Repository<Cat>,
  ) {}

  findAll(): Promise<Cat[]> {
    return this.catsRepository.find();
  }
}