:::tip{title="公司vpn配置(协议类型L2TP)（Mac笔记本配置）"}
本文介绍了（Mac笔记本）如何配置公司的vpn配置(协议类型L2TP)，别的也大同小异
:::



# 一、打开系统设置

![https://image.myxuechao.com/VPN/30.png](https://image.myxuechao.com/VPN/30.png)

# 二、打开网络

![https://image.myxuechao.com/VPN/31.png](https://image.myxuechao.com/VPN/31.png)

# 三、点击网络页面其他服务右下角三个点，添加VPN配置中的L2TP

![https://image.myxuechao.com/VPN/32.png](https://image.myxuechao.com/VPN/32.png)

# 四、配置VPN，服务器填写公司的服务器ip，共享密钥没有可以随便填写

![https://image.myxuechao.com/VPN/33.png](https://image.myxuechao.com/VPN/33.png)

# 五、打开终端编辑文件

## （1）创建文件

- 打开终端，进入 **`/etc/ppp`** 目录，输入下面命令 **`sudo vim options`**，创建options配置文件；

```jsx
sudo vim /etc/ppp/options
```

## （2）添加配置

- 复制以下内容，粘贴到 **`options`** 文件，然后 **`:wq`** 保存退出。

> **`重点`** : 如果你有共享密钥：就不可以写 **`l2tpnoipsec`**，如果没有那么就 **`l2tpnoipsec`**
> 

```jsx
# 加载L2TP插件
plugin L2TP.ppp
# 启用L2TP但不使用IPsec安全协议
l2tpnoipsec
```

# 六、连接VPN

- **首次连接的时候一定要保证电脑没有开任何的翻墙代理**

![https://image.myxuechao.com/VPN/34.png](https://image.myxuechao.com/VPN/34.png)

**到这一步，已经可以使用mac连接公司内网了，ping也能ping通，但是还是无法正常访问。**

# 七、解决无法正常访问解决

- **终端运行以下命令(默认是1，不需要的时候可以更改回来)**
- **连接公司内网之前，打开终端，执行如下两行命令：**

```jsx
sudo sysctl net.link.generic.system.hwcksum_tx=0
sudo sysctl net.link.generic.system.hwcksum_rx=0
```

- 解释一下：

**`net.link.generic.system.hwcksum_tx`**                当其值为0时，禁用传输时的硬件校验和

**`net.link.generic.system.hwcksum_rx`**                 当其值为0时，禁用接收时的硬件校验和

**然后就可以正常访问公司内网了**

### 注意事项：

如果连上VPN后无法访问系统地址，需要cmd执行下面命令 route -p add 172.16.4.0 mask 255.255.254.0 192.168.100.3（本机获取的IP）

### 获取Mac笔记本ip

- 在终端输入命令

```jsx
ipconfig getifaddr en0
```

公司vpn配置(协议类型L2TP)Mac笔记本配置

代码规范化与自动化工具实践

:::tip{title=" node脚本自动化替换css单位 px 为 rem"}
这篇文件介绍了一个Node.js脚本，用于全局自动化替换CSS文件中的像素单位（px）为相对单位（rem），以提高项目中样式单位的灵活性和可维护性。
:::



# 需求

一个项目里面有大屏的，管理端的，大屏的需要转rem，管理端的不需要转。

手动替换还要自己去计算一次，vscode的全局替换又不能执行函数，所以只能写一个脚本来替换了

[克隆或下载本仓库](https://github.com/lxc482113948/px-to-rem-converter.git)

```jsx
/*
 * @Author: LiuXueChao
 * @Date: 2024-03-31 12:20:03
 * @LastEditors: your name
 * @LastEditTime: 2024-03-31 12:26:09
 * @Description: file content
 */
/** 
 * 将相应文件中的px转成rem，方便替换
 * 手动替换麻烦的很
 */
const { glob } = require('glob');
const path = require('path');
const fs = require('fs');
// 可根据实际情况修改为其他路径
const filesToReplace = 'src/views/demo/**/*.vue'
/** 
 * 遍历需要替换的文件
 */
glob(filesToReplace, {
    // glob('src/views/rem/**/*.vue', {
    ignore: ['node_modules/**', 'dist/**', 'biuld.js', '.git/**'],
    dot: true,
}).then((files) => {
    console.log('需要替换的文件数目： ' + files.length);
    console.log('替换开始');
    files.forEach((item) => {
        // 定义一个替换函数
        function replacePxWithRem (match, p1) {
            // 将捕获的数字 p1 转换为 rem，并保留三位小数
            var remValue = (1 / 16 * parseInt(p1)).toFixed(3);
            // 返回替换后的字符串
            return remValue + "rem";
        }
        const path_ = path.join(__dirname, '../', item);
        let content = fs.readFileSync(path_, "utf8");
        content = content.replace(/\b(\d+)px\b/g, replacePxWithRem);
        fs.writeFileSync(path_, content, "utf8");
        console.log('替换成功：' + item);
    });
    console.log('替换结束');
}).catch((e) => {
    console.log(e);
});
```

整体来说是个非常简单的脚本，用正则找到px然后进行替换，也可以装一些解析css的库来操作，我这样的就够用了

记录一下方便以后可能会替换其他的

node脚本自动化替换css单位 px 为 rem 

:::tip{title="nestjs控制器Controller（四）"}
这篇文章详细介绍了在NestJS框架中如何定义控制器（Controller）以处理HTTP请求，如何通过装饰器（如`@Get`、`@Post`等）定义路由来响应不同的HTTP方法，并如何使用参数装饰器（如`@Body`、`@Query`、`@Param`等）从请求中提取信息。文章通过实例代码清晰展示了这些概念的应用，帮助开发者理解和使用NestJS进行Web应用开发。
:::
 

# 一、什么是 Controller？

什么是 **`Controller`**？语义化翻译就是 **控制器**，它负责处理传入的请求并将响应结果返回给客户端。

控制器的目的是接收应用程序的特定请求。其 **路由** 机制控制哪个控制器接收哪些请求。通常，每个控制器都有多个路由，不同的路由可以执行不同的操作。

# 二、如何将类定义为控制器？

在类声明上，定义 `@Controller()` 装饰器，即可将该类定义为控制器，在 `Nest` 中，几乎所有的装饰器都是以方法形式存在的，我们通过查看 `@Controller()` 装饰器的源码：

```bash
export function Controller(prefix?: string): ClassDecorator {
  const path = isUndefined(prefix) ? '/' : prefix;
  return (target: object) => {
    Reflect.defineMetadata(PATH_METADATA, path, target);
  };
}
```

可以看出，控制器装饰器有一个可选的方法参数，该参数默认值为 `/`，其作用就是定义当前控制器类下所有路由方法的前缀，这样以来，就可以避免我们在定义路由时出现多余的相同前缀。

现在，让我们定义一个前缀为 `cats` 的控制器：

```bash
import { Controller } from '@nestjs/common';

@Controller('cats')
export class CatsController { }
```

# 三、如何在类的方法上定义路由？

在类的方法声明上，定义 `@Get()`、`@Post()`、`@Put()`、`@Patch()`、`@Delete()`、`@Options()`、`@Head()`、`@All()`。这些装饰器都表示各自的 **HTTP** 请求方法。

现在，让我们在上述的 `CatsController` 类中定义实际开发中常用的几种路由映射：

```bash
import { Controller, Get, Post, Body, Put, Param, Delete } from '@nestjs/common';

@Controller('cats')
export class CatsController {
  @Post()
  async create(@Body() createCatDto: CreateCatDto) {
    return 'This action adds a new cat';
  }

  @Delete(':id')
  async remove(@Param('id') id) {
    return `This action removes a #${id} cat`;
  }

  @Put(':id')
  async update(@Param('id') id, @Body() updateCatDto: UpdateCatDto) {
    return `This action updates a #${id} cat`;
  }

  @Get(':id')
  async findOne(@Param('id') id) {
    return `This action returns a #${id} cat`;
  }

  @Get()
  async findAll(@Query() query) {
    return `This action returns all cats (limit: ${query.limit} items)`;
  }
}

// createCatDto 和 updateCatDto 可以使用类来定义其结构：
export class CreateCatDto {
    id: number;
    name: string;
}

export class UpdateCatDto {
    name: string;
}
```

在定义路由时，方法参数中，我们使用到了 `@Body()`、`@Query()`、`@Param()` 这样的参数装饰器，他们是什么意思呢？用过 `express` 的同学都会经常接触到：`req`、`res`、`next`、`req.body`、`req.query`、`req.params`等等，诸如此类的特性，下面我们列举出，在 **Nest** 框架中，这些装饰器与 `express` 中的使用方法是如何对应的

# 四、NestJS参数装饰器详细说明

| 装饰器全称 | 缩写 | 对应Express对象属性 | 描述 | 常用请求类型 | 应用场景示例 |
| --- | --- | --- | --- | --- | --- |
| @Request() | @Req() | req | 获取整个请求对象。 | 所有请求类型 | 当需要访问请求的元数据或执行非标准操作时。 |
| @Response() | @Res() | res | 获取响应对象。 | 所有请求类型 | 自定义响应，如设置特定的HTTP状态码或头部。 |
| @Next() | 无 | nest | 获取next函数，用于执行中间件链中的下一个函数。 | 所有请求类型 | 在处理请求的过程中，手动控制和调用中间件链中的下一个中间件函数。 |
| @Query() | 无 | req.query / req.query[param] | 获取请求的查询参数（URL中的查询字符串）。 | GET | 分页参数、搜索条件等。 |
| @Body() | 无 | req.body / req.body[param] | 获取请求体中的数据。 | POST, PUT, PATCH | 提交表单数据，如用户注册信息、文章内容等。 |
| @Param() | 无 | req.params / req.params[param] | 获取请求路径中的参数，例如在RESTful API中通过资源ID访问资源。 | GET, DELETE | 访问特定资源的详情或删除操作，如/users/:userId。 |
| @Headers() | 无 | req.headers / req.headers[param] | 获取请求头中的数据。 | 所有请求类型 | 认证（如Bearer Token）、自定义头部等。 |
| @Session() | 无 | req.session | 获取当前会话对象。这依赖于你的应用是否使用了会话管理。 | 所有请求类型 | 用户登录状态、购物车内容等会话级别的数据管理。 |
| @Ip() | 无 | req.ip | 获取发起请求的客户端IP地址。 | 所有请求类型 | 使用@Ip()装饰器可以为安全审计、定位服务或请求来源限制等场景提供客户端IP地址。 |
| @HostParam() | 无 | req.hosts | 获取请求的主机参数（注意：@HostParam()并非Express的标准属性，此处可能需要特别处理或自定义实现）。 | 所有请求类型 | @HostParam()装饰器用于获取请求的主机名参数，常见于需要基于不同主机名或子域名提供不同逻辑处理的多租户应用场景。 |

> Tips：Nest 底层默认使用了 `express` 作为 web 层的框架
> 
> 
> 注意：如果在方法参数中定义了 @Res() 或 @Next()，此时该方法的 return 语句会被阻塞，因为 return 形式的返回是 nest 标准形式，而一但使用了上述两个装饰器后，nest 不会在用标准 形式返回数据，此时必须使用 res.send / res.end / res.json 等，这种 `express` 特定的写法返回数据。
> 

# 二、常用的装饰器

## (1)常用的方法装饰器

NestJS 通过一系列方法装饰器，简化了路由的定义，使得创建RESTful API变得直观和高效。

- **`@Get()`**：定义一个处理GET请求的路由。用于获取资源。
- **`@Post()`**：定义一个处理POST请求的路由。常用于创建资源。
- **`@Patch()`**：定义一个处理PATCH请求的路由。用于对资源进行部分更新。
- **`@Delete()`**：定义一个处理DELETE请求的路由。用于删除资源。

这些装饰器通过明确的HTTP方法指示，使得API的意图和行为变得清晰易懂。

## （2）常用的方法参数装饰器

方法参数装饰器用于从请求中提取信息，极大地简化了数据处理过程。

- **`@Body()`**：从请求体中提取数据，常用于处理POST和PATCH请求中的内容。
- **`@Query()`**：从URL查询字符串中提取参数，常用于过滤GET请求的结果。
- **`@Param()`**：从路由参数中提取特定的值，常用于获取资源的标识符。
- **`@Request()`**, **`@Req()`**：提取整个请求对象，使得可以访问请求的所有细节。
- **`@Response()`**, **`@Res()`**：提取响应对象，用于自定义响应的发送。

这些装饰器使得从请求中获取所需的任何信息变得非常直接和方便。

## （3）其他有用但不常用的装饰器

虽然在日常开发中可能不常用，但以下装饰器在特定场景下非常有用：

- **`@HttpCode()`**：自定义响应的HTTP状态码。
- **`@Header()`**：自定义响应头。
- **`@Redirect()`**：对请求进行重定向。

这些装饰器提供了额外的控制，使得可以根据需求定制响应的行为。

# 三、调试工具

调试工具可以使用[**postMan](https://www.postman.com/)  [ApiFox](https://apifox.com/?utm_source=baidu_sem1)** 等

## （1）获取get请求传参

可以使用`**Request装饰器**` 或者 `**Query 装饰器**` 跟 **express** 完全一样

![https://image.myxuechao.com/NestJs/3.png](https://image.myxuechao.com/NestJs/3.png)

也可以使用`**Query**` 直接获取 不需要在通过`**req.query**` 了

![https://image.myxuechao.com/NestJs/4.png](https://image.myxuechao.com/NestJs/4.png)

```bash
import { Controller, Get, Post, Body, Patch, Param, Delete, Request, Query, Headers, HttpCode } from '@nestjs/common';

import { UserService } from './user.service';

@Controller('user')
export class UserController {
  constructor(private readonly userService: UserService) {}
  // ################# 获取GET请求参数的方式 ##################
  /**
   * @description 处理GET请求，使用@Request()获取整个请求对象
   * @param {*} req 请求对象
   * @return {*} 返回userService的findAllWithRequest方法的结果
   */
  @Get('request')
  findAllWithRequest(@Request() req) {
    return this.userService.findAllWithRequest(req);
  }

  /**
   * @description 处理GET请求，使用@Query()获取URL查询参数
   * @param {*} query 查询参数
   * @return {*} 返回userService的findAllWithQuery方法的结果
   */
  @Get('query')
  findAllWithQuery(@Query() query) {
    return this.userService.findAllWithQuery(query);
  }
}

```

## （2）post 获取参数

可以使用`**Request装饰器**` 或者 `**Body 装饰器**` 跟express 完全一样

![https://image.myxuechao.com/NestJs/5.png](https://image.myxuechao.com/NestJs/5.png)

**或者直接使用`Body 装饰器`**

![https://image.myxuechao.com/NestJs/6.png](https://image.myxuechao.com/NestJs/6.png)

```bash
import { Controller, Get, Post, Body, Patch, Param, Delete, Request, Query, Headers, HttpCode } from '@nestjs/common';

import { UserService } from './user.service';

@Controller('user')
export class UserController {
  constructor(private readonly userService: UserService) {}

  @Post()
  create(@Body() body) {
    console.log('body: ', body);
    return {
      code: 200,
      message: 'success',
      data: body,
    };
  }
}

```

## (3)**动态路由**

可以使用`**Request装饰器**` 或者 `**Param 装饰器**` 跟express 完全一样

![https://image.myxuechao.com/NestJs/7.png](https://image.myxuechao.com/NestJs/7.png)

**或者直接使用`Param 装饰器`**

![https://image.myxuechao.com/NestJs/8.png](https://image.myxuechao.com/NestJs/8.png)

```bash
import { Controller, Get, Post, Body, Patch, Param, Delete, Version, Request, Query } from '@nestjs/common';
import { UserService } from './user.service';
 
@Controller('user')
export class UserController {
  constructor(private readonly userService: UserService) { }
 
  @Get(':id')
  findId (@Param() param) {
     
    console.log(param)
 
    return {
       code:200
    }
  }
}
```

nestjs控制器Controller（四）

:::tip{title="nestjs cli 常用命令（三）"}
本文介绍了如何使用 Nest.js CLI 命令创建 Nest.js 项目和生成常见模块，并演示了通过命令行快速生成 CURD 模板。简洁明了，总结为一句话：本文介绍了 Nest.js CLI 的常用命令和快速生成 CURD 模板的方法。
:::


# 一、查看nestjs所有的命令

**（1）`nest --help` 可以查看nestjs所有的命令**

| name | alias | description | 名称 | 别名 | 描述 |
| --- | --- | --- | --- | --- | --- |
| application | application | Generate a new application workspace | 应用程序 | 应用程序 | 生成一个新的应用程序工作空间 |
| class | cl | Generate a new class | 类 | cl | 生成一个新的类 |
| configuration | config | Generate a CLI configuration file | 配置 | config | 生成一个 CLI 配置文件 |
| controller | co | Generate a controller declaration | 控制器 | co | 生成一个控制器声明 |
| decorator | d | Generate a custom decorator | 装饰器 | d | 生成一个自定义装饰器 |
| filter | f | Generate a filter declaration | 过滤器 | f | 生成一个过滤器声明 |
| gateway | ga | Generate a gateway declaration | 网关 | ga | 生成一个网关声明 |
| guard | gu | Generate a guard declaration | 守卫 | gu | 生成一个守卫声明 |
| interceptor | itc | Generate an interceptor declaration | 拦截器 | itc | 生成一个拦截器声明 |
| interface | itf | Generate an interface | 接口 | itf | 生成一个接口 |
| library | lib | Generate a new library within a monorepo | 库 | lib | 在一个 monorepo 中生成一个新的库 |
| middleware | mi | Generate a middleware declaration | 中间件 | mi | 生成一个中间件声明 |
| module | mo | Generate a module declaration | 模块 | mo | 生成一个模块声明 |
| pipe | pi | Generate a pipe declaration | 管道 | pi | 生成一个管道声明 |
| provider | pr | Generate a provider declaration | 提供者 | pr | 生成一个提供者声明 |
| resolver | r | Generate a GraphQL resolver declaration | 解析器 | r | 生成一个 GraphQL 解析器声明 |
| resource | res | Generate a new CRUD resource | 资源 | res | 生成一个新的 CRUD 资源 |
| service | s | Generate a service declaration | 服务 | s | 生成一个服务声明 |
| sub-app | app | Generate a new application within a monorepo | 子应用 | app | 在一个 monorepo 中生成一个新的应用程序 |

# 二、案例生成一个用户模块

> **我们可以直接使用一个命令生成`CURD`**
> 

```bash
# 使用 Nest CLI 生成新的资源
nest g resource [模块名称]

# 示例:
# 生成一个名为 'user' 的新资源
nest g resource user
```

![https://image.myxuechao.com/NestJs/1.png](https://image.myxuechao.com/NestJs/1.png)

首次运行此命令时，除了生成文件外，`**Nest CLI**` 还会自动执行 `**npm install**` 以更新资源并安装必要的插件。这些操作仅在首次运行命令时执行，后续再次运行命令时则不会重复更新。

![https://image.myxuechao.com/NestJs/2.png](https://image.myxuechao.com/NestJs/2.png)

**此时！完美生成了一套标准的CURD 模板**