# nest-cms-template-study

**Repository Path**: yin-chunyang/nest-cms-template-study

## Basic Information

- **Project Name**: nest-cms-template-study
- **Description**: @angular-devkit/schematics-cli 创建模板（增删改查模板）可快速生成代码
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-02-27
- **Last Updated**: 2025-03-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


```shell
npm install
npm run build
```
nestjs项目目录
```shell
nest g nestCmsHandlebarsTemplate apply 苹果 --collection=C:/studyFiles/nest-cms-handlebars-template
```


生成`handlebars`，`dto`，`service`，`controller`

![alt text](./assets/image.png)
![alt text](./assets/demo02.png)


# 模板搭建

## 1.Schematics
- `schematics`是一个现代web的脚手架库
- `schematics`是一种生成器，可以转换现有文件系统。它可以创建文件，重构现有文件或移动文件。
- `schematics`是一个库，本身无法独立运行。可以在此参考CLI中找到它，并且可以在npm上以@angular-devkit/schematics-cli的形式发布

## 2.@angular-devkit/schematics-cli
- `@angular-devkit/schematics-cli` 是Angular提供的一个工具，用于创建和管理自定义的`Schematics`
- `Schematics`是一组用于`Angular`项目中生成或修改代码的命令，可以帮助开发者自动化代码生成任务，如创建组件，服务，模块等。
- `@angular-devkit/schematics-cli` 提供了一组命令工具，帮助开发者创建和测试自定义的`schematics`

### 2.1.安装
```shell
npm install @angular-devkit/schematics-cli -g
```

### 2.2.创建项目
```shell
schematics blank --name=nest-cms-template
```
这会创建一个基本的`schematics`项目结构，其中包括最小的配置和代码文件。

### 2.3.运行项目

#### 2.3.1.命令
```shell
npm run build
schematics .:nestCmsHandlebarsTemplate --name=role --title=角色
schematics .:nestCmsHandlebarsTemplate --name=role --title=角色 --dry-run=false
schematics .:nestCmsHandlebarsTemplate --name=role --title=角色 --no-dry-run
```
package.json中的schematics字段指示该包是一个schematics集合

它指定了，schematics集合的入口文件在哪里
```shell
"schematics": "./src/collection.json",
```

##### ./src/collection.json**
```json
{
  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
  "schematics": {
    "nest-cms-handlebars-template": {
      "description": "A blank schematic.",
      "factory": "./nest-cms-handlebars-template/index#nestCmsHandlebarsTemplate"
    }
  }
}
```
- `$schema` 指定了用于验证和解释此JSON文件的模式schema，它指向了`collection-schema.json`文件，它可以确保文件的结构符合`schematics`集合标准格式
- `schematics` 是配置的核心部分，定义了该集合所有的`schematics`
  - `nest-cms-handlebars-template`是`schematics`的名称，在运行这个`schematics`的时候，可以通过命令行使用这个名称执行此`schematics`.
    - > `schematics .:nestCmsHandlebarsTemplate --name=role --title=角色 --dry-run=false`
    `nestCmsHandlebarsTemplate` 就是 `nest-cms-handlebars-template`
    - `description` 对此`schematics`的描述
    - `factory` 指定规则工厂函数的位置，这个规则工厂函数就是`schematics`的真正逻辑所在
      - `./nest-cms-handlebars-template` 表示规则工厂函数位于`./nest-cms-handlebars-template/index`文件中
      - 并且规则工厂函数名称为`nestCmsHandlebarsTemplate`

##### ./nest-cms-handlebars-template/index#nestCmsHandlebarsTemplate
```typescript
import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
//不用默认导出函数。您也可以拥有多个规则工厂
//每个文件。
export function nestCmsHandlebarsTemplate(options: any): Rule {
  console.log('_options',options)
  return (tree: Tree, context: SchematicContext) => {
    console.log('_context', context);
    return tree;
  };
}
```
1. `Rule` 是一个函数，它接受一个`Tree`对象，并且返回一个新的`Tree`对象。用于定义文件系统的变更更规则
2. `SchematicContext` 提供了有关当前运行中的原理图上下文信息和工厂，比如说日志记录和任务调度
3. `Tree` 是一个虚拟的文件系统，用于暂存和记录对实际文件系统的更新，直到提交时才应用

## 模板文件名称
![alt text](./assets/template.filename.png)

使用模板方法格式化命名的;

```shell
schematics .:nestCmsHandlebarsTemplate --name=roleMange --title=角色 --no-dry-run
```

![alt text](./assets/template.filename.fn.png)

## 模板内作用域和命名

使用一下工具和方法，转换字符串格式用来命名;

```typescript
import {strings} from '@angular-devkit/core'
import {plural} from 'pluralize';
```

将`strings`,`plural`方法注入到模板中
```typescript
import { Rule, SchematicContext, Tree, apply, url, applyTemplates, move, chain, mergeWith } from '@angular-devkit/schematics';
import * as path from 'path';
import {strings} from '@angular-devkit/core'
import {plural} from 'pluralize';
export function nestCmsHandlebarsTemplate(options: any): Rule {
  return (_tree: Tree, _context: SchematicContext) => {
    const entityName = options.name;    //获取name参数
    const sourceTemplateRules = apply(
      url('./files'),
      [
        applyTemplates({
          entityName,
          plural,
          ...strings, //向模板中传入一些方法
        }),
        move(path.normalize('target'))
      ]
    )
    return chain([
      mergeWith(sourceTemplateRules)
    ])
  };
}
```

## 项目目录中运行
```shell
nest g nestCmsHandlebarsTemplate role 角色 --collection=C:/studyFiles/nest-cms-handlebars-template
```

## 修改admin.module.ts文件

https://astexplorer.net/ 借助该工具查看源文件对象

```typescript
import { Module } from '@nestjs/common';
import { DashboardController } from './controller/dashboard.controller';
import { UserController } from './controller/user.controller';
import { TestController } from './controller/test.controller';
import { RoleController } from './controller/role.controller';

@Module({
  controllers: [
    DashboardController,
    UserController,
    TestController,
    RoleController,
  ],
})
export class AdminModule {}
```
1. 定义要修改的文件路径
2. 读取源文件的内容，并转为字符串
3. 根据源文件代码字符串，创建对应AST抽象语法树，ts.sourceFile
4. 定义TS转换工厂函数，函数的参数就是AST语法树的根节点
  
  1. 找到文件中的最后一个import语句
  2. 根据AST抽象语法树规则，创建一个新的import语句`import { RoleController } from './controller/role.controller'`
  3. 创建新的语句数组，插入到最后的import语句后
  4. 更新语法树，四条statements变成五条statements

5. 应用变更并获取更新后的源文件
6. 将更新后的源文件内容写入到指定的路径