项目管理

## 全局安装
```
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

## 前言

在react中，状态管理一直是一个老生常谈的问题，因为官方并没有配套的状态库，所以react相关的状态库也是层出不穷，从最开始的redux到后面的react-redux直到最近出现的recoil和Valtio。

### React 状态管理方案

##### 方案介绍

- **[hooks context](https://link.juejin.cn?target=https%3A%2F%2Freactjs.org%2Fdocs%2Fhooks-reference.html%23usecontext)**
- **[react-redux](https://link.juejin.cn?target=https%3A%2F%2Freact-redux.js.org%2F)**
- **[mobx](https://link.juejin.cn?target=https%3A%2F%2Fmobx.js.org%2FREADME.html)**
- **[zustand](https://link.juejin.cn?target=https%3A%2F%2Fawesomedevin.github.io%2Fzustand-vue%2F)**
- **[jotai](https://link.juejin.cn?target=https%3A%2F%2Fjotai.org%2F)**
- **[recoil](https://link.juejin.cn?target=https%3A%2F%2Frecoiljs.org%2F)**
- **[valtio](https://link.juejin.cn?target=https%3A%2F%2Fvaltio.pmnd.rs%2F)**

##### 方案对比

| 框架          | 原理                                                      | 优点                                                         | 缺点                                                         |
| ------------- | --------------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| hooks context | 基于 react hook，开发者可实现内/外部存储                  | 1. 使用简单  2. 不需要引用第三方库，体积最小  3. 支持存储全局状态，但在复杂应用中不推荐  4. 不依赖 react 上下文，可在组件外调用（外部存储的条件下） | 1. context value发生变化时，所有用到这个context的组件都会被重新渲染，基于 context 维护的模块越多，影响范围越大。<br/> 2.依赖 Context Provider 包裹你的应用程序<br/>  3. 受ui框架约束(react) <br/> 4. 依赖hooks调用 |
| react-redux   | Flux思想，发布订阅模式，遵从函数式编程，外部存储          | 1. 不依赖 react 上下文，可在组件外调用  2. 支持存储全局状态  3. redux 本身是一种通用的状态解决方案 | 1. 心智模型需要一些时间来理解，特别是当你不熟悉函数式编程的时候<br/> 2. 依赖 Context Provider 包裹你的应用程序  <br/> 3.受 ui 框架约束(react) |
| mobx          | 观察者模式 + 数据截止，外部存储                           | 1. 使用简单，上手门槛低  2. 不依赖 react 上下文，可在组件外调用  3. 支持存储全局状态  4.通用的状态解决方案 | 1.可变状态模型，某些情况下可能影响调试 <br/> 2. 除了体积相对较大之外，笔者目前未感觉到较为明显的缺点，3.99M |
| zustand       | Flux思想，观察者模式，外部存储                            | 1. 轻量，使用简单，上手门槛低  2. 不依赖 react 上下文，可在组件外调用  3. 支持存储全局状态   4. 通用的状态解决方案 | 1.框架本身不支持 computed 属性，但可基于 middleware 机制通过少量代码间接实现 computed ，或基于第三方库 zustand-computed 实现 |
| jotai         | 基于 react hook，内部存储                                 | 1. 使用简单   2. 组件颗粒度较细的情况下，jotai性能更好   3.支持存储全局状态 | 1. 依赖 react 上下文， 无法组件外调用，相对而言, zustand 在 react 环境外及全局可以更好地工作 <br/> 2.受ui框架约束(react) |
| recoil        | 进阶版 jotai,基于 react hook + provider context，内部存储 | 相对于 jotai而言，会更重一些，但思想基本不变，拥有一些 jotai 未支持的特性及 api，如：  1.监听 store 变化  2. 针对 atom 的操作拥有更多的 api，编程上拥有更多的可能性，更加有趣 | 拥有 jotai 所有的缺点，且相对于 jotai 而言:  1.使用 recoil 需要 < RecoilRoot > 包裹应用程序  2. 编写 selector 会复杂一些 |
| valtio        | 基于数据劫持，外部存储                                    | 1. 使用简单，类mobx（类vue）的编程体验  2.支持存储全局状态  3.不依赖 react 上下文，可在组件外调用  4. 通用的状态解决方案 | 1.可变状态模型，某些情况下可能影响调试<br/>2.目前笔者没发现其它特别大的缺点，个人猜测之所以star相对zustand较少，是因为 valtio 的数据双向绑定思想与 react 存在冲突。 |



## valtio

本次尝试了一下valtio，发现还是蛮有趣的一个状态库，它体积非常小，代码量也特别少，用法也特别简单，容易上手。

### 安装

```javascript
npm i valtio
yarn add valtio
pnpm i valtio
```

### 使用

#### 简单使用

```typescript
import { proxy } from 'valtio'

export const counterStore = proxy({
  // state
  count: 0,
  // action
  increase: () => {
    counterStore.count++;
  },
  // action
  decrease: () => {
    counterStore.count--;
  },
});
```

#### 组件使用

```typescript
import { useSnapshot } from "valtio";
import { counterStore } from "./store";

// This will re-render on `state.count` change but not on `state.text` change
function Counter() {
  const { count, increase, decrease } = useSnapshot(counterStore);
  return (
    <div>
      <button onClick={decrease}>-1</button>
      {count}
      <button onClick={increase}>+1</button>
    </div>
  );
}

export default Counter;

```

### 数据持久化

得益于 Valtio 的自由和简洁，你完全可以使用现有的 api 做到这点，基本思路是订阅某个你需要持久化的 state，然后检测到更新到时候，即时的存一下 Storage 即可，每次获取的时候就从 Storage 中获取。（仅需要两行代码）

> Storage 可以是 localStorage 和 sessionStorage



```typescript
// counter.ts
import { proxy } from "valtio";
import { subscribeKey } from "valtio/utils";
export const counterStore = proxy({
  // state
  count: 0,
  // action
  increase: () => {
    counterStore.count++;
  },
  // action
  decrease: () => {
    counterStore.count--;
  },
});

subscribeKey(counterStore, "count", () => {
  // 更新的时候，订阅更新一下本地存储
  localStorage.setItem("count", counterStore.count.toString());
});

```



## 历史记录

历史记录？没错，Valtio 还支持状态的回退和前进，因为 Valtio 保存了状态的每一个 snapshot（状态快照），我们可以使用 `proxyWithHistory` 来创建一个可保存历史状态记录的 proxy，该方法创建的 proxy 暴露了 `undo` 和 `redo` 方法能让我们对状态进行回退和复现，相当于 ctrl z 和 ctrl y。

```ts
import { proxyWithHistory } from 'valtio/utils'

export const counerStore = proxyWithHistory({
  count: 0,
  increase: () => {
    counerStore.value.count++
  },
  decrease: () => {
    counerStore.value.count--
  }
})
复制代码
```

使用的时候主要这里需要使用 `.value` 来获取 state 和 actions。

```tsx
// CompC/index.tsx
import { useSnapshot } from 'valtio'
import { counerStore } from '~/store/modules/counter2'

export function CompC() {
  const counter = useSnapshot(counerStore)
  const { count, increase } = counter.value
  return (
    <>
     <div>{count}</div>
     <button onClick={increase}>+</button>
     <br />
     <button onClick={counter.undo}>undo</button>
     <button onClick={counter.redo}>redo</button>
    </>
  )
}
复制代码
```

## devtools debug

我们知道，pinia 支持使用 vue devtools 进行状态的追踪和 debug，那么我们的 Valtio 也支持 redux devtools。

下载好 redux devtools 插件后，在代码之加入下面这一行代码，即可轻松开启 debug：

```ts
devtools(counterStore, { name: 'state name', enabled: true })
复制代码
```

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



### 结语

更多可参考官方文档[Valtio, makes proxy-state simple for React and Vanilla (pmnd.rs)](https://valtio.pmnd.rs/)

我认为这是一个极易上手的状态库，易于刚学习react和typescript的新手。

 在react中，状态管理一直是一个老生常谈的问题，因为官方并没有配套的状态库，所以react相关的状态库也是层出不穷，从最开始的redux到后面的react-redux直到最近出现的recoil和Valtio。

方便上手的状态库-Valtio

前因：lowcode是我几年前开发过的项目其中的一个重要模块，那是刚学react不久，也是刚毕业才1年多，技术比较薄弱 那时候一直撞壁。市场上也没什么成熟的产品，于是一直心中有刺，想要完成一个类似的项目。![lowcode](http://img.gujiwuqing.top/Snipaste_2023-03-29_16-33-41.png)


lowcode是我几年前开发过的项目其中的一个重要模块，那是刚学react不久，也是刚毕业才1年多，技术比较薄弱 那时候一直撞壁。市场上也没什么成熟的产品，于是一直心中有刺，想要完成一个类似的项目

lowcode之旅

检测网页更新并通知用户刷新，支持 vite、umijs 和 webpack 插件。

> 以 git commit hash (也支持 package.json version、build timestamp、custom) 为版本号，打包时将版本号写入 json 文件。客户端轮询服务器上的版本号（浏览器窗口的 visibilitychange、focus 事件辅助），和本地作比较，如果不相同则通知用户刷新页面。

[![img](https://raw.githubusercontent.com/GreatAuk/plugin-web-update-notification/master/images/vue_example.webp)](https://raw.githubusercontent.com/GreatAuk/plugin-web-update-notification/master/images/vue_example.webp) [![img](https://raw.githubusercontent.com/GreatAuk/plugin-web-update-notification/master/images/react_example.webp)](https://raw.githubusercontent.com/GreatAuk/plugin-web-update-notification/master/images/react_example.webp) [![img](https://raw.githubusercontent.com/GreatAuk/plugin-web-update-notification/master/images/svelte_example.webp)](https://raw.githubusercontent.com/GreatAuk/plugin-web-update-notification/master/images/svelte_example.webp) [![img](https://raw.githubusercontent.com/GreatAuk/plugin-web-update-notification/master/images/react_umi_example.webp)](https://raw.githubusercontent.com/GreatAuk/plugin-web-update-notification/master/images/react_umi_example.webp)

**什么时候会检测更新(fetch version.json)** ?

1. 首次加载页面。
2. 轮询 （default: 10 * 60 * 1000 ms）。
3. script 脚本资源加载失败 (404 ?)。
4. 标签页 refocus or revisible。

## Why

部分用户（老板）没有关闭网页的习惯，在网页有新版本更新或问题修复时，用户继续使用旧的版本，影响用户体验和后端数据准确性。也有可能会出现报错（文件404）、白屏的情况。

## 安装

```
# vite
pnpm add @plugin-web-update-notification/vite -D

# umijs
pnpm add @plugin-web-update-notification/umijs -D

# webpack plugin
pnpm add @plugin-web-update-notification/webpack -D
```

## 快速上手

[vite](https://github.com/GreatAuk/plugin-web-update-notification/blob/master/README.zh-CN.md#vite) | [umi](https://github.com/GreatAuk/plugin-web-update-notification/blob/master/README.zh-CN.md#umijs) | [webpack](https://github.com/GreatAuk/plugin-web-update-notification/blob/master/README.zh-CN.md#webpack)

### Vite

**基础使用**

```
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { webUpdateNotice } from '@plugin-web-update-notification/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    webUpdateNotice({
      logVersion: true,
    }),
  ]
})
```

**自定义通知栏文本**

```
// vite.config.ts
export default defineConfig({
  plugins: [
    vue(),
    webUpdateNotice({
      notificationProps: {
        title: '标题',
        description: 'System update, please refresh the page',
        buttonText: '刷新',
        dismissButtonText: '忽略'
      },
    }),
  ]
})
```

**国际化**

```
// vite.config.ts
export default defineConfig({
  plugins: [
    vue(),
    webUpdateNotice({
      // plugin preset: zh_CN | zh_TW | en_US
      locale: "en_US",
      localeData: {
        en_US: {
          title: "📢 system update",
          description: "System update, please refresh the page",
          buttonText: "refresh",
          dismissButtonText: "dismiss",
        },
        zh_CN: {
          ...
        },
        ...
      },
    }),
  ],
});


// other file to set locale
window.pluginWebUpdateNotice_.setLocale('zh_CN')
// 取消默认的通知栏，监听更新事件自定义行为
// vite.config.ts
export default defineConfig({
  plugins: [
    vue(),
    webUpdateNotice({
      hiddenDefaultNotification: true
    }),
  ]
})

// 在其他文件中监听自定义更新事件
document.body.addEventListener('plugin_web_update_notice', ({ options, version }) => {
  console.log(options)
  // write some code, show your custom notification and etc.
  alert('System update!')
})
```

### Umijs

```
// .umirc.ts
import { defineConfig } from 'umi'
import type { Options as WebUpdateNotificationOptions } from '@plugin-web-update-notification/umijs'

export default {
  plugins: ['@plugin-web-update-notification/umijs'],
  webUpdateNotification: {
    logVersion: true,
    checkInterval: 0.5 * 60 * 1000,
    notificationProps: {
      title: 'system update',
      description: 'System update, please refresh the page',
      buttonText: 'refresh',
      dismissButtonText: 'dismiss',
    },
  } as WebUpdateNotificationOptions
}
```

### webpack

```
// vue.config.js(vue-cli project)
const { WebUpdateNotificationPlugin } = require('@plugin-web-update-notification/webpack')
const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  // ...other config
  configureWebpack: {
    plugins: [
      new WebUpdateNotificationPlugin({
        logVersion: true,
      }),
    ],
  },
})
```

## Options

```
function webUpdateNotice(options?: Options): Plugin

export interface Options {
  /**
   * support 'git_commit_hash' | 'pkg_version' | 'build_timestamp' | 'custom'
   *
   * @default 'git_commit_hash'
   * */
  versionType?: VersionType
  /**
   * custom version, if versionType is 'custom', this option is required
   */
  customVersion?: string
  /** polling interval（ms）
   * if set to 0, it will not polling
   * @default 10 * 60 * 1000
   */
  checkInterval?: number
  /** whether to output version in console */
  logVersion?: boolean
  /**
   * @deprecated
   */
  customNotificationHTML?: string
  /** notificationProps have higher priority than locale */
  notificationProps?: NotificationProps
  notificationConfig?: NotificationConfig
  /**
   * preset: zh_CN | zh_TW | en_US
   * @default 'zh_CN'
   * */
  locale?: string
  /**
   * custom locale data
   * @link default data: https://github.com/GreatAuk/plugin-web-update-notification/blob/master/packages/core/src/locale.ts
   */
  localeData?: LocaleData
  /**
   * Whether to hide the default notification, if you set it to true, you need to custom behavior by yourself
   * ```ts
    document.body.addEventListener('plugin_web_update_notice', ({ options, version }) => {
      // write some code, show your custom notification and etc.
      alert('System update!')
    })
   * ```
   * @default false
   */
  hiddenDefaultNotification?: boolean
  /**
   * Whether to hide the dismiss button
   * @default false
   */
  hiddenDismissButton?: boolean
  /**
   * After version 1.2.0, you not need to set this option, it will be automatically detected from the base of vite config、publicPath of webpack config or publicPath of umi config
   *
   * Base public path for inject file, Valid values include:
   * * Absolute URL pathname, e.g. /foo/
   * * Full URL, e.g. https://foo.com/
   * * Empty string(default) or ./
   *
   * !!! Don't forget / at the end of the path
  */
  injectFileBase?: string
}

export type VersionType = 'git_commit_hash' | 'pkg_version' | 'build_timestamp' | 'custom'

export interface NotificationConfig {
  /**
   * refresh button color
   * @default '#1677ff'
  */
  primaryColor?: string
  /**
   * dismiss button color
   * @default 'rgba(0,0,0,.25)'
  */
  secondaryColor?: string
  /** @default 'bottomRight' */
  placement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'
}

export interface NotificationProps {
  title?: string
  description?: string
  /** refresh button text */
  buttonText?: string
  /** dismiss button text */
  dismissButtonText?: string
}

export type LocaleData = Record<string, NotificationProps>
```

## 变动了哪些内容

[![inject_content](https://raw.githubusercontent.com/GreatAuk/plugin-web-update-notification/master/images/inject_content.webp)](https://raw.githubusercontent.com/GreatAuk/plugin-web-update-notification/master/images/inject_content.webp)

## Q&A

1. `TypeScript` 的智能提示, 如果你想使用 `window.pluginWebUpdateNotice_.`。

   ```
   // src/shim.d.ts
   
   /// <reference types="@plugin-web-update-notification/core" />
   ```

2. 请求 `version.json` 文件提示 `404 error`。

   上传打包内容到 cdn 服务器：

   ```
   // vite.config.ts
   
   const prod = process.env.NODE_ENV === 'production'
   
   const cdnServerUrl = 'https://foo.com/'
   
   export default defineConfig({
     base: prod ? cdnServerUrl : '/',
     plugins: [
       vue(),
       webUpdateNotice({
         injectFileBase: cdnServerUrl
       })
     ]
   })
   ```

   在非根目录下部署的项目：

   ```
   // vite.config.ts
   
   const prod = process.env.NODE_ENV === 'production'
   
   const base = '/folder/' // https://example.com/folder/
   
   export default defineConfig({
     base,
     plugins: [
       vue(),
       webUpdateNotice({
         injectFileBase: base
       })
     ]
   })
   ```

   > After version 1.2.0, you not need to set this option, it will be automatically detected from the base of vite config、publicPath of webpack config or publicPath of umi config

3. 自定义 `notification` 的刷新和忽略按钮事件。

   ```
   // refresh button click event, if you set it, it will cover the default event (location.reload())
   window.pluginWebUpdateNotice_.onClickRefresh = (version) => { alert(`click refresh btn: ${version}`) }
   
   // dismiss button click event, if you set it, it will cover the default event (dismissUpdate())
   window.pluginWebUpdateNotice_.onClickDismiss = (version) => { alert(`click dismiss btn: ${version}`) }
   ```

4. 自定义 notification 样式。

   你可以通过更高的权重覆盖默认样式。([default css file](https://github.com/GreatAuk/plugin-web-update-notification/blob/master/packages/core/public/webUpdateNoticeInjectStyle.css))

   ```
   
   
   <div class="plugin-web-update-notice-anchor">
     <div class="plugin-web-update-notice">
       <div class="plugin-web-update-notice-content" data-cy="notification-content">
         <div class="plugin-web-update-notice-content-title">
           📢  system update
         </div>
         <div class="plugin-web-update-notice-content-desc">
           System update, please refresh the page
         </div>
         <div class="plugin-web-update-notice-tools">
           <a class="plugin-web-update-notice-btn plugin-web-update-notice-dismiss-btn">dismiss</a>
           <a class="plugin-web-update-notice-btn plugin-web-update-notice-refresh-btn">
             refresh
           </a>
         </div>
       </div>
     </div>
   </div>
   ```

监听网页更新，并通知用户刷新页面的插件，支持 Vite、Webpack、umi

检测网页更新并通知用户刷新

JavaScript



在h5开发中，因为安卓ios手机系统不同，会出现各种各样的兼容性问题，ios的拍照旋转则是原因之一

## [compressor.js](https://github.com/fengyuanchen/compressorjs)

`compressorjs` 是一个开源的图片处理库，提供了图片压缩、图片旋转等能力。

使用 `compressorjs` 进行处理的示例代码如下:

```javascript
import Compressor from 'compressor.js'
const beforeRead = (file) => {
    return new Promise((resolve) => {
      // compressorjs 默认开启 checkOrientation 选项
      // 会将图片修正为正确方向
      new Compressor(file, {
       quality: 0.6, //压缩比例为60%
        success: (result) => resolve(result),
        error(err) {
          console.log(err.message);
          resolve(false)
        },
      });
    });
```



## canvas

```javascript


/**
 * 监听调用摄像头
 */
async function handleFileChange(element) {
    var file = element.files[0];
    const or = await getImageTag(file);
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = function () {
        const result = this.result;
        const img = new Image();
        img.src = result;
        img.onload = function () {
            const data = getRotateImg(img, or);
            const f = dataURLtoFile(data);

            /*
            // 模拟上传文件后的回显
            const reader1 = new FileReader();
            reader1.readAsDataURL(f);
            reader1.onloadend = function () {
                const result1 = this.result;
                document.getElementById("upload-img").src = result1;
            }
            */
           
        };
    };
}

/**
 * @desc 获取图片旋转方向
 */
const getImageTag = (file) => {
    if (!file) return 0;
    return new Promise((resolve, reject) => {
        EXIF.getData(file, function () {
            const o = EXIF.getTag(this, 'Orientation');
            resolve(o); // 6 1 3 8
        });
    });
};

/**
 * @desc 获取旋转后的图片
 * @param {Object} img 图片文件
 * @param {Number} or 旋转信息
 */
function getRotateImg(img, or) {
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    // 原始图片
    const width = img.width;
    const height = img.height;
    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(img, 0, 0, width, height);
    // 旋转后图片
    switch (or) {
        case 6: // 顺时针旋转90度
            return rotateImg(img, 'right', canvas);
            break;
        case 8: // 逆时针旋转90度
            return rotateImg(img, 'left', canvas);
            break;
        case 3: // 顺时针旋转180度
            return rotateImg(img, 'right', canvas, 2);
            break;
        default:
            break;
    }
}

/**
 * @desc 旋转canvas，会对源数据canvas进行修改
 * @param {Object} img 图片文件
 * @param {String} dir 方向 left逆时针|right顺时针
 * @param {Object} canvas 画布
 * @param {Number} s 向指定方向旋转几步，1步为90度
 */
const rotateImg = (img, dir = 'right', canvas, s = 1) => {
    const MIN_STEP = 0;
    const MAX_STEP = 3;

    const width = canvas.width || img.width;
    const height = canvas.height || img.height;
    let step = 0;

    if (dir === 'right') {
        step += s;
        step > MAX_STEP && (step = MIN_STEP);
    } else {
        step -= s;
        step < MIN_STEP && (step = MAX_STEP);
    }

    const degree = step * 90 * Math.PI / 180;
    const ctx = canvas.getContext('2d');

    switch (step) {
        case 1:
            canvas.width = height;
            canvas.height = width;
            ctx.rotate(degree);
            ctx.drawImage(img, 0, -height, width, height);
            break;
        case 2:
            canvas.width = width;
            canvas.height = height;
            ctx.rotate(degree);
            ctx.drawImage(img, -width, -height, width, height);
            break;
        case 3:
            canvas.width = height;
            canvas.height = width;
            ctx.rotate(degree);
            ctx.drawImage(img, -width, 0, width, height);
            break;
        default:
            canvas.width = width;
            canvas.height = height;
            ctx.drawImage(img, 0, 0, width, height);
            break;
    }

    return canvas.toDataURL('image/jpg');
};


/**
 * @desc 将base64的图片转为文件流
 * @param {String} dataUrl base64数据
 * @return {Object} 文件流
 */
const dataURLtoFile = (dataUrl) => {
    const filename = `img${Date.now()}`;
    const arr = dataUrl.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    const bstr = atob(arr[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {
        type: mime
    });
};

```




在h5开发中，因为安卓ios手机系统不同，会出现各种各样的兼容性问题，ios的拍照旋转则是原因之一

移动端H5关于ios调用摄像头拍照旋转解决方案

随手小记

一转眼，已25岁了！
昨天转正，今天过生日，特意在生日前提前申请转正！所幸在当前公司，和同事，领导关系处的还行，工作态度也得到了认可！
时常迷茫，思考未来的人生该走向何处，爱情，事业的未来在哪，方向在哪！

畅所欲言

Node.js

## Vercel 是什么

Vercel 是一个开箱即用的网站托管平台，方便开发者快速部署自己的网站。它在全球都拥有 CND 节点，因此比 Github 官方自带的 github pages 更加稳定，访问速度更快

[Koala聊开源](https://link.juejin.cn/?target=https%3A%2F%2Fspace.bilibili.com%2F489667127) 曾经对其有过介绍：[Vercel 与 Next.js：开源全明星团队背后的商业逻辑](https://link.juejin.cn/?target=https%3A%2F%2Fwww.bilibili.com%2Fvideo%2FBV1gR4y1u76v)

文字版：[Vercel 与 Next.js：开源全明星团队背后的商业逻辑](https://juejin.cn/post/7057333396359348255)

简单的说，它能极简部署应用到服务端，且是免费不用买服务器

## 官网

[Vercel 官网](https://link.juejin.cn/?target=https%3A%2F%2Fvercel.com%2F)

[Vercel 工作流官网](https://link.juejin.cn/?target=https%3A%2F%2Fvercel.com%2Fworkflow)（网页效果炫酷）

## 常见命令行

将 Vercel 下载到全局（npm i vercel -g），不知道有什么命令就-h

![img](https://cdn.nlark.com/yuque/0/2022/webp/1524717/1655952917436-a83d118c-1a14-45fc-8b05-13a8fef1c115.webp)

笔者对其了解有限，这里罗列下笔者知道的命令

- vercel login：登录 Vercel 账号
- vercel dev：本地开启服务
- vercel dev --bug：本地开启服务并打印日志
- vercel：部署本地资源到 Vercel 上
- vercel --prod：更新本地网页

vercel 可以用 vc 来代替，vc 是 Vercel 的缩写

## 部署静态服务

我们现在已经对 vercel 有所了解，前文中说到 Vercel 能简化开发者部署服务，那它能简化到什么程度呢？

这里我们从零部署一个简易静态服务

本地安装 Vercel

npm i vercel -g 

登录 Vercel

vercel login 

![img](https://cdn.nlark.com/yuque/0/2022/webp/1524717/1655952917393-76f195dc-6b2c-4119-80d2-2ea6958099c6.webp)

选择好连接的方式后，会在网站弹出

![img](https://cdn.nlark.com/yuque/0/2022/webp/1524717/1655952917385-e5061dc1-9d43-422f-9888-4a9a41d70885.webp)

哟哟，man。what's your name？

创建一个HTML文件，后续我们要将其上传至 Vercel 服务器上

**<!DOCTYPE** **html****>** <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Vercel Demo</title> </head> <body>     <h1>Vercel Demo</h1> </body> </html> 

本地测试一番，输入命令行

vercel dev 

![img](https://cdn.nlark.com/yuque/0/2022/webp/1524717/1655952917375-b9030e72-3367-4613-b68c-55f1c51e5ed1.webp)

因为我们这是第一次执行，根目录下没有.vercel，所以要填写一些必要信息，这时你的本地和 Vercel 服务器就绑定好了

部署服务

vercel 

![img](https://cdn.nlark.com/yuque/0/2022/webp/1524717/1655952918186-d7d9aff1-7ba5-4e12-8542-d33a400be830.webp)

在 [vercel-sample-ten.vercel.app/](https://link.juejin.cn/?target=https%3A%2F%2Fvercel-sample-ten.vercel.app%2F) 中能访问到我们的静态服务

在截图中我们也看到了这句话Deployed to production. Run vercel --prod to overwrite later，后续我们要更新资源，用 vercel --prod 即可

好了，除去必要的登录，我们就用了三个命令就把本地服务部署到 Vercel 服务器上

- vercel dev ：开发时使用，查看应用是否跑得起来
- vercel：部署服务
- vercel --prod：更新应用（资源）

可以登录 [Vercel 后台](https://link.juejin.cn/?target=https%3A%2F%2Fvercel.com%2Fdashboard)查看部署情况

![img](https://cdn.nlark.com/yuque/0/2022/webp/1524717/1655952918583-77ced9fb-3819-4cbf-9b4a-644eb5f77df5.webp)

## 部署 Node 服务

回归主题，最终我们想部署的是 Node 服务，是后端服务，而非前端静态资源服务，这是关键

同样建立新项目

mkdir vercel-koa2 cd vercel-koa2 npm init -y npm i koa -S touch index.js 

编写 index.js 中的内容

**const** Koa = require('koa'); **const** app = **new** Koa(); app.use(**async** ctx => {     ctx.body = 'Hello Vercel'; }); app.listen(3008, () => {     console.log('3008项目启动') }); 

PS： 3000端口默认会被 Vercel 使用，所以 Koa 服务要换个端口

使用命令vercel dev

![img](https://cdn.nlark.com/yuque/0/2022/webp/1524717/1655952918784-3c32424e-c9fa-4e6e-bd82-c227be1822f8.webp)

发现给我报错了，理由是 package.json 的 scripts 中没有 build 快捷符，修改之

... "scripts": {     "build": "node index.js", }, ... 

再次使用 vercel dev，node 服务跑起来了

于是乎我们部署它

vercel 

![img](https://cdn.nlark.com/yuque/0/2022/webp/1524717/1655952918738-611a54da-8b7a-4064-9303-e570f136a4f3.webp)

搞半天没部署上去，后台查看也是无果，呜呼悲哉

google后，发现原来还有一个 [vercel.json](https://link.juejin.cn/?target=https%3A%2F%2Fvercel.com%2Fdocs%2Fproject-configuration)，可以用 vercel.json 配置和覆盖 vercel 默认行为

下载 @vercel/node 包

npm i @vercel/node -S 

填写配置：

{   "version": 2,   "builds": [     {       "src": "index.js",       "use": "@vercel/node"     }   ] } 

执行 vercel 部署服务

![img](https://cdn.nlark.com/yuque/0/2022/webp/1524717/1655952919109-326ee458-98ff-41fb-9cf1-179b1934f7b7.webp)

访问地址：[vercel-koa2-t511069160.vercel.app](https://link.juejin.cn/?target=https%3A%2F%2Fvercel-koa2-t511069160.vercel.app)

至此，就完成了 Koa 服务的部署

与部署静态资源多了两个步骤

下载 @vercel/node 和配置 vercel.json

Vercel 是一个开箱即用的网站托管平台，方便开发者快速部署自己的网站。它在全球都拥有 CND 节点，因此比 Github 官方自带的 github pages 更加稳定，访问速度更快

vercel部署node服务

# 国际化

## 下载依赖

```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中方案的代表之作

国际化方案

# 多对多的关系

多对多是一种 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)