NestJS博客实战07：导入页面

2023-12-27 22:24:15

前端页面集成到 NestJS 的终极指南

在构建现代网络应用程序时，经常需要将前端静态页面与后端服务集成。NestJS，一个流行的 Node.js 框架，提供了无缝导入和管理前端页面的能力。本指南将深入探讨如何将前端页面引入 NestJS 中，完成基本的前端页面搭建。

1. 导入页面

首先，创建一个名为 views 的目录来存放所有前端页面。将 HTML、CSS 和 JavaScript 文件组织到此目录中。

接下来，在 app.module.ts 文件中，导入 ServeStaticModule 并将其添加到 imports 数组中。此模块允许 NestJS 提供静态文件。

import { ServeStaticModule } from '@nestjs/serve-static';
import { join } from 'path';

@Module({
  imports: [
    ServeStaticModule.forRoot({
      rootPath: join(__dirname, '..', 'public'),
    }),
  ],
})
export class AppModule {}

2. 配置 ServeStaticModule

ServeStaticModule 需要配置以指示从哪里提供静态文件。在 app.module.ts 中，将 rootPath 属性设置为 views 目录的路径。

3. 访问页面

现在，可以通过在浏览器中输入以下 URL 来访问前端页面：

http://localhost:3000/<page-name>

例如，要访问名为 index.html 的页面，请输入：

http://localhost:3000/index.html

4. 代码示例

以下是一个完整的示例，展示了如何将前端页面集成到 NestJS 中：

app.module.ts

import { Module } from '@nestjs/common';
import { ServeStaticModule } from '@nestjs/serve-static';
import { join } from 'path';

@Module({
  imports: [
    ServeStaticModule.forRoot({
      rootPath: join(__dirname, '..', 'public'),
    }),
  ],
})
export class AppModule {}