项目管理

## 全局安装
```
npm install -g commitizen cz-conventional-changelog  
```
```
echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc
```
主要, 全局模式下, 需要 ~/.czrc 配置文件, 为 commitizen 指定 Adapter.

## 项目级安装
```
npm install -D commitizen cz-conventional-changelog
```
package.json 中配置:
```
"script": {
    ...,
    "commit": "git-cz",
},
 "config": {
    "commitizen": {
      "path": "node_modules/cz-conventional-changelog"
    }
  }
```
如果全局安装过 commitizen, 那么在对应的项目中执行 git cz or npm run commit 都可以

管理项目提交信息

React.js

# 国际化

## 下载依赖

```javascript
# npm
npm install react-i18next i18next --save

# yarn
yarn add react-i18next i18next
```



## 使用

i18n>index.ts

```typescript
import i18n from "i18next";
import { initReactI18next } from "react-i18next";

// the translations
// (tip move them in a JSON file and import them,
// or even better, manage them separated from your code: https://react.i18next.com/guides/multiple-translation-files)
const resources = {
  en: {
    translation: {
      "Welcome to React": "Welcome to React and react-i18next"
    }
  },
  zh: {
    translation: {
      "Welcome to React": "Bienvenue à React et react-i18next"
    }
  }
};

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources,
    lng: "en", // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
    // you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
    // if you're using a language detector, do not define the lng option

    interpolation: {
      escapeValue: false // react already safes from xss
    }
  });

  export default i18n;
```

## index.js

```javascript
import React, { Component } from "react";
import { createRoot } from 'react-dom/client';
import './i18n';
import App from './App';

// append app to dom
const root = createRoot(document.getElementById('root'));
root.render(
  <App />
);
```





## 页面使用

```javascript
import React from 'react';

// the hook
import { useTranslation } from 'react-i18next';

function MyComponent () {
  const { t, i18n } = useTranslation();
  return <h1>{t('Welcome to React')}</h1>
}
```



## 切换语言

```
i18next.changeLanguage("en");
```



国际化是后台管理系统中常见的功能，而react-i18next则是react中方案的代表之作

国际化方案

Node.js

# 多对多的关系

多对多是一种 A 包含多个 B 实例，而 B 包含多个 A 实例的关系。 我们以`Question` 和 `Category` 实体为例。 Question 可以有多个 categories, 每个 category 可以有多个 questions。

```typescript
import { Entity, PrimaryGeneratedColumn, Column } from "typeorm";

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

  @Column()
  name: string;
}
```



```typescript
import { Entity, PrimaryGeneratedColumn, Column, ManyToMany, JoinTable } from "typeorm";
import { Category } from "./Category";

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

  @Column()
  title: string;

  @Column()
  text: string;

  @ManyToMany(() => Category)
  @JoinTable()
  categories: Category[];
}
```



`@JoinTable()`是`@ManyToMany`关系所必需的。 你必须把`@JoinTable`放在关系的一个（拥有）方面。

此示例将生成以下表：

```bash
+-------------+--------------+----------------------------+
|                        category                         |
+-------------+--------------+----------------------------+
| id          | int(11)      | PRIMARY KEY AUTO_INCREMENT |
| name        | varchar(255) |                            |
+-------------+--------------+----------------------------+

+-------------+--------------+----------------------------+
|                        question                         |
+-------------+--------------+----------------------------+
| id          | int(11)      | PRIMARY KEY AUTO_INCREMENT |
| title       | varchar(255) |                            |
+-------------+--------------+----------------------------+

+-------------+--------------+----------------------------+
|              question_categories_category               |
+-------------+--------------+----------------------------+
| questionId  | int(11)      | PRIMARY KEY FOREIGN KEY    |
| categoryId  | int(11)      | PRIMARY KEY FOREIGN KEY    |
+-------------+--------------+----------------------------+
```



如何保存这种关系：

```typescript
const category1 = new Category();
category1.name = "animals";
await connection.manager.save(category1);

const category2 = new Category();
category2.name = "zoo";
await connection.manager.save(category2);

const question = new Question();
question.categories = [category1, category2];
await connection.manager.save(question);
```



启用级联后，只需一次`save`调用即可保存此关系。

要在 categories 里面加载 question，你必须在`FindOptions`中指定关系：

```typescript
const questionRepository = connection.getRepository(Question);
const questions = await questionRepository.find({ relations: ["categories"] });
```



或者使用`QueryBuilder`

```typescript
const questions = await connection
  .getRepository(Question)
  .createQueryBuilder("question")
  .leftJoinAndSelect("question.categories", "category")
  .getMany();
```



通过在关系上启用预先加载，你不必指定关系或手动加入，它将始终自动加载。

关系可以是单向的和双向的。 单向是仅在一侧与关系装饰器的关系。 双向是与关系两侧的装饰者的关系。

我们刚刚创建了一个单向关系。 让我们改为双向：

```typescript
import { Entity, PrimaryGeneratedColumn, Column, ManyToMany } from "typeorm";
import { Question } from "./Question";

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

  @Column()
  name: string;

  @ManyToMany(() => Question, question => question.categories)
  questions: Question[];
}
```



```typescript
import { Entity, PrimaryGeneratedColumn, Column, ManyToMany, JoinTable } from "typeorm";
import { Category } from "./Category";

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

  @Column()
  title: string;

  @Column()
  text: string;

  @ManyToMany(() => Category, category => category.questions)
  @JoinTable()
  categories: Category[];
}
```



我们只是创建了双向关系。 注意，反向关系没有`@JoinTable`。 `@JoinTable`必须只在关系的一边。

双向关系允许您使用`QueryBuilder`从双方加入关系：

```typescript
const categoriesWithQuestions = await connection
  .getRepository(Category)
  .createQueryBuilder("category")
  .leftJoinAndSelect("category.questions", "question")
  .getMany();
```

多对多是一种 A 包含多个 B 实例，而 B 包含多个 A 实例的关系

typeorm 多对多的关系

## 接入Swagger

#### 安装组件

接入`swagger`组件和`swagger ui`组件

```
yarn add @midwayjs/swagger swagger-ui-dist
```

#### 开启组件

在`configuration.ts` 中增加组件

```
import { Configuration, App } from '@midwayjs/decorator';
import * as koa from '@midwayjs/koa';
import * as validate from '@midwayjs/validate';
import * as info from '@midwayjs/info';
import { join } from 'path';
import * as orm from '@midwayjs/orm';
import * as swagger from '@midwayjs/swagger';
// import { DefaultErrorFilter } from './filter/default.filter';
// import { NotFoundFilter } from './filter/notfound.filter';
import { ReportMiddleware } from './middleware/report.middleware';

@Configuration({
  imports: [
    koa,
    validate,
    {
      component: info,
      enabledEnvironment: ['local'],
    },
    orm,
    swagger,
  ],
  importConfigs: [join(__dirname, './config')],
})
export class ContainerLifeCycle {
  @App()
  app: koa.Application;

  async onReady() {
    // add middleware
    this.app.useMiddleware([ReportMiddleware]);
    // add filter
    // this.app.useFilter([NotFoundFilter, DefaultErrorFilter]);
  }
}
```

项目自动重启成功之后，访问地址

- UI: http://127.0.0.1:7001/swagger-ui/index.html
- JSON: http://127.0.0.1:7001/swagger-ui/index.json

启用之后可以查看到对应的接口

![图片](https://mmbiz.qpic.cn/mmbiz_png/2nvPS8RzNDyCqT386XERZYHSRPKHeFakrJmGZLm5DBPVVXbghUz7HdRfxz2iakpcR8hut1z14sKFOBOkPjLnqFg/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1)

`swagger`组件会自动识别各个`@Controller`中每个路由方法的`@Body()`、`@Query()`、`@Param()` 装饰器，提取路由方法参数和类型。

#### 增加接口标签

我们希望给接口增加标签注释，这样才能更好的列举接口的定义

```
import { Inject, Controller, Get, Query } from '@midwayjs/decorator';
import { Context } from '@midwayjs/koa';
import { ApiOperation } from '@midwayjs/swagger';
import { UserService } from '../service/user.service';

@Controller('/api')
export class APIController {
  @Inject()
  ctx: Context;

  @Inject()
  userService: UserService;

  @ApiOperation({ summary: '获取单个用户' })
  @Get('/get_user')
  async getUser(@Query('uid') uid) {
    const user = await this.userService.getUser({ uid });
    return { success: true, message: 'OK', data: user };
  }

  @ApiOperation({ summary: '增加单个用户' })
  @Get('/add_user')
  async addUser() {
    const user = await this.userService.addUser();
    return { success: true, message: 'OK', data: user };
  }

  @ApiOperation({ summary: '获取用户列表' })
  @Get('/get_user_list')
  async getUsers() {
    const user = await this.userService.getUserList();
    return { success: true, message: 'OK', data: user };
  }
  @ApiOperation({ summary: '更新单个用户' })
  @Get('/update_user')
  async updateUser() {
    const user = await this.userService.updateUser();
    return { success: true, message: 'OK', data: user };
  }
  @ApiOperation({ summary: '删除单个用户' })
  @Get('/delete_user')
  async deleteUser() {
    const user = await this.userService.deleteUser();
    return { success: true, message: 'OK', data: user };
  }
}
```

重启之后，可以查看`swagger ui`界面，标签增加成功。

![图片](https://mmbiz.qpic.cn/mmbiz_png/2nvPS8RzNDyCqT386XERZYHSRPKHeFakQiatRibia9Oky02Pia01KNgu7zJKTldHSKLpIzEKEJX3oUUibHDibzEMxPAg/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1)

Midway之接入Swagger

# [eslint配置和rule规则解释](https://segmentfault.com/a/1190000020005105)

ESLint 是一个ECMAScript/JavaScript 语法规则和代码风格的检查工具，它的目标是保证代码的一致性和避免错误。

借助 ESLint，可将 **静态代码分析** 和 **问题代码协助修复** 集成到 **编码**、**提交** 和 **打包** 过程中，及早发现并协助修复代码中：

- 有语法错误的部分
- 不符合约定的样式准则的部分
- 不符合约定的最佳实践的部分

在项目开发中获得如下收益：

- 在执行代码之前发现并修复语法错误，减少调试耗时和潜在 bug
- 保证项目的编码风格统一，提高可维护性
- 督促团队成员在编码时遵守约定的最佳实践，提高代码质量

## 配置

配置文件中包含的相对路径和 glob 模式都是基于当前配置文件的路径进行解析的。

#### 两种主要的配置方式

- 配置注释 - 在目标文件中使用注释语法嵌入配置信息。这种配置只对当前文件有效。
- 配置文件 - 在 `JavaScript`、`JSON` 或 `YAML` 文件中定义配置信息。对于这种配置方式，配置信息可以写在单独的 `.eslintrc.*` 文件中，或者写在 `package.json` 文件的 `eslintConfig` 字段中。这种配置对配置文件所在目录及其子目录树中的所有文件有效。

#### 配置文件格式

- `JavaScript` - use `.eslintrc.js` 文件导出一个包含配置信息的对象。
- `JSON` - 使用 `.eslintrc.json` 定义配置信息，JSON 文件中支持 JavaScript 注释。
- `package.json` - 在 `package.json` 文件中增加一个 `eslintConfig` 字段，在该字段中定义配置信息。
- `.eslintrc`

如果有多个配置 优先级如下：

1. `.eslintrc.js`
2. `.eslintrc.json`
3. `.eslintrc`
4. `package.json`

## 配置参数

#### parser

指定 ESLint 使用的语法分析器。ESLint 兼容的语法分析器有：[Esprima](https://link.segmentfault.com/?enc=dytgltpEZEZWJdrgu5iiFQ%3D%3D.gz8ddDJjS0OS7bVgVl8Zawcm92UgYnE9DdcQCqa6TbiRBC2eiA5vm3IMvPdkmnUB7mvILmg2y5X2PMYmX9pfDJ9PV7bSX2GJw9g88GqkaBI%3D)、[Babel-ESLint](https://link.segmentfault.com/?enc=WgrpyseJ1LfmBqT2z4Pe0A%3D%3D.WfFw%2F9hCXd0WFL%2BpRl9zP3Oz96%2Bgmx3c5AWSrkplU4o1AqvNhHL68jqi0cugDVjGfcivuZBmaYpB24NT8hcE1faGVp%2BPrJbmcN7hQv84zQiwChyET3OWsWbFyfr4vUT0)、[@typescript-eslint/parser](https://link.segmentfault.com/?enc=qsYANLCBLbRpB0qx%2BEzRqw%3D%3D.Cg%2FCJ3THqhHFWcFD9ltsoiVwNoMUuk4Vnn2YikcljoI9MTQ16x6W9vRTVSmppz%2Bw5iZ7PYBox2u6Sze3JTAQAaLbEozN%2FMRfHDAjiKRTc5SETCm2xZhDnCDcuY63MPXuqBOu1rn5cGMXSX03oALuRw%3D%3D)，ESLint 默认使用 [Esprima](https://link.segmentfault.com/?enc=acgTipjFbf5ZELxHOEZuPA%3D%3D.rv01CYCleHU9dEI3R2%2BV3mPZPNWCfv2DBJt%2BRFt3r9TtcyoR90%2Fe5QjDmxD%2FuWhKrse7hguYuBSr8R9zWIH5ynokqv2ljhpaxxyl7zhVs6Q%3D)。

#### parserOptions

指定语法分析器选项，默认使用的语法分析器支持如下几个选项：`ecmaVersion`、`sourceType`、`ecmaFeatures`。示例：

```json
{
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  }
}
```

不同的语法分析器可能具有不同的选项。

#### env

指定执行环境，一个执行环境会预定义一组全局变量。示例：

使用注释配置

```crmsh
/* eslint-env node, mocha */
```

使用配置文件

```json
{
  "env": {
    "browser": true,
    "node": true
  }
}
```

#### globals

使用未在当前文件中定义的全局变量时，会命中 `no-undef` 规则，通过 `globals` 配置指定的全局变量无视 `no-undef` 规则。示例：

在配置文件中指定：

```json
{
  "globals": {
    "var1": "writable",
    "var2": "readonly"
  }
}
```

#### plugins

插件是第三方定制的规则集合，`plugins` 参数用于指定第三方插件，插件名中的 `eslint-plugin-` 前缀可以省略。示例：

```css
{
    plugins: [
        'typescript',
        '@typescript-eslint',
        "prettier"
    ]
}
```

使用插件时必须安装其 npm 包。

#### extends

配置文件可以在已有配置的基础上进行扩展，`extends` 用于指定基础配置。该参数的值为以下之一：

- 一个指定基础配置来源的字符串
- 一个指定基础配置来源的字符串的数组：数组中每个配置扩展它前面的配置

ESLint 支持递归扩展配置，所以基础配置中也可包含 `extends` 参数。

当指定基础配置时，`rules` 参数指定的规则可按如下几种方式进行扩展：

- 启用基础配置中没有规则
- 继承基础配置中的规则，改变其错误级别，但不改变其附加选项：
  - 基础配置: `"eqeqeq": ["error", "allow-null"]`
  - 扩展配置: `"eqeqeq": "warn"`
  - 最终有效配置：`"eqeqeq": ["warn", "allow-null"]`
- 覆盖基础配置中的规则:
  - 基础配置：`"quotes": ["error", "single", "avoid-escape"]`
  - 扩展配置：`"quotes": ["error", "single"]`
  - 最终有效配置: `"quotes": ["error", "single"]`

使用 `extends` 指定的基础配置来源可以是：

- `eslint:recommended`，启用 [ESLint 内置规则集](https://link.segmentfault.com/?enc=3DImVsRwCxe%2BJkMITRe7ew%3D%3D.nNZvq9AddLBMNclBiiAcu%2FkUDjPZEZCK02Mjr3fGMAysDf7TOzF0lNwDmOvd2IjEa8t4Und16TsGE0VL880MmTNbNYyGYTPskw4qpqlxUMc%3D) 的一个子集。

- 共享配置包，一类导出 ESLint 配置对象的 npm 包，比如 [`eslint-config-standard`](https://link.segmentfault.com/?enc=jN5yxqCnVBsKxwzyUaGpFA%3D%3D.tELibOoiaU1ZxsyT%2FLGgE7IXCcyRq6Hc2%2BPT%2FA8wfODNT6qZvgIeChRhdm69ivW%2FQtoCP13pvzz9OXXgNtjMwRTW8IqPCukfmsc3o1Q2%2Bbmgug%2FRrDJvJ%2B4E3jZFwKLP)、[`eslint-config-airbnb`](https://link.segmentfault.com/?enc=3CD%2BMM2%2BMUbim4%2B9DpQiaA%3D%3D.Qd6gp0TJXtIoXMM%2FkQ1eNZnKD7iElQwv%2Bb3nVadNhOnWCTgf6GOEvsCkpc5dAiJ5YHaKXw4Sv7sOw0pBij%2FotYm%2FKBrKIuOt9ElDbhkdZdbRMGFrpXqcJkOZslFgbY97) 等。共享配置包需要安装才能使用，配置时可省略报名中的 `eslint-config-` 前缀。

  示例：

  ```prolog
  {
    "extends": ["airbnb"]
    "rules": {
      "no-set-state": "off"
    }
  }
  复制代码
  ```

- 插件导出的命名配置，其配置值由以下几部分组成：

  - `plugin:`
  - 插件包名（可省略前缀，例如：`react`）
  - `/`
  - 配置名（例如：`recommended`）

示例：

```prolog
{
  "plugins": [
    "react"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "rules": {
    "no-set-state": "off"
  }
}
复制代码
```

- 配置文件，通过配置文件的绝对路径或相对路径指定。

  示例：

  ```prolog
  {
    "extends": [
      "./node_modules/coding-standard/eslintDefaults.js",
      "./node_modules/coding-standard/.eslintrc-es6",
      "./node_modules/coding-standard/.eslintrc-jsx",
      "./my-eslint-config.js"
    ],
    "rules": {
      "eqeqeq": "warn"
    }
  }
  复制代码
  ```

- `eslint:all`，启动所有 ESLint 内置规则，不推荐。

## 规则

ESLint 附带有大量的规则。你可以使用注释或配置文件修改你项目中要使用哪些规则。改变一个规则设置，你必须设置规则 ID 等于这些值之一：

- "off"或0 -关闭规则
- "warn" 或1 - 开启规则, 使用警告 程序不会退出
- "error"或2 - 开启规则, 使用错误 程序退出

## rule解释

```awk
"no-alert": 0,//禁止使用alert confirm prompt
"no-array-constructor": 2,//禁止使用数组构造器
"no-bitwise": 0,//禁止使用按位运算符
"no-caller": 1,//禁止使用arguments.caller或arguments.callee
"no-catch-shadow": 2,//禁止catch子句参数与外部作用域变量同名
"no-class-assign": 2,//禁止给类赋值
"no-cond-assign": 2,//禁止在条件表达式中使用赋值语句
"no-console": 2,//禁止使用console
"no-const-assign": 2,//禁止修改const声明的变量
"no-constant-condition": 2,//禁止在条件中使用常量表达式 if(true) if(1)
"no-continue": 0,//禁止使用continue
"no-control-regex": 2,//禁止在正则表达式中使用控制字符
"no-debugger": 2,//禁止使用debugger
"no-delete-var": 2,//不能对var声明的变量使用delete操作符
"no-div-regex": 1,//不能使用看起来像除法的正则表达式/=foo/
"no-dupe-keys": 2,//在创建对象字面量时不允许键重复 {a:1,a:1}
"no-dupe-args": 2,//函数参数不能重复
"no-duplicate-case": 2,//switch中的case标签不能重复
"no-else-return": 2,//如果if语句里面有return,后面不能跟else语句
"no-empty": 2,//块语句中的内容不能为空
"no-empty-character-class": 2,//正则表达式中的[]内容不能为空
"no-empty-label": 2,//禁止使用空label
"no-eq-null": 2,//禁止对null使用==或!=运算符
"no-eval": 1,//禁止使用eval
"no-ex-assign": 2,//禁止给catch语句中的异常参数赋值
"no-extend-native": 2,//禁止扩展native对象
"no-extra-bind": 2,//禁止不必要的函数绑定
"no-extra-boolean-cast": 2,//禁止不必要的bool转换
"no-extra-parens": 2,//禁止非必要的括号
"no-extra-semi": 2,//禁止多余的冒号
"no-fallthrough": 1,//禁止switch穿透
"no-floating-decimal": 2,//禁止省略浮点数中的0 .5 3.
"no-func-assign": 2,//禁止重复的函数声明
"no-implicit-coercion": 1,//禁止隐式转换
"no-implied-eval": 2,//禁止使用隐式eval
"no-inline-comments": 0,//禁止行内备注
"no-inner-declarations": [2, "functions"],//禁止在块语句中使用声明（变量或函数）
"no-invalid-regexp": 2,//禁止无效的正则表达式
"no-invalid-this": 2,//禁止无效的this，只能用在构造器，类，对象字面量
"no-irregular-whitespace": 2,//不能有不规则的空格
"no-iterator": 2,//禁止使用__iterator__ 属性
"no-label-var": 2,//label名不能与var声明的变量名相同
"no-labels": 2,//禁止标签声明
"no-lone-blocks": 2,//禁止不必要的嵌套块
"no-lonely-if": 2,//禁止else语句内只有if语句
"no-loop-func": 1,//禁止在循环中使用函数（如果没有引用外部变量不形成闭包就可以）
"no-mixed-requires": [0, false],//声明时不能混用声明类型
"no-mixed-spaces-and-tabs": [2, false],//禁止混用tab和空格
"linebreak-style": [0, "windows"],//换行风格
"no-multi-spaces": 0,//不能用多余的空格
"no-multi-str": 2,//字符串不能用\换行
"no-multiple-empty-lines": [1, {"max": 3}],//空行最多不能超过2行
"no-native-reassign": 2,//不能重写native对象
"no-negated-in-lhs": 2,//in 操作符的左边不能有!
"no-nested-ternary": 0,//禁止使用嵌套的三目运算
"no-new": 1,//禁止在使用new构造一个实例后不赋值
"no-new-func": 1,//禁止使用new Function
"no-new-object": 2,//禁止使用new Object()
"no-new-require": 2,//禁止使用new require
"no-new-wrappers": 2,//禁止使用new创建包装实例，new String new Boolean new Number
"no-obj-calls": 2,//不能调用内置的全局对象，比如Math() JSON()
"no-octal": 2,//禁止使用八进制数字
"no-octal-escape": 2,//禁止使用八进制转义序列
"no-param-reassign": 2,//禁止给参数重新赋值
"no-path-concat": 0,//node中不能使用__dirname或__filename做路径拼接
"no-plusplus": 0,//禁止使用++，--
"no-process-env": 0,//禁止使用process.env
"no-process-exit": 0,//禁止使用process.exit()
"no-proto": 2,//禁止使用__proto__属性
"no-redeclare": 2,//禁止重复声明变量
"no-regex-spaces": 2,//禁止在正则表达式字面量中使用多个空格 /foo bar/
"no-restricted-modules": 0,//如果禁用了指定模块，使用就会报错
"no-return-assign": 1,//return 语句中不能有赋值表达式
"no-script-url": 0,//禁止使用javascript:void(0)
"no-self-compare": 2,//不能比较自身
"no-sequences": 0,//禁止使用逗号运算符
"no-shadow": 2,//外部作用域中的变量不能与它所包含的作用域中的变量或参数同名
"no-shadow-restricted-names": 2,//严格模式中规定的限制标识符不能作为声明时的变量名使用
"no-spaced-func": 2,//函数调用时 函数名与()之间不能有空格
"no-sparse-arrays": 2,//禁止稀疏数组， [1,,2]
"no-sync": 0,//nodejs 禁止同步方法
"no-ternary": 0,//禁止使用三目运算符
"no-trailing-spaces": 1,//一行结束后面不要有空格
"no-this-before-super": 0,//在调用super()之前不能使用this或super
"no-throw-literal": 2,//禁止抛出字面量错误 throw "error";
"no-undef": 2,//不能有未定义的变量
"no-undef-init": 2,//变量初始化时不能直接给它赋值为undefined
"no-undefined": 2,//不能使用undefined
"no-unexpected-multiline": 2,//避免多行表达式
"no-underscore-dangle": 1,//标识符不能以_开头或结尾
"no-unneeded-ternary": 2,//禁止不必要的嵌套 var isYes = answer === 1 ? true : false;
"no-unreachable": 2,//不能有无法执行的代码
"no-unused-expressions": 2,//禁止无用的表达式
"no-unused-vars": [2, {"vars": "all", "args": "after-used"}],//不能有声明后未被使用的变量或参数
"no-use-before-define": 2,//未定义前不能使用
"no-useless-call": 2,//禁止不必要的call和apply
"no-void": 2,//禁用void操作符
"no-var": 0,//禁用var，用let和const代替
"no-warning-comments": [1, { "terms": ["todo", "fixme", "xxx"], "location": "start" }],//不能有警告备注
"no-with": 2,//禁用with

"array-bracket-spacing": [2, "never"],//是否允许非空数组里面有多余的空格
"arrow-parens": 0,//箭头函数用小括号括起来
"arrow-spacing": 0,//=>的前/后括号
"accessor-pairs": 0,//在对象中使用getter/setter
"block-scoped-var": 0,//块语句中使用var
"brace-style": [1, "1tbs"],//大括号风格
"callback-return": 1,//避免多次调用回调什么的
"camelcase": 2,//强制驼峰法命名
"comma-dangle": [2, "never"],//对象字面量项尾不能有逗号
"comma-spacing": 0,//逗号前后的空格
"comma-style": [2, "last"],//逗号风格，换行时在行首还是行尾
"complexity": [0, 11],//循环复杂度
"computed-property-spacing": [0, "never"],//是否允许计算后的键名什么的
"consistent-return": 0,//return 后面是否允许省略
"consistent-this": [2, "that"],//this别名
"constructor-super": 0,//非派生类不能调用super，派生类必须调用super
"curly": [2, "all"],//必须使用 if(){} 中的{}
"default-case": 2,//switch语句最后必须有default
"dot-location": 0,//对象访问符的位置，换行的时候在行首还是行尾
"dot-notation": [0, { "allowKeywords": true }],//避免不必要的方括号
"eol-last": 0,//文件以单一的换行符结束
"eqeqeq": 0,//必须使用全等
"func-names": 0,//函数表达式必须有名字
"func-style": [0, "declaration"],//函数风格，规定只能使用函数声明/函数表达式
"generator-star-spacing": 0,//生成器函数*的前后空格
"guard-for-in": 0,//for in循环要用if语句过滤
"handle-callback-err": 0,//nodejs 处理错误
"id-length": 0,//变量名长度
"indent": [2, 2],//缩进风格
"init-declarations": 0,//声明时必须赋初值
"key-spacing": [0, { "beforeColon": false, "afterColon": true }],//对象字面量中冒号的前后空格
"lines-around-comment": 0,//行前/行后备注
"max-depth": [0, 4],//嵌套块深度
"max-len": [0, 80, 4],//字符串最大长度
"max-nested-callbacks": [0, 2],//回调嵌套深度
"max-params": [0, 3],//函数最多只能有3个参数
"max-statements": [0, 10],//函数内最多有几个声明
"new-cap": 2,//函数名首行大写必须使用new方式调用，首行小写必须用不带new方式调用
"new-parens": 2,//new时必须加小括号
"newline-after-var": 2,//变量声明后是否需要空一行
"object-curly-spacing": [0, "never"],//大括号内是否允许不必要的空格
"object-shorthand": 0,//强制对象字面量缩写语法
"one-var": 1,//连续声明
"operator-assignment": [0, "always"],//赋值运算符 += -=什么的
"operator-linebreak": [2, "after"],//换行时运算符在行尾还是行首
"padded-blocks": 0,//块语句内行首行尾是否要空行
"prefer-const": 0,//首选const
"prefer-spread": 0,//首选展开运算
"prefer-reflect": 0,//首选Reflect的方法
"quotes": [1, "single"],//引号类型 `` "" ''
"quote-props":[2, "always"],//对象字面量中的属性名是否强制双引号
"radix": 2,//parseInt必须指定第二个参数
"id-match": 0,//命名检测
"require-yield": 0,//生成器函数必须有yield
"semi": [2, "always"],//语句强制分号结尾
"semi-spacing": [0, {"before": false, "after": true}],//分号前后空格
"sort-vars": 0,//变量声明时排序
"space-after-keywords": [0, "always"],//关键字后面是否要空一格
"space-before-blocks": [0, "always"],//不以新行开始的块{前面要不要有空格
"space-before-function-paren": [0, "always"],//函数定义时括号前面要不要有空格
"space-in-parens": [0, "never"],//小括号里面要不要有空格
"space-infix-ops": 0,//中缀操作符周围要不要有空格
"space-return-throw-case": 2,//return throw case后面要不要加空格
"space-unary-ops": [0, { "words": true, "nonwords": false }],//一元运算符的前/后要不要加空格
"spaced-comment": 0,//注释风格要不要有空格什么的
"strict": 2,//使用严格模式
"use-isnan": 2,//禁止比较时使用NaN，只能用isNaN()
"valid-jsdoc": 0,//jsdoc规则
"valid-typeof": 2,//必须使用合法的typeof的值
"vars-on-top": 2,//var必须放在作用域顶部
"wrap-iife": [2, "inside"],//立即执行函数表达式的小括号风格
"wrap-regex": 0,//正则表达式字面量用小括号包起来
"yoda": [2, "never"]//禁止尤达条件
```

[eslint配置和rule规则解释


**文件上传在后台管理系统是一个比较常见也是一个比较有难度的操作， midway在3.0时提供了文件上传功能 但是在2.0却没有，因为只能使用egg.js的context来获取文件流，从而上传文件**

## 安装依赖
```
npm i @midwayjs/cos --save
```

## 引入组件[](http://www.midwayjs.org/docs/extensions/cos#引入组件)

首先，引入 组件，在 `configuration.ts` 中导入：

```typescript
import { Configuration } from '@midwayjs/decorator';
import * as cos from '@midwayjs/cos';
import { join } from 'path';

@Configuration({
  imports: [
    cos, // 导入 cos 组件
  ],
  importConfigs: [join(__dirname, 'config')],
})
export class ContainerLifeCycle {}
```

Copy

## 配置[](http://www.midwayjs.org/docs/extensions/cos#配置)

比如：

**单客户端配置**

```typescript
export const cos = {
  client: {
    secretId: '***********',
    secretKey: '***********',
  },
};
```

Copy

**多个客户端配置，需要配置多个**

```typescript
export const cos = {
  clients: {
    instance1: {
      secretId: '***********',
      secretKey: '***********',
    },
    instance2: {
      secretId: '***********',
      secretKey: '***********',
    },
  },
};
```

Copy

更多参数可以查看 [cos-nodejs-sdk-v5](https://github.com/tencentyun/cos-nodejs-sdk-v5) 文档。

## 使用 COS 服务[](http://www.midwayjs.org/docs/extensions/cos#使用-cos-服务)

我们可以在任意的代码中注入使用。

```typescript
import { Provide, Controller, Inject, Get } from '@midwayjs/decorator';
import { COSService } from '@midwayjs/cos';

@Provide()
export class UserService {

  @Inject()
  cosService: COSService;

  async invoke() {
    await this.cosService.sliceUploadFile({
      Bucket: 'test-1250000000',
      Region: 'ap-guangzhou',
      Key: '1.zip',
      FilePath: './1.zip'
    },
  }
}
```

Copy



可以使用 `COSServiceFactory` 获取不同的实例。

```typescript
import { COSServiceFactory } from '@midwayjs/cos';
import { join } from 'path';

@Provide()
export class UserService {
  @Inject()
  cosServiceFactory: COSServiceFactory;

  async save() {
    const redis1 = await this.cosServiceFactory.get('instance1');
    const redis2 = await this.cosServiceFactory.get('instance3');

    //...
  }
}
```

在2.0的这个时候就会遇到坑，需要引入egg的context来获取文件流
```
  async saveFile() {
    const ctx = this.ctx;
    const stream = await ctx.getFileStream();
    const file = await this.cosService.putObject({
      Bucket: 'xxx-1258770926',
      Region: 'ap-shanghai',
      Key: stream.filename,
      Body: stream,
    });
}
```
**获取文件流 使用上传小型文件的方式进行上产图片**

文件上传在后台管理系统是一个比较常见也是一个比较有难度的操作， midway在3.0时提供了文件上传功能 但是在2.0却没有，因为只能使用egg.js的context来获取文件流，从而上传文件

midwayjs+COS上传文件

Linux

## 前言

在翻译完 TypeScript 官方文档后，我用 VuePress 搭建博客，又实现了 GitHub 和 Gitee Pages 的自动部署，但我最终还是决定自己建站，而在建站的过程中，必不可少会用到 Linux 命令，所以此篇写一份基本够用的  Linux 命令，会涵盖博客搭建系列文章用到的各种命令，方便查询和学习使用。

## 0. Owner、Group、Others、Root

Linux 系统是一种多用户系统，它将文件访问者身份分为三种：

### 文件所有者（Owner）

当创建一个用户的时候，Linux 会为该用户创建一个主目录，路径为 `/home/<username>`，我们可以使用 `cd ~`，快捷进入主目录。如果你想放一个私密文件，就可以放在自己的主目录里，然后设置只能自己查看。

### 群组（Group）

每个用户都有一个用户组，方便多人操作的时候，为一群人分配权限。当创建用户的时候，会自动创建一个与它同名的用户组。

如果一个用户同时属于多个组，用户需要在用户组之间切换，才能具有其他用户组的权限。

### 其他人（Others）

既不是文件所有者又不是文件所属群组成员的用户，就是其他人。

### 超级用户（Root）

Root 用户是一类特殊的用户，该用户可以访问所有文件。

## 1. adduser 添加用户 和 passwd 更改密码

```bash
# 添加一个名为 git 的用户
adduser git
# 设置 git 用户的密码
passed git

```

但是由于创建的用户权限较低，有的时候我们需要为用户提权，此时我们可以这样做：

```bash
# 会打开 sudoers 配置文件
sudo visudo

```

注意同样是编辑 `sudoers` 配置文件，使用这个命令会比使用 `sudo vim /etc/ sudoers` 更安全， 除了对语法有校验，并且还会在多用户编辑的时候锁住文件。

打开 `sudoers` 配置文件后，我们添加这样一行配置：

```bash
# Allow git to run any commands anywhere
git ALL=(ALL:ALL) ALL 

```

简单解释下这句话 `git ALL=(ALL:ALL) ALL `：

- git 表示规则应用的用户名
- 第一个 `ALL` 表示规则应用于所有 hosts
- 第二个 `ALL` 表示规则应用于所有 users
- 第三个 `ALL` 表示规则应用于所有 groups
- 第四个 `ALL` 表示规则应用于所有 commands

我们保存退出后，`git` 用户就会获得 root 权限。

## 2. ls 列出文件和目录

1. `ls` 列出文件和目录

```bash
[root@iZ2ze learn-typescript.git]# ls
branches  config  description  HEAD  hooks  index  info  objects  refs

```

1. `ls -la` 由 `-a` 显示所有文件和目录（包括隐藏）和 `-l` 显示详细列表组成：

```bash
[root@iZ2ze learn-typescript.git]# ls -la
总用量 20
drwxrwxr-x  7 git git  132 12月 15 12:33 .
drwx------  3 git git  127 12月 15 14:51 ..
drwxrwxr-x  2 git git    6 12月 15 12:21 branches
-rw-rw-r--  1 git git   66 12月 15 12:21 config
-rw-rw-r--  1 git git   73 12月 15 12:21 description
-rw-rw-r--  1 git git   23 12月 15 12:21 HEAD
drwxrwxr-x  2 git git 4096 12月 15 13:10 hooks
-rw-rw-r--  1 git git  217 12月 15 12:33 index
drwxrwxr-x  2 git git   21 12月 15 12:21 info
drwxrwxr-x 10 git git   90 12月 15 12:33 objects
drwxrwxr-x  4 git git   31 12月 15 12:21 refs

```

每一行都有 7 列，我们以 `branches` 为例讲解每列的含义：

| drwxrwxr-x         | 2                      | git    | git    | 6                  | 12月 15 12:21 | branches |
| ------------------ | ---------------------- | ------ | ------ | ------------------ | ------------- | -------- |
| 文件类型和权限信息 | 链接数或者一级子目录数 | 所有者 | 所属组 | 文件大小，单位字节 | 最后修改时间  | 文件名   |

重点看第 1 列的内容，以 `drwxrwxr-x` 为例，这里一共 10 位，第 1 位表示文件类型，其中 `-` 表示普通文件，`d` 表示目录文件。

第 2 到第 4 位，表示所有者权限，其中 `r` 表示读权限，`w` 表示写权限，`x` 表示可执行权限， `-`表示无权限，第 2 到 5 位为 `rwx`，表示所有者可读可写可执行。

第 5 到第 7 位，表示组用户权限，这里也是 `rwx`。

第 8 到第 10 位，表示其他用户权限，这里是 `r-x`，表示有可读可执行权限，无写入权限。

这里再额外补充一点：

像 `root` 用户创建文件夹的默认权限为 `rwxr-xr-x`:

```bash
[root@iZ2ze www]# mkdir test
[root@iZ2ze www]# ls -l

drwxr-xr-x  2 root root  6 12月 17 23:53 test

```

而创建文件的默认权限是 `rw-r--r--`，注意创建文件默认会去掉 `x` 权限：

```bash
[root@iZ2ze www]# touch index.html
[root@iZ2ze www]# ls -l

-rw-r--r--  1 root root  0 12月 17 23:54 index.html

```

这就是为什么我们有的时候需要在创建文件后，又加上执行权限。

## 3. chown 更改文件属主，也可以同时更改文件属组

**chown (change owner)** 语法：

```bash
# -R：递归更改文件属组
chown [–R] 属主名 文件名
chown [-R] 属主名：属组名 文件名

```

将 `index.html` 的所有者更改为 `git`：

```bash
[root@iZ2ze www]# chown git index.html
[root@iZ2ze www]# ls -

-rw-r--r-- 1 git  root  0 12月 17 23:54 index.html

```

将 `index.html` 的所有者和群组都改为 `git`：

```bash
[root@iZ2ze www]# chown git:git index.html
[root@iZ2ze www]# ls -l

-rw-r--r-- 1 git  git   0 12月 17 23:54 index.html

```

## 4. chmod 更改文件权限

权限除了用 `r` `w` `x` 这种方式表示，也可以用数字表示，数组与字母的对应关系为：

- r:4
- w:2
- x:1

之所有如此对应关系，主要还是为了方便推导，比如我们希望一个文件可读可写，那我们可以方便的设置权限为 6（4 + 2），同样，如果我们知道一个权限为 3，我们也可以推导出权限为可写可执行，因为只有 2 + 1 才可能等于 3。

我们看下 **chmod （change mode）** 的具体语法：

```bash
# -R：递归更改文件属组
chmod [-R] xyz 文件或目录

```

其中 xyz 分别表示 Owner、Group、Others 的权限，如果我们这样设置一个文件的权限：

```typescript
chomd 750 index.html

```

我们可以得知，Owner 的权限为 7，为可读可写可执行，Group 的权限为 5，为可读可执行，Others 的权限为 0，表示不可读写不可执行。对应字母为：`rwxr-x---`。

除了这种数字的方式，还有一种使用符号类型改变权限的方式：

在这种方式里，我们将三种身份 `Owner`、`Group`、`Others`，分别简写为 `u（User）`、`g`、`o`，用 `a` 表示所有身份，再使用 `+` `-` `=` 表示加入、去除、设定一个权限，`r` `w` `x` 则继续表示读，写，执行权限，举个例子：

```bash
chomd u+x,g-x,o-x index.html

```

意思就是 `Owner` 加上执行权限，`Group` 和 `Others` 去除执行权限。

当然我们也可以直接设定权限

```bash
chmod u=rwx,g=rx,o=r index.html

```

此时文件的权限就相当于 `-rwxr-xr--`。

此外，我们还可以省略不写 `ugoa` 这类身份内容，直接写：

```typescript
chmod +x index.html

```

此时相当于使用了 `a`，会给所有身份添加执行权限。

## 5. su 切换身份

```bash
# 切换为 git 用户
su git

```

## 6. whoami 显示用户名

```bash
# whoami 
root

```

## 7. pwd 显示当前目录

```bash
[git@iZ2ze www]$ pwd
/home/www

```

## 9. cd 切换工作目录

```bash
# 进入 /home/www/
cd /home/www

# 进入自己的主目录
cd ~

# 进入当前目录的上上两层 :
cd ../..

```

## 10. mkdir 创建目录

1. `mkdir` 创建目录：

```bash
mkdir new_folder

```

1. `mkdir -p` 递归创建目录：

```bash
mkdir -p one/two/three

```

## 11. touch 创建文件

用于修改文件或者目录的时间属性，当文件不存在，系统会创建空白文件

```bash
touch new_file

```

## 12. echo 打印输出

echo 是 Shell 命令，用于打印输出：

```bash
# 显示转义字符
echo "\"test content\""

```

创建或覆盖文件内容为 "test content"：

```bash
echo "test content" > index.html

```

如果是想追加内容，就用 `>>` ：

```bash
[root@iZ2ze www]# echo "test content" > index.html
[root@iZ2ze www]# cat index.html
test content
[root@iZ2ze www]# echo "test content" >> index.html
[root@iZ2ze www]# cat index.html
test content
test content

```

## 13. cat 连接文件并打印输出

查看文件内容：

```typescript
cat ~/.ssh/id_rsa.pub

```

清空 index.html 内容：

```bash
cat /dev/null > index.html

```

把 index.html 的内容写入 second.html：

```bash
cat index.html > second.html

```

把 index.html 的内容追加写入 second.html：

```bash
cat index.html >> second.html

```

把 index.html 和 second.html 追加写入 third.html：

```bash
cat index.html second.html >> third.html

```

## 14. cp 复制文件或目录

将目录 website/ 下的所有文件复制到新目录 static 下：

```bash
# -r：若给出的源文件是一个目录文件，此时将复制该目录下所有的子目录和文件。
cp –r website/ static

```

## 15. mv 移动并重命名

文件改名：

```bash
mv index.html index2.html

```

隐藏文件：

```bash
# 文件名上加上 .
mv index.html .index.html

```

移动文件：

```bash
# 仅仅移动
mv  /home/www/index.html   /home/static/
# 移动又重命名
mv /home/www/index.html   /home/static/index2.html

```

批量移动：

```bash
mv  /home/www/website/*  /home/www/static

```

## 16. rm 删除一个文件或者目录

```bash
# 系统会询问
rm file

# -f 表示直接删除
# -r 表示目录下的所有文件删除

# 删除当前目录下的所有文件及目录
rm -r  * 

# 跑路
rm -rf /*

```

## 17. vi/vim

Linux 内建 vi 文书编辑器，Vim 是从 vi 发展出来的一个文本编辑器。

基本上 vi/vim 共分为三种模式，分别是**命令模式（Command mode）**，**输入模式（Insert mode**）和**底线命令模式（Last line mode）**。我们边操作边介绍这三种模式：  我们执行 `vim index.html`，如果没有该文件，则会创建文件：

```bash
vim index.html

```

此时界面为：

![img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0e043ec04af3489cb3a4c74d388d6270~tplv-k3u1fbpfcp-watermark.awebp)

此时是**命令模式**，在命令模式下，输入的任何字符都会被视为命令，接下来几个常用的命令：

- i  切换到输入模式。
- x 删除当前光标所在处的字符。
- :  切换到底线命令模式。

我们按下 `i`，便会进入**输入模式**：

![img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aa391c8917aa4761ad58f72ec8dc5349~tplv-k3u1fbpfcp-watermark.awebp)

输入模式下，左下角有 `-- INSERT --` 标志：

此时我们可以进行各种输入，当输入完毕后，按下 ESC 回到命令模式：

![img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e3c8152d94194b909bd0a6afbfc85440~tplv-k3u1fbpfcp-watermark.awebp)

此时左下角的 INSERT已经消失不见了，如果我们要保存退出，我们先输入 `:` ，进入**底线命令模式**：

![img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9c2f2d94572e46fdba30622309253049~tplv-k3u1fbpfcp-watermark.awebp)

在底线命令模式中，常见的命令有：

- w 保存文件
- q 退出程序

我们输入 `wq`，表示保存并退出，此时我们就会发现并创建了一个 HTML 文件。

## 18. ssh 远程连接工具

注意 ssh 监听是 22 端口。

其基本语法为：

```bash
ssh [OPTIONS] [-p PORT] [USER@]HOSTNAME [COMMAND]

```

监听端口示例：

```bash
ssh -p 300 git@8.8.8.8

```

打开调试模式：

```bash
# -v 冗详模式，打印关于运行情况的调试信息
ssh -v git@8.8.8.8

```

## 系列文章

系列文章目录地址：[github.com/mqyqingfeng…](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fmqyqingfeng%2FBlog)

微信：「mqyqingfeng」，加我进冴羽唯一的读者群。

如果有错误或者不严谨的地方，请务必给予指正，十分感谢。如果喜欢或者 有所启发，欢迎 star，对作者也是一种鼓励。


作者：冴羽
链接：https://juejin.cn/post/7044099175838908424
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

一份基本够用的  Linux 命令，会涵盖博客搭建系列文章用到的各种命令，方便查询和学习使用

[转载] 一份前端够用的 Linux 命令


# 使用 GitHub Actions 实现博客自动化部署
如果大家以前是用过静态博客，比如 Hugo、Hexo，可能配置过自动部署，也就是提交代码到源文件分支，自动生成静态文件提交到静态分支。静态博客的部署都是基于文件，目标只是一个 Git 仓库，一切都比较自然。那么如果是喜欢折腾，使用了动态博客呢？这里就涉及到服务器远程登录了。下面介绍一下我使用的方法。

我看过很多同学部署网站，都是手动 FTP 推包，手动 ssh 连上服务器操作重启。这种方式一是操作烦琐，二是不推崇总是在生产环境人工操作，因为人工操作越多，越容易出错。推文件——重启这种重复性动作，应该交给机器人去做，把自己从运维中解放出来，只有在十分紧急的情况，才登录到服务器上。

## 使用 GitHub Actions 自动化
实现代码提交的自动化工作流，要依靠持续集成（或者加上持续交付）服务。现在主流的公用免费的持续集成服务有：

- Travis CI
-   Jenkins
-  Circle CI
- Azure Pipeline
- GitHub Actions
  其中 GitHub Actions 是 GitHub 自家的持续集成及自动化工作流服务，简单易用，也是本文推荐使用的服务。它使用起来非常简单，只要在你的仓库根目录建立.github/workflows文件夹，将你的工作流配置(YAML 文件)放到这个目录下，就能启用 GitHub Actions 服务。

## 建立 SSH 密钥对

要把文件部署到远程服务器，首先要解决登录校验的问题。要么用密码登录、要么用 SSH 密钥登录。这里推荐用第二种方式，因为密码可能要定期更换，而用 SSH 密钥可以一劳永逸。

假设当前用户是 root，是其他用户也行。生成 SSH 密钥对：

```javascript
ssh-keygen -t rsa -f mysite
Generating public/private rsa key pair.
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
```



这里一路回车就行，执行完成后，会在~/.ssh下生成两个文件：mysite（私钥）和mysite.pub（公钥）。其中私钥是你的个人登录凭证，不可以分享给他人，如果别人得到了你的私钥，就能登录到你的服务器。公钥则需要放到登录的目标服务器上。

将公钥mysite.pub的内容贴到目标服务器的~/.ssh/authorized_keys中，如果上一步你直接是在服务器中执行，则只要：

```javascript
 cat mysite.pub >> authorized_keys
```

否则，手动复制公钥的内容，粘贴到~/.ssh/authorized_keys后面即可，若文件或目录不存在，可以自己创建。这一步的目的，是告诉目标服务器：「我以后用这个私钥登录，你需要允许哈」。

确保服务器~/.ssh文件夹的权限低于 711，我这里直接用 600（仅本用户可读写）：

```javascript
 chmod 600 -R ~/.ssh
```

最后，查看私钥文件mysite，将内容复制下来以备后续使用，私钥的文件内容大致如下：

```javascript
-----BEGIN RSA PRIVATE KEY-----
...
-----END RSA PRIVATE KEY-----
```

## 将自动化配置写到 GitHub 仓库
打开你的网站代码仓库，点击 Settings 标签，找到 Secrets 设定：

![](http://img.gujiwuqing.top/iShot2022-01-15%2010.16.05.png)
选择 Add a new secret，添加一个配置项DEPLOY_KEY，将刚才复制的私钥的内容粘贴在其中。然后，你可以像我上图中一样，把你的服务器 host 和用户名也添加到配置中。这里用户名应该与你上一步操作使用的登录用户一致。

添加在这里的配置，将只对你可见，不用担心会泄露给他人。

## 编写工作流文件
好，准备工作都做好了，现在我们来写自动化工作流的配置。

在仓库根目录中创建.github/workflows文件夹，再创建一个 YAML 文件，文件名自定，我这里起名叫deploy.yml，所以文件的完整路径应该为.github/workflows/deploy.yml，我将配置的意义写在注释中，文件内容如下：

name: Deploy site files

on:
  push:
    branches:
      - master # 只在master上push触发部署
        paths-ignore: # 下列文件的变更不触发部署，可以自行添加
            - README.md
                  - LICENSE

jobs:
  deploy:
    runs-on: ubuntu-latest # 使用ubuntu系统镜像运行自动化脚本

    # This is a basic workflow to help you get started with Actions
    
    name: CI
    
    # Controls when the action will run.
    on:
      # Triggers the workflow on push or pull request events but only for the main branch
      push:
        branches: [ main ]
      pull_request:
        branches: [ main ]
    
      # Allows you to run this workflow manually from the Actions tab
      workflow_dispatch:
    
    jobs:
      build-and-deploy:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v2 # 第一步，下载代码仓库
          - name: Install and Build
            env:
              TOKEN: ${{secrets.ACCESS_TOKEN}}
              REF: github.com/${{github.repository}}
              MYEMAIL: 15279279713@163.com
              MYNAME: ${{github.repository_owner}}
            run: |
              npm install
              npm run build
          - name: server
            uses: AEnterprise/rsync-deploy@v1.0 # 使用别人包装好的步骤镜像
            env:
              DEPLOY_KEY: ${{ secrets.DEPLOY_KEY }} # 引用配置，SSH私钥
              ARGS: -avz --delete --exclude='*.pyc' # rsync参数，排除.pyc文件
              SERVER_PORT: "22" # SSH端口
              FOLDER: ./dist # 要推送的文件夹，路径相对于代码仓库的根目录
              SERVER_IP: ${{ secrets.SSH_HOST }} # 引用配置，服务器的host名（IP或者域名domain.com）
              USERNAME: ${{ secrets.SSH_USERNAME }} # 引用配置，服务器登录名
              SERVER_DESTINATION: /www/wwwroot/test/ # 部署到目标文件夹

可以发现 GitHub Actions 的最大特点就是有很多第三方提供的镜像，已经把一些常用的步骤封装好了，你只需要填下配置即可。而这些镜像也很容易提供，发布在自己的 GitHub 仓库即可，所以扩展性很强。

把文件写好，提交到仓库，就可以发现 GitHub Actions 已经启动了！可以在提交历史后面的状态，或者 Actions 标签中看到运行的状态。

![](http://img.gujiwuqing.top/iShot2022-01-15%2010.19.32.png)
## 总结
有 GitHub Actions 这个利器，除了自动部署，还可以做自动备份，自动 XXX……只要你想，你甚至能提交代码自动触发房间开灯。这些奇技淫巧，就留给读者自己去探索了。当然，这些都必须围绕一个 GitHub 代码仓库来做。推荐大家把自己用到的代码都放到 Git 上管理，一是可以备份方便重建，二是可以利用这些周边的生态，来让你的生活更简单。不要再用百度网盘存代码、用 FTP 客户端传文件了。

如果大家以前是用过静态博客，比如 Hugo、Hexo，可能配置过自动部署，也就是提交代码到源文件分支，自动生成静态文件提交到静态分支。静态博客的部署都是基于文件，目标只是一个 Git 仓库，

使用 GitHub Actions 实现博客自动化部署

随手小记

  比较喜欢深夜敲代码，比较喜欢安静的敲代码，比较喜欢听歌敲代码，同时也喜欢和分享，哈哈哈哈 有一点想被人夸奖的那种

有时候晚上一个人在家 听着歌 然后就容易写代码写到半夜，感觉挺有意思的，支持我一直这样子做的原因，大概就是一种成就感吧！很多时候看见别人夸奖，看见自己做出来的东西 还是蛮开心的 很快乐！

爱好

## 部署到github pages

### 获取 ACCESS_TOKEN

   打开 https://github.com/settings/tokens ，点击右上方 Generate new token，应该要输入你的密码。之后把 Note 起一个名字，比如 github-actions-deploy，然后把 repo 的候选框选中。最后点下面的绿色按钮，跳转页面后获得一个 key，这个 key 只会出现一次，先复制下来，一会要用。

   打开你项目的 Settings，点击侧栏 Secrets，点击右上角 New secrets，输入名称 ACCESS_TOKEN，这个名字可以自定义，但是之后的配置里要用到这个名字。然后把刚才复制的 key 粘贴到 value 里，保存。

```javascript
name: GitHub Actions Build and Deploy
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v2.3.1
        with:
          persist-credentials: false

      - name: Install and Build 🔧
        run: |
          yarn
          yarn build
      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@3.7.1
        with:
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
          BRANCH: gh-pages
          FOLDER: dist
          CLEAN: true
```

## 部署到react项目到服务器

```javascript
# deploy.yml
name: deploy to aliyun
on:
  push:
    branches:
      - master
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      # 切换分支
      - name: Checkout
        uses: actions/checkout@master
      # 使用 node
      - name: Build
        uses: actions/setup-node@v1
      # npm install
      - name: npm install and build
        run: |
          npm install
          npm run build
        env:
          CI: true
      # Deploy
      - name: Deploy
        uses: easingthemes/ssh-deploy@v2.0.7
        env:
          SSH_PRIVATE_KEY: ${{ secrets.ACCESS_TOKEN }}  //密钥 id_rsa的内容 cat id_rsa获取
          ARGS: "-avz --delete" 
          SOURCE: "dist/"
          REMOTE_HOST: ${{ secrets.REMOTE_HOST }} //ip或者域名
          REMOTE_USER: ${{ secrets.REMOTE_USER }}// root
          TARGET: /home/www/next-demo  //部署的服务器文件夹地址
```

## 部署node项目到服务器

选择一 ：每次都拉取所有的代码过来。

```javascript
# This is a basic workflow to help you get started with Actions

name: CI

# Controls when the action will run.
on:
  # Triggers the workflow on push or pull request events but only for the main branch
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2 # 第一步，下载代码仓库
      - name: Install and Build
        env:
          TOKEN: ${{secrets.ACCESS_TOKEN}}
          REF: github.com/${{github.repository}}
          MYEMAIL: 15279279713@163.com
          MYNAME: ${{github.repository_owner}}
        run: echo 'test'
      - name: server
        uses: AEnterprise/rsync-deploy@v1.0 # 使用别人包装好的步骤镜像
        env:
          DEPLOY_KEY: ${{ secrets.DEPLOY_KEY }} # 引用配置，SSH私钥
          ARGS: -avz --delete --exclude='*.pyc' # rsync参数，排除.pyc文件
          SERVER_PORT: "22" # SSH端口
          FOLDER: ./ # 要推送的文件夹，路径相对于代码仓库的根目录
          SERVER_IP: ${{ secrets.SSH_HOST }} # 引用配置，服务器的host名（IP或者域名domain.com）
          USERNAME: ${{ secrets.SSH_USERNAME }} # 引用配置，服务器登录名
          SERVER_DESTINATION: /www/wwwroot/next-demo/ # 部署到目标文件夹
            # 对应第6步，重启安装依赖、后端服务2
      - name: Server Reload
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.SSH_HOST }}
          username: ${{ secrets.SSH_USERNAME }}
          key: ${{ secrets.DEPLOY_KEY }}
          script: |
                 cd /www/wwwroot/next-demo/
                 npm i
                 npm run build
```

选择二 下载部分的代码



```javascript
# This is a basic workflow to help you get started with Actions

name: CI

# Controls when the action will run.
on:
  # Triggers the workflow on push or pull request events but only for the main branch
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Server Build
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.SSH_HOST }}
          username: ${{ secrets.SSH_USERNAME }}
          key: ${{ secrets.DEPLOY_KEY }}
          script: |
                 cd /www/wwwroot/
                 git clone git@github.com:gujiwuqing/next-demo.git
                 cd next-demo
                 npm i
                 npm run build
```

这个时候需要第一次克隆全部的代码 ，然后去用pm2手动部署项目 然后再修改， 然后再pull代码并且自动打包重启项目就行

```javascript
# This is a basic workflow to help you get started with Actions

name: CI

# Controls when the action will run.
on:
  # Triggers the workflow on push or pull request events but only for the main branch
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Server Build
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.SSH_HOST }}
          username: ${{ secrets.SSH_USERNAME }}
          key: ${{ secrets.DEPLOY_KEY }}
          script: |
                 cd /www/wwwroot/next-demo
                 git pull origin main
                 npm i
                 npm run build
                 npm  restart  项目名或者pm2 restart id
```

一次痛苦并快乐的自动化部署研究

自动化部署

node中删除一个文件夹下面所有包含某个字符的文件

我们这里采用的技术栈是Node.js。代码不到50行，先贴上代码。



```javascript
const Koa = require('koa');
const schedule = require('node-schedule');
const _request = require('request');
const app = new Koa();

// 自定义
const sessionid = ''; // SessionID
const url = ''; // Url

const options = {
    url: url,
    method:'post',
    headers: {
        'cookie': 'sessionid='+ sessionid,
    },
}
// 适配Koa
function request(url, options) {
    return new Promise(function (resolve, reject) {
        _request(url, options, function (error, response, body) {
            error && reject(error);
            resolve(response, body);
        })
    })
}
// 输出信息
async function start (ctx, next) {
    const res = await request(options);
    console.log(res.body)
}
const rule = '30 10 0 * * *'; // 每天的凌晨0点10分30秒触发'
// 定时任务
const scheduleCronstyle = ()=>{
    schedule.scheduleJob(rule,()=>{
        start();
    });
}
app.listen(3000,()=>{
    console.log('服务启动成功！');
    scheduleCronstyle(); // 定时启动
    // start(); // 立即启动
})
复制代码
```



这些代码就可以实现一个掘金自动签到功能，再也不用自己手动点击签到了！



## 自定义



下面，我教大家怎么来进行操作，首先看下源码中的这段代码。



```javascript
// 自定义
const sessionid = ''; // SessionID
const url = ''; // Url
```



你需要改动这两行代码，严格来说，你仅仅需要改动一行。为什么呢？下面听我道来。



首先，我们来看下`url`这个变量是从哪里获取。



1. 在网页登录你的掘金账号；
2. 打开签到页面（如果没签到，就点击签到）；

1. 打开控制台，切换到**网络**选项卡，找到`/check_in_rules`这个接口，然后把后面的字符串（以`aid=`开头）复制保存。
2. 然后把刚才保存的字符串拼接到`https://api.juejin.cn/growth_api/v1/check_in?`后面。



例：`https://api.juejin.cn/growth_api/v1/check_in?aid=?&uuid=?&_signature=?`



以后，你就不用每次都进行上面这些操作了，只需一次。



然后，我们接着看下`sessionid`这个变量是从何而来的。



1. 同样，我们打开控制台；
2. 切换到**应用**选项卡下，找到**Cookie**选项，点击`https://juejin.cn`；

1. 找到`sessionid`名称，复制对应值即可。



因为Cookie有时间期限，但是一般都几个月左右，够用的了。过期了，重新替换下即可。



## 结语



有云服务器的小伙伴，你可以使用pm2持久运行Node应用。

掘金自动签到感觉还是蛮有用的，毕竟想薅羊毛，哈哈哈！

掘金自动签到

# jotai使用

## 快速使用

### 定义变量

```javascript
import { atom } from 'jotai'

const countAtom = atom(0)
const countryAtom = atom('Japan')
const citiesAtom = atom(['Tokyo', 'Kyoto', 'Osaka'])
const mangaAtom = atom({ 'Dragon Ball': 1984, 'One Piece': 1997, Naruto: 1999 })
```

### 在页面中使用

```javascript
import { useAtom } from 'jotai'

function Counter() {
  const [count, setCount] = useAtom(countAtom)
  return (
    <h1>
      {count}
      <button onClick={() => setCount(c => c + 1)}>one up</button>
```

## 本地存储

主要是为了存储token，主题色等。



### 使用

#### index.ts

先定义一个atom

```javascript
export const themeColorAtom = atomWithStorage('themeColor', localStorage.getItem('themeColor')||'#1890ff')
```

#### index.tsx

```javascript
import {themeColorAtom} from '@/store'
import { useAtom } from 'jotai'

 const [color, setColor] =useAtom(themeColorAtom)
```

使用setColor修改变量的同时则会起到同时修改本地localstorge里面的变量的值。



#### 官方例子

```javascript
import { useAtom } from 'jotai'
import { atomWithStorage } from 'jotai/utils'

const darkModeAtom = atomWithStorage('darkMode', false)

const Page = () => {
  const [darkMode, setDarkMode] = useAtom(darkModeAtom)

  return (
    <>
      <h1>Welcome to {darkMode ? 'dark' : 'light'} mode!</h1>
      <button onClick={() => setDarkMode(!darkMode)}>toggle theme</button>
    </>
  )
}
```



### 删除/重置

```javascript
import { useAtom } from 'jotai'
import { atomWithStorage, RESET } from 'jotai/utils'

const textAtom = atomWithStorage('text', 'hello')

const TextBox = () => {
  const [text, setText] = useAtom(textAtom)

  return (
    <>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <button onClick={() => setText(RESET)}>Reset (to 'hello')</button>
    </>
  )
}
```

react中状态管理越来越多，简单，好用的hooks状态管理jotai则出现来拯救迷茫的人民了。

 jotai使用

# UMI 配置优化 - 提高打包速度、提高开发速度、减少打包体积

项目越来越大，打包后的体积很大，打包时间也很长；开发时每次运行也需要很久，随便改动一个地方都要等2分钟以上才能看到效果（热更新太慢）。针对这些问题，是时候展示我真正的水平了。

## 优化打包体积

优化前的模块分析图如下

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2578dc4df57340a89f6c6886e8e0cd6b~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp?)

可以看到总的打包体积为 `23.82MB`, `gizped` 后也有 `7.03MB`。 再看每个chunk，可以发现有很多公共的模块出现在多个chunk里面，比如`ant`相关的,`lodash`相关的等，那我们把那些公共的依赖单独打包到一起即可。

```ts
// config/plugin.ts
const webpackPlugin = (config: any) => {
  config.merge({
    optimization: {
      minimize: true,
      splitChunks: {
        chunks: 'async',
        minSize: 30000,
        minChunks: 1,
        automaticNameDelimiter: '.',
        cacheGroups: {
          lfpantdesigns: {
            name: 'antdesigns',
            chunks: 'all',
            test: /[\\/]node_modules[\\/](@antv|antd|@ant-design)/,
            priority: 10,
          },
          lfpvendors: {
            name: 'vendors',
            chunks: 'all',
            test: /[\\/]node_modules[\\/](lodash|moment|react|dva|postcss|mapbox-gl)/,
            priority: 10,
          },
          // // 最基础的
          // 'async-commons': {
          //   // 其余异步加载包
          //   name: 'async-commons',
          //   chunks: 'async',
          //   minChunks: 2,
          //   priority: 2,
          // },
          lfpcommons: {
            name: 'commons',
            // 其余同步加载包
            chunks: 'all',
            minChunks: 2,
            priority: 1,
            // 这里需要注意下，webpack5会有问题， 需加上这个 enforce: true，
            // refer: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/257#issuecomment-432594711
            enforce: true,
          },
        },
      },
    },
  });
};
复制代码
// config/config.ts
import { defineConfig } from 'umi';
import webpackPlugin from './plugin';

// 这里因为 local 开发环境不需要这些，所以做了区分
export default defineConfig({
  chunks:
    REACT_APP_ENV === 'local'
      ? undefined
      : ['antdesigns', 'vendors', 'commons', 'umi'],
  chainWebpack: REACT_APP_ENV === 'local' ? undefined : webpackPlugin,
}
复制代码
```

经过优化后的重新打包分析，得到如下图：

![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d142a0a1d3ac4dc582cffef7ffb72a5c~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp?)

可以看到总的打包体积为 `3.32.82MB`, `gizped` 后只有 `1.01MB`。分别优化了 `86%` 和 `85.6%`,very good! 【对症下药很有效，哈哈！】

> ps: 还可以把常用的公共依赖如 `antd`、`react`等放到`extenals`里面，然后在`index.html`里额外引入。因为我们有其他考虑，所以没有做这一步。

## 提高打包速度

提到打包速度，当然少不了多线程打包(`happypack`)，如下：

```ts
const HappyPack = require('happypack');
const happyThreadPool = HappyPack.ThreadPool({
  size: require('os').cpus().length,
});

const webpackPlugin = (config: any) => {
  config.plugin('HappyPack').use(HappyPack, [
    {
      id: 'js',
      loaders: ['babel-loader'],
      threadPool: happyThreadPool,
    },
  ]);
  // ... 其他配置
};
```

## 提高打包速度2

`wepback5` 可以使用自带的 `cache` 配置就可以到的 `webpack4` 中的各种 `cache效果`，配置也很简单。原理就是把打包后的文件缓存起来，通常我们会选择缓存到 `filesystem`(如果是开发环境，缓存到memery)。配置如下：

```ts
const webpackPlugin = (config: any) => {
   config.cache({
    type: 'filesystem',
    allowCollectingMemory: true,
    buildDependencies: {
      config: [__filename],
    },
  });
  // ... 其他配置
};

```

## 提高热更新速度

`Umi 3.5` 开始就可以开启 `mfsu` (模块联邦速度提升)，开启后热更新速度大大提升！！它会检测哪些地方有更改，只热更新那一部分的模块。

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f3ac7f4c8b964ddd8a2a5b32dd3a913c~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp?)

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1f1f423386f443f1b89a0b8fff4f0a5e~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp?) 使用之后开发体验大幅度上升，但是发现切换分支后重新`npm run start`会报错：

经过我的排查是因为每次生成的 `.umi` 文件在作怪，如果每次 `npm run start` 之前就把这个文件删除又能正常跑起来！

但是手动删除 `.umi` 文件很麻烦，还容易忘记，自动化才是最好的。于是我利用 `package.json` 里面的`scripts` 配置了一个 `prestart`，可以在每次 `start` 之前就执行，命令如下：

```
"prestart": "rm -rf ./src/.umi",
```

![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/59232f37cb7c4c87a6cb239c8d1e5faf~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp?)

这样切换分支之后每次 `npm run start` 都没有问题了，前端同学表示真香！

> 因为每次改动代码后 `umi` 会自动重新跑代码，切换分支也是。这就导致一切换分支就会重跑，还没来得及运行 `prestart`， 但也不是每次都会失败（还是看2个分支有多大的区别，看最终 `.umi` 改动多大），如果失败那就手动删除一下 `.umi` 文件即可。

## 给出我的 `config/config.ts` 文件配置

```ts
import { defineConfig } from 'umi';
import defaultSettings from './defaultSettings';
import routes from './routes';
import env from './env';
import webpackPlugin from './plugin';

const { REACT_APP_ENV, PORT } = process.env;
const eConfig = env[REACT_APP_ENV || 'dev'];

export default defineConfig({
  hash: true,
  // devtool: 'inline-source-map', // Default: cheap-module-source-map in dev, false in build
  publicPath: eConfig.publicPath,
  runtimePublicPath: true,
  antd: {},
  dva: {
    hmr: true,
  },
  history: {
    type: 'hash',
  },
  mock: false,
  locale: false,
  dynamicImport: {
    loading: '@/components/PageLoading/index',
  },
  targets: {
    chrome: 90,
    firefox: 88,
    ie: 11,
    safari: false,
    ios_saf: false,
    opera: false,
    edge: false,
    ios: false,
  },
  define: {
    REACT_APP_ENV: REACT_APP_ENV || 'dev',
    eConfig: eConfig,
    PORT,
  },
  routes,
  theme: {
    'primary-color': defaultSettings.primaryColor,
  },
  title: false,
  ignoreMomentLocale: true,
  manifest: {
    basePath: '/',
  },
  chunks:
    REACT_APP_ENV !== 'local'
      ? undefined
      : ['antdesigns', 'vendors', 'commons', 'umi'],
  chainWebpack: REACT_APP_ENV !== 'local' ? undefined : webpackPlugin,
  webpack5: {},
  mfsu: {},
  esbuild: {},
});

```

UMI 配置优化 - 提高打包速度、提高开发速度、减少打包体积

UMI 配置优化

计算机网络

## server.js
```
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);

const { Server } = require("socket.io");
const io = new Server(server);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  console.log('a user connected');
  socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
    console.log('message: ' + msg);
  });
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});
```

## index.html
```
<!DOCTYPE html>
<html>
<head>
  <title>Socket.IO chat</title>
  <style>
    body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

    #form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
    #input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
    #input:focus { outline: none; }
    #form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }

    #messages { list-style-type: none; margin: 0; padding: 0; }
    #messages > li { padding: 0.5rem 1rem; }
    #messages > li:nth-child(odd) { background: #efefef; }
  </style>
</head>
<body>
<ul id="messages"></ul>
<form id="form" action="">
  <input id="input" autocomplete="off" /><button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();

  var messages = document.getElementById('messages');
  var form = document.getElementById('form');
  var input = document.getElementById('input');

  form.addEventListener('submit', function(e) {
    e.preventDefault();
    if (input.value) {
      socket.emit('chat message', input.value);
      input.value = '';
    }
  });

  socket.on('chat message', function(msg) {
    console.log('msg',msg);
    var item = document.createElement('li');
    item.textContent = msg;
    messages.appendChild(item);
    window.scrollTo(0, document.body.scrollHeight);
  });
</script>
</body>
</html>

```
可以实现初步的websocket通信

websocket还是比较常用的，所以我们还是需要对此有点了解

socket.io初了解

在写自己博客的时候，因为后端使用了node，所以我们需要将node服务部署在服务器上，node服务是需要一直启动的，在本地可以自己使用nodemon，但是在服务器上就需要借助其他工具了，比如pm2.js。

### 安装

最新版本的 pm2可以通过npm或者yarn安装:

```javascript
$ npm install pm2@latest -g
# or
$ yarn global add pm2

```

### 启动一个应用程序

启动、守护和监视应用程序的最简单方法是使用这个命令行:

```
$ pm2 start app.js

```

或者轻松启动任何其他应用程序:

```
$ pm2 start bashscript.sh
$ pm2 start python-app.py --watch
$ pm2 start binary-file -- --port 1520

```

可以传递给 CLI 的一些选项:

```
# 指定应用程序名称
--name <app_name>

# 监听当文件更改时和重启应用程序
--watch

# 为应用程序重新加载设置内存最大值
--max-memory-restart <200MB>

# 指定日志文件
--log <log_path>

# 向脚本传递额外的参数
-- arg1 arg2 arg3

# 自动重启之间的延迟
--restart-delay <delay in ms>

# 在日志前面加上时间
--time

# 不要自动重启应用程序
--no-autorestart

# 指定 cron 用于强制重新启动
--cron <cron_pattern>

# 附加到应用程序日志
--no-daemon

```

正如你所看到的，有许多选项可用来管理你的应用程序与 PM2。您将根据您的用例发现它们.

## 管理过程

管理应用程序状态很简单，下面是命令:

```
$ pm2 restart app_name
$ pm2 reload app_name
$ pm2 stop app_name
$ pm2 delete app_name

```

如果你不想通过app_name来修改，你可以通过:

- `all` 所有的过程
- `id` 修改某个应用程序

## 查看应用程序列表

```
 pm2 [list|ls|status]

```

![https://i.imgur.com/LmRD3FN.png](https://i.imgur.com/LmRD3FN.png)

### 查看日志

显示实时日志：

```
$ pm2 logs
```

查看n行之前的日志:

```
$ pm2 logs --lines 200
```

。

 PM2 是一个带有负载均衡功能的 Node 应用的进程管理器。我们都知道nodejs是单进程执行的，当程序出现错误死掉之后需要能够自动，这时候就需要PM2了。当然进程管理工具有很多，例如forever等等  

pm2.js的使用

## useState

### 使用

<font color='red'>useState</font>的用法很简单，返回一个数组，数组的值为当前<font color='red'>state</font>和更新state的函数；

<font color='red'>useState</font>的参数是变量、对象或者是函数，变量或者对象会作为<font color='red'>state</font>的初始值，如果是函数，函数的返回值会作为初始值。

### 批量更新

```javascript
function Count(){
    let [count,setCount] = useState(0)
    const handleAdd = function(){
        setCount(count+1)
        setCount(count+1)
    }
    return(
        <div>
            <p>{count}</p>    
            /*每次点击加1*/
            <button onClick={handleAdd}>加一</button>
        </div>
    )
}

```

在同一个事件中并不会因为调用了两次`setCount`而让`count`增加两次，试想如果在同一个事件中每次调用`setCount`都生效，那么每调用一次`setCount`组件就会重新渲染一次，这无疑使非常影响性能的；实际上如果修改的`state`是同一个，最后一个`setCount`函数中的新`state`会覆盖前面的



## useEffect&&useLayoutEffect

#### 相同点

这两个`hook`用法都一致，都是处理副作用的hook函数。第一个参数是回调函数，第二个参数是个数组。数组的内容是依赖项`deps`,依赖项改变后执行回调函数；注意组件每次渲染会默认执行一次，如果不传第二个参数，则只要该组件有state（状态）改变就会触发回调函数；如果传一个空数组，则只会在初始化时执行一次。如果在回调函数中`return`返回了一个函数，则在组件销毁时调用，同时组件每次重新渲染的时候都会先执行该函数再调用回调函数。

#### 区别

* `hook`执行时机不同

​    `useLayoutEffect`是在页面渲染前执行，是同步调用。

​    `useEffect`是在页面渲染后执行，是异步调用。

#### 使用

视情况而定，如果回调函数会修改state导致组件重新渲染，可以使用`useLayoutEffect`,因为这个时候用`useEffect`可能会造成页面闪烁；如果回调函数中去请求数据或者执行时间过长，建议使用`useEffect`；因为这个时候使用`useLayoutEffect`会造成堵塞浏览器渲染。



## memo

`React.memo`和`PureComponent`作用类似，可以用作性能优化，`React.memo` 是高阶组件，函数组件和类组件都可以使用， 和区别`PureComponent`是 `React.memo`只能对`props`的情况确定是否渲染，而`PureComponent`是针对`props`和`state`。

`React.memo` 接受两个参数，第一个参数原始组件本身，第二个参数，可以根据一次更新中`props`是否相同决定原始组件是否重新渲染。是一个返回布尔值，`true` 证明组件无须重新渲染，`false`证明组件需要重新渲染，这个和类组件中的`shouldComponentUpdate()`正好相反 。

**React.memo: 第二个参数 返回 `true` 组件不渲染 ， 返回 `false` 组件重新渲染。** **shouldComponentUpdate: 返回 `true` 组件渲染 ， 返回 `false` 组件不渲染。**

接下来我们做一个场景，控制组件在仅此一个`props`数字变量，一定范围渲染。

例子🌰：

控制 `props` 中的 `number` ：

- 1 只有 `number` 更改，组件渲染。
- 2 只有 `number` 小于 5 ，组件渲染。

```js
function TextMemo(props){
    console.log('子组件渲染')
    if(props)
    return <div>hello,world</div> 
}

const controlIsRender = (pre,next)=>{
   if(pre.number === next.number  ){ // number 不改变 ，不渲染组件
       return true 
   }else if(pre.number !== next.number && next.number > 5 ) { // number 改变 ，但值大于5 ， 不渲染组件
       return true
   }else { // 否则渲染组件
       return false
   }
}

const NewTexMemo = memo(TextMemo,controlIsRender)
class Index extends React.Component{
    constructor(props){
        super(props)
        this.state={
            number:1,
            num:1
        }
    }
    render(){
        const { num , number }  = this.state
        return <div>
            <div>
                改变num：当前值 { num }  
                <button onClick={ ()=>this.setState({ num:num + 1 }) } >num++</button>
                <button onClick={ ()=>this.setState({ num:num - 1 }) } >num--</button>  
            </div>
            <div>
                改变number： 当前值 { number } 
                <button onClick={ ()=>this.setState({ number:number + 1 }) } > number ++</button>
                <button onClick={ ()=>this.setState({ number:number - 1 }) } > number -- </button>  
            </div>
            <NewTexMemo num={ num } number={number}  />
        </div>
    }
}
```

**效果：**

![memo.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/823787ff6ac5492c9da013b1acb4dfbc~tplv-k3u1fbpfcp-watermark.awebp)

完美达到了效果，`React.memo`一定程度上，可以等价于组件外部使用`shouldComponentUpdate` ，用于拦截新老`props`，确定组件是否更新。

## useMemo

`useMemo`接收两个参数，第一个参数是一个函数，返回值用于产生保存值，第二个参数是一个数组，作为dep依赖项。当数组里面的依赖项发生变化，重新执行第一个函数，产生新的值。

### 应用场景

**1.缓存一些值，避免重新执行上下文**

```javascript
const number = useMemo(()=>{
/** 大量的逻辑运算**/
return number
},[props.number])
//只有props的number改变时，重新计算number的值
```



**2 减少不必要的`dom`循环**

```js
/* 用 useMemo包裹的list可以限定当且仅当list改变的时候才更新此list，这样就可以避免selectList重新循环 */
 {useMemo(() => (
      <div>{
          selectList.map((i, v) => (
              <span
                  className={style.listSpan}
                  key={v} >
                  {i.patentName} 
              </span>
          ))}
      </div>
), [selectList])}

复制代码
```

**3 减少子组件渲染**

```js
/* 只有当props中，list列表改变的时候，子组件才渲染 */
const  goodListChild = useMemo(()=> <GoodList list={ props.list } /> ,[ props.list ])
```

## useCallback

`useMemo` 和 `useCallback` 接收的参数都是一样，都是在其依赖项发生变化后才执行，都是返回缓存的值，区别在于 `useMemo` 返回的是函数运行的结果， `useCallback` 返回的是函数。 返回的`callback`可以作为`props`回调函数传递给子组件。

缓存函数，当页面重新渲染render时，依赖项不变时，不会去重新生成这个函数。

子组件使用React.memo包裹,父组件需要传递至子组件的函数使用useCallback缓存,来避免子组件不必要的重新render。当传给子组件函数时。子组件的memo判断会出问题，传递进去的函数都是重新创建的,引用地址前后不一致。所以当用useCallback去缓存这个函数，则memo判断则不会有问题，会正常缓存

```js
/* 用react.memo */
const DemoChildren = React.memo((props)=>{
   /* 只有初始化的时候打印了 子组件更新 */
    console.log('子组件更新')
   useEffect(()=>{
       props.getInfo('子组件')
   },[])
   return <div>子组件</div>
})
const DemoUseCallback=({ id })=>{
    const [number, setNumber] = useState(1)
    /* 此时usecallback的第一参数 (sonName)=>{ console.log(sonName) }
     经过处理赋值给 getInfo */
    const getInfo  = useCallback((sonName)=>{
          console.log(sonName)
    },[id])
    return <div>
        {/* 点击按钮触发父组件更新 ，但是子组件没有更新 */}
        <button onClick={ ()=>setNumber(number+1) } >增加</button>
        <DemoChildren getInfo={getInfo} />
    </div>
}
```



## useRef

`useRef`的作用：

- 一 是可以用来获取`dom`元素，或者`class`组件实例 。
- 二 创建`useRef`时候，会创建一个原始对象，只要函数组件不被销毁，原始对象就会一直存在，那么我们可以利用这个特性，来通过`useRef`保存一些数据。

```jsx
const DemoUseRef = ()=>{
    const dom= useRef(null)
    const handerSubmit = ()=>{
        /*  <div >表单组件</div>  dom 节点 */
        console.log(dom.current)
    }
    return <div>
        {/* ref 标记当前dom节点 */}
        <div ref={dom} >表单组件</div>
        <button onClick={()=>handerSubmit()} >提交</button> 
    </div>
}
```




在react中，hooks已经逐渐的替代了react，所以常用的hooks则必须去好好理解和使用！

hooks的理解

### Plain text or HTML

```
import fetch from 'node-fetch';

const response = await fetch('https://github.com/');
const body = await response.text();

console.log(body);
```
### Streams

The "Node.js way" is to use streams when possible. You can pipe `res.body` to another stream. This example uses [stream.pipeline](https://nodejs.org/api/stream.html#stream_stream_pipeline_streams_callback) to attach stream error handlers and wait for the download to complete.

```javascript
import {createWriteStream} from 'node:fs';
import {pipeline} from 'node:stream';
import {promisify} from 'node:util'
import fetch from 'node-fetch';

const streamPipeline = promisify(pipeline);

const response = await fetch('https://github.githubassets.com/images/modules/logos_page/Octocat.png');

if (!response.ok) throw new Error(`unexpected response ${response.statusText}`);

await streamPipeline(response.body, createWriteStream('./octocat.png'));
```



```
import fetch from 'node-fetch';
import cheerio from 'cheerio';
import {createWriteStream} from 'node:fs';
import {pipeline} from 'node:stream';
import {promisify} from 'node:util'

const response = await fetch('https://mmzztt.com/beauty/page/10');
const body = await response.text();
const $ = cheerio.load(body);
const downloadImg = async (url, index) => {
  const streamPipeline = promisify(pipeline);
  const date = new Date().getFullYear()+'-'+ (new Date().getMonth())+'-'+(new 
 Date().getDate()+1)
  const response = await fetch(url);

  if (!response.ok) throw new Error(`unexpected response ${response.statusText}`);

  await streamPipeline(response.body, createWriteStream(`./img/${date}-${index}.png`));
  console.log(`已爬取第${index}张`)
}
$('.uk-article .uk-inline .u-thumb-f img').each(function (i) {
  downloadImg($(this).attr('data-src'), i)
})

```

记入一次爬虫之旅

# midway.js+antd+七牛云上传图片

## 前言
  先介绍一下用的技术，前端用的antd，后端用的midway.js，服务器买的腾讯云，本来是用腾讯云的对象存储cos，结合midway.js也是比较容易的可以进行上传图片等操作，但是有一天上班的路上收到腾讯云的短信 ，告诉我欠费了。我才发现原来cos是收费的，于是我把目标转向了我使用了很久的七牛云。
  七牛云上传图片我认为相当于阿里的oss和腾讯的cos难度还是有那么一点点的，因为oss和cos用户量更多，相关的文章和 api我认为也更齐全一点。废话不多说 直接进入正题，开撸

第一步是先通过node层相应能够上传文件的token

  ### node层获取token
  ```javascript
   async saveFile() {
      const bucket = 'your bucket';
      const accessKey = 'your accessKey';
      const secretKey = 'your secretKey';
      const mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
  
      const options = {
        scope: bucket,   //存储空间名称
        expires: 720000, //时间
      };
      const putPolicy = new qiniu.rs.PutPolicy(options);
      const token = putPolicy.uploadToken(mac); //获取到token并返回到前端
      this.ctx.body = this.ctx.success(token, 'success');
      return token;
    }
  ```



接下来是在前端通过获取token，然后写相应的上传图片功能
  ### 前端上传图片
```
import { message, Upload } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import React, { useState } from 'react';
import { uploadImg } from '../service';
import './index.less';

const BaseUpload = (props: any) => {
  const {
    onChange,
  } = props;
  const [token, setToken] = useState('');
  const [key, setKey] = useState('');
  const [imageUrl, setImageUrl] = useState('');
  const handleChange = () => {
    const img = `${'https://img.gujiwuqing.top+/'}${key}`;
    setImageUrl(img);
    onChange && onChange(img);
  };

  const beforeUpload = async (file: any) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
    return  message.error('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
     return message.error('Image must smaller than 2MB!');
    }
    setKey(file.name);
    const { data } = await uploadImg({});
    setToken(data);
  };

  const uploadButton = (
    <div style={{ width: '128px' }}>
      <PlusOutlined />
      <div style={{ marginTop: 8 }}>Upload</div>
    </div>
  );
  // @ts-ignore
  return (
    <Upload
      name="file"
      listType="picture-card"
      className="avatar-uploader"
      showUploadList={false}
      action="https://upload-z2.qiniup.com"
      data={{
        token,
        key,
      }}
      beforeUpload={beforeUpload}
      onChange={handleChange}
    >
      {imageUrl ? (
        <img
          src={imageUrl}
          alt="avatar"
          style={{
            width: '100%',
            height: 'inherit',
          }}
        />
      ) : (
        uploadButton
      )}
    </Upload>
  );
};

export default BaseUpload;

```

我们可以在文件上传的时候通过接口获取此次上传的token，然后再调取七牛云的上传接口进行上传图片，这样子就可以实现相应的图片上传了。

midway.js +antd以及七牛云上传图片

新的一年来临了鸭！虎年行虎运，虎年大吉！
## 新年目标
- 精进技术
- 减肥
- 买车
- 找女朋友

### 精进技术
还是需要更多的熟悉js，精进react技术以及了解更多的知识。需要将更多的时间放在学习上，减少玩游戏的时间。

### 减肥
每天还是需要少吃，多运动，有空就去公司楼下的健身房玩一玩。

### 买车
了解车，学习开车知识，存钱，买车！！！

### 找女朋友
这个可能需要随缘了。只能说更多的扩展自己，多出去玩，少待在家里玩游戏！

虎年大吉

## 原因

​    之前的博客是用umi来编写的，快速开发，但是是客户端渲染，首屏加载比较慢，不利于seo等，于是我便瞄准了next.js。这是一个react的ssr框架，是一个seo比较好的框架，非常适合静态网站以及博客。



## 部署node项目

next.js是一个node项目，部署来说相对于umi等项目还是比较麻烦，之前尝试很多次部署在腾讯云，试了很多次都出现各种各样的问题，一度放弃了很多次。最终在最近，鼓起勇气再次冲击next.js项目，尝试了多次部署，终于成功。但是每次都需要自己手动部署，还是比较麻烦，在这次的周末，我便用上午的时光来学习cicd自动化部署。

## 自动化部署

为了学习自动化部署node项目，先是学习基础的自动化部署到git pages，然后再尝试使用开源的git actions部署到服务器中去，其中也是踩坑无数，然后到了部署node项目这块又是各种踩坑，因为需要在服务器上进行一些pull build等操作。弄了无数次，逐渐有了一些成果。星期天晚上兴奋到搞到一点钟，简直是快乐的睡不着觉。





## 踩坑node项目自启

到了最关键的一步，build以后需要去重新启动node项目，因为我用的是宝塔 所以最开始为了方便，我都是直接添加的node项目，然后想去通过node restart 项目，但是一直失败，后面有去改pm2命令 但是也一直有问题 显示pm2里面没这个项目，我一度感觉宝塔里面的node项目不是真的用的pm2.。虽然他显示可以用pm2启动项目，我查看日志，也是显示的pm2启动项目成功，但是我去pm2 restart项目，一直没用。真的是气死我了。最后我直接用pm2去添加项目，然后终于是可以自动重启项目了。简直不要太快乐了。

自动化部署项目的快乐太舒服了！

博客改造之旅

JavaScript

# js的类型转换



常见的类型转换有：

- 强制转换（显示转换）
- 自动转换（隐式转换）

## 显示转换

显示转换，即我们很清楚可以看到这里发生了类型的转变，常见的方法有：

- Number()

- String()

- Boolean()

- parseInt()

  

### Number()

![https://static.vue-js.com/915b7300-6692-11eb-ab90-d9ae814b240d.png](https://static.vue-js.com/915b7300-6692-11eb-ab90-d9ae814b240d.png)

```javascript
Number(undefined) //NaN
Number(null)      //0
Number(true)      //1
Number(false)     //0
Number('111')     //111
//字符串：如果不可以被解析为数值，返回 NaN
Number('111as1')  //NaN
Number('')        //0
```

 

js的类型转换是一个比较常见的面试题，同样也是js的基础