# nest-ejs-mvc

**Repository Path**: sangming12/nest-ejs-mvc

## Basic Information

- **Project Name**: nest-ejs-mvc
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-07
- **Last Updated**: 2026-01-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


# NestJS + Webpack5 + EJS 多页面 MVC 项目

一个基于 NestJS (后端) + Webpack5 + EJS (前端) 构建的前后端一体化 MVC 项目，对标 ASP.NET/JSP 的开发体验，实现「后端控制路由 + 模板渲染 + 前端资源工程化打包」的完整闭环。

## 🌟 项目特性
- **MVC 架构**：严格遵循 Model (NestJS Service) + View (EJS 模板) + Controller (NestJS Controller) 分层设计
- **多页面打包**：Webpack5 实现前端多页面工程化，支持 EJS 模板解析、静态资源分离、哈希缓存
- **前后端一体化**：NestJS 接管路由和模板渲染，前端资源通过 Webpack 打包后无缝集成到后端
- **开发体验优化**：支持前端热更新、后端热重载，同时启动前后端服务
- **环境兼容**：适配 Node.js 16+、NestJS 10.x、Webpack5.x，TypeScript 类型校验全覆盖

## 📋 环境准备
### 基础依赖
- Node.js ≥ 16.0.0 (推荐 18.x LTS)
- npm ≥ 8.0.0 (或 yarn/pnpm)
- 操作系统：Windows/macOS/Linux 均可

### 全局工具安装
```bash
# 安装 NestJS CLI (v10 稳定版，兼容性最佳)
npm install -g @nestjs/cli@10.3.2
```

## 🚀 快速启动
### 1. 克隆/下载项目
```bash
# 本地项目直接进入根目录即可
cd nest-ejs-mvc
```

### 2. 安装依赖
```bash
# 安装根目录依赖（前端+后端）
npm install

# 安装后端独立依赖（可选，确保 EJS 等依赖生效）
cd backend && npm install && cd ..
```

### 3. 开发环境启动
```bash
# 同时启动前端 Webpack 热更新 + 后端 Nest 热重载
npm run dev

# 单独启动前端
npm run dev:webpack

# 单独启动后端
npm run nest:dev
```

### 4. 访问项目
- 前端打包预览：http://localhost:8080 (Webpack Dev Server)
- 后端 MVC 页面：http://localhost:3000 (NestJS 服务，核心访问地址)
  - 首页：http://localhost:3000
  - 关于页：http://localhost:3000/about
  - 用户详情页：http://localhost:3000/user/1

### 5. 生产环境打包
```bash
# 打包前端资源 + 编译后端代码
npm run build

# 启动生产环境服务
npm run start
```

## 📂 目录结构
```
nest-ejs-mvc/
├── README.md                 # 项目说明文档
├── package.json              # 根目录依赖 + 脚本
├── tsconfig.json             # TS 公共配置
├── tsconfig.frontend.json    # 前端 TS 配置（Webpack 适配）
├── tsconfig.backend.json     # 后端 TS 配置（NestJS 适配）
├── webpack.config.js         # Webpack5 多页面打包配置
├── dist/                     # 前端打包输出目录（自动生成）
│   ├── home/                 # 首页打包产物
│   │   ├── index.html        # EJS 渲染后的 HTML
│   │   ├── js/               # 首页 JS（带哈希）
│   │   └── css/              # 首页 CSS（带哈希）
│   └── about/                # 关于页打包产物
├── src/                      # 前端源码目录
│   ├── pages/                # 多页面模块
│   │   ├── home/             # 首页模块
│   │   │   ├── index.ejs     # 首页 EJS 模板
│   │   │   ├── index.js      # 首页入口 JS
│   │   │   └── style.css     # 首页样式
│   │   └── about/            # 关于页模块
│   └── assets/               # 前端静态资源（图片/字体等）
└── backend/                  # NestJS 后端目录
    ├── controllers/          # 控制器（MVC-C 层）
    │   └── page.controller.ts # 页面路由控制器
    ├── services/             # 服务（MVC-M 层，业务逻辑/数据处理）
    │   └── user.service.ts   # 用户数据服务
    ├── src/                  # Nest 核心目录
    │   ├── app.module.ts     # Nest 根模块
    │   └── main.ts           # Nest 入口文件（配置视图引擎）
    ├── dist/                 # 后端编译输出目录（自动生成）
    └── package.json          # 后端依赖
```

## 🎯 核心架构说明
### MVC 分层对应关系
| 层级       | 实现技术                | 核心职责                                                                 |
|------------|-------------------------|--------------------------------------------------------------------------|
| Model      | NestJS Service          | 数据处理（模拟/数据库查询）、业务逻辑封装、数据校验                       |
| View       | EJS + Webpack5          | 页面渲染、前端样式/脚本管理、静态资源打包                               |
| Controller | NestJS Controller       | 接收 HTTP 请求、调用 Service 获取数据、注入数据到 EJS 模板并返回渲染结果 |

### 关键技术协同流程
1. **前端打包**：Webpack5 解析 EJS 模板 + 打包 JS/CSS，输出到 `dist/页面名/` 目录；
2. **后端配置**：NestJS 配置 EJS 视图引擎，关联 `dist` 目录的模板文件；
3. **请求处理**：
   - 用户访问 `http://localhost:3000` → Nest 控制器接收请求；
   - 控制器调用 Service 获取数据 → 注入到 EJS 模板；
   - 渲染 `dist/home/index.ejs` → 返回 HTML 给客户端。

## ⚙️ 核心配置说明
### 1. Webpack 多页面配置
- 入口：每个页面对应一个入口（`src/pages/[页面名]/index.js`）；
- 输出：按页面分目录（`dist/[页面名]/index.html`），JS/CSS 带哈希防缓存；
- EJS 处理：通过 `ejs-loader + html-loader` 解析模板，支持变量注入；
- 静态资源：自动分离到 `[页面名]/assets/` 目录，支持图片/字体等。

### 2. NestJS 视图引擎配置
```typescript
// backend/src/main.ts
const expressApp = app.getHttpAdapter().getInstance();
// 配置静态资源目录（指向 Webpack 打包产物）
expressApp.use(require('express').static(join(__dirname, '../../dist')));
// 配置 EJS 模板目录和引擎
expressApp.set('views', join(__dirname, '../../dist'));
expressApp.set('view engine', 'ejs');
```

### 3. 控制器模板渲染
```typescript
// backend/controllers/page.controller.ts
@Get('/')
@Render('home/index') // 渲染 dist/home/index.ejs
getHome() {
  return { title: '首页', users: this.userService.findAll() }; // 注入模板变量
}
```

## 📌 常用脚本说明
| 脚本命令          | 功能说明                                  |
|-------------------|-------------------------------------------|
| `npm run dev`     | 同时启动前端热更新 + 后端热重载            |
| `npm run dev:webpack` | 启动前端 Webpack Dev Server (端口 8080) |
| `npm run nest:dev` | 启动后端 Nest 热重载 (端口 3000)         |
| `npm run build`   | 打包前端资源 + 编译后端 TypeScript 代码   |
| `npm run start`   | 启动生产环境服务（依赖 build 产物）        |

## 🐞 常见问题解决
### 1. `title is not defined`（EJS 变量未定义）
- 原因：EJS 模板变量未通过 `templateParameters` 或 Nest 控制器注入；
- 解决：Webpack 配置中通过 `HtmlWebpackPlugin` 的 `templateParameters` 注入，或后端控制器返回变量。

### 2. `Cannot find module 'ejs'`
- 原因：EJS 依赖未安装到后端目录；
- 解决：进入 `backend` 目录执行 `npm install ejs`。

### 3. `host.onUnRecoverableConfigFileDiagnostic is not a function`
- 原因：Nest CLI 与 TypeScript 版本不兼容；
- 解决：降级 Nest CLI 到 v10.3.2 + TypeScript 到 v5.2.2。

### 4. 静态资源 404
- 原因：Nest 静态资源目录配置错误；
- 解决：确认 `expressApp.use(express.static(join(__dirname, '../../dist')))` 路径正确。

## 📈 扩展方向
1. **数据库集成**：接入 TypeORM + MySQL/PostgreSQL，替换模拟数据；
2. **用户认证**：实现 Session/JWT 登录认证，保护路由；
3. **前端框架整合**：在 EJS 中嵌入 Vue/React 组件，提升交互性；
4. **部署优化**：
   - 前端资源：Nginx 托管 + CDN 加速；
   - 后端服务：PM2 守护进程 + Nginx 反向代理；
5. **日志/监控**：集成 NestJS 日志模块、Prometheus 监控。