肖陈伟的博客

数学公式中常用的 LaTeX 符号

2025-04-20T00:50:37.000Z

LaTeX 符号常用于数学公式，以下分别从高等数学、线性代数和离散数学进行罗列并举例。

高等数学

加减（正负） / 乘 / 除: $\pm$ / $\times$ / $\div$: \pm / \time / \div; $\pm\infty$ / $n!=n(n-1)\cdots2\times1$ / $n\div d$: \pm\infty / n!=n(n-1)\cdots2\times1 / n\div d

复合: $\circ$: \circ; $(f\circ g)(x)=f[g(x)]$: (f\circ g)(x)=f[g(x)]

去心邻域: $\mathring{}$: \mathring{}; $\mathring{U}(x_0,\delta)$: \mathring{U}(x_0,\delta)

分式: $\frac{}{}$: \frac{}{}; $\frac{dy}{dx}=-\frac{F_x}{F_y}$: \frac{dy}{dx}=-\frac{F_x}{F_y}

极限: $\lim$: \lim; $\lim\limits_{x \to \infty}f(x)=A$: \lim\limits_{x\to\infty}f(x)=A

开平方 / 开 n 次方: $\sqrt{}$ / $\sqrt[n]{}$: \sqrt{} / \sqrt[n]{}; $ds=\sqrt{1+y'^2}dx$ / $\lim_{n\to\infty}\sqrt[n]{n}=1$: ds=\sqrt{1+y'^2}dx / \lim_{n\to\infty}\sqrt[n]{n}=1

不等于 / 约等于: $\neq$ / $\approx$: \neq / \approx; $f'(x_0)\neq0$ / $\Delta y\approx f'(x_0)\Delta x$: f'(x_0)\neq0 / \Delta y\approx f'(x_0)\Delta x

小于等于 / 大于等于 / 远小于 / 远大于: $\leq$ / $\geq$ / $\ll$ / $\gg$: \leq / \geq / \ll / \gg; $\ln x\leq x-1$ / $e^x\geq 1+x$ / $|y'|\ll1$ / $1\ll|y'|$: \ln x\leq x-1 / e^x\geq 1+x / |y'|\ll1 / 1\ll|y'|

偏导: $\partial$: \partial; $\frac{\partial^2z}{\partial x\partial y}=f_{xy}(x,y)$: \frac{\partial^2z}{\partial x\partial y}=f_{xy}(x,y)

积分: $\int$: \int; $\int f(x)dx=F(x)+C$: \int f(x)dx=F(x)+C

二重积分: $\iint$: \iint; $\iint\limits_Df(x,y)d\sigma=\iint\limits_Df(x,y)dxdy$: \iint\limits_Df(x,y)d\sigma=\iint\limits_Df(x,y)dxdy

平均: $\overline{}$: \overline{}; $\overline{y}=\frac{1}{b-a}\int_a^by(x)dx$: \overline{y}=\frac{1}{b-a}\int_a^by(x)dx

线性代数

行列式

$\begin{vmatrix}\end{vmatrix}$: \begin{vmatrix}\end{vmatrix}

$D=\begin{vmatrix}a_{11}&a_{12}&\cdots&a_{1n}\\a_{21}&a_{22}&\cdots&a_{2n}\\\vdots&\vdots&\vdots&\vdots\\a_{n1}&a_{n2}&\cdots&a_{nn}\end{vmatrix}$:

D=\begin{vmatrix}a_{11}&a_{12}&\cdots&a_{1n}\\a_{21}&a_{22}&\cdots&a_{2n}\\\vdots&\vdots&\vdots&\vdots\\a_{n1}&a_{n2}&\cdots&a_{nn}\end{vmatrix}

等号上说明

$\xlongequal{}$: \xlongequal{}

$\begin{vmatrix}a_{11}&a_{12}&\cdots&a_{1n}\\\vdots&\vdots&\vdots&\vdots\\ka_{i1}&ka_{i2}&\cdots&ka_{in}\\\vdots&\vdots&\vdots&\vdots\\a_{n1}&a_{n2}&\cdots&a_{nn}\end{vmatrix}\xlongequal{r_i\div k}k\begin{vmatrix}a_{11}&a_{12}&\cdots&a_{1n}\\\vdots&\vdots&\vdots&\vdots\\a_{i1}&a_{i2}&\cdots&a_{in}\\\vdots&\vdots&\vdots&\vdots\\a_{n1}&a_{n2}&\cdots&a_{nn}\end{vmatrix}$:

\begin{vmatrix}a_{11}&a_{12}&\cdots&a_{1n}\\\vdots&\vdots&\vdots&\vdots\\ka_{i1}&ka_{i2}&\cdots&ka_{in}\\\vdots&\vdots&\vdots&\vdots\\a_{n1}&a_{n2}&\cdots&a_{nn}\end{vmatrix}\xlongequal{r_i\div k}k\begin{vmatrix}a_{11}&a_{12}&\cdots&a_{1n}\\\vdots&\vdots&\vdots&\vdots\\a_{i1}&a_{i2}&\cdots&a_{in}\\\vdots&\vdots&\vdots&\vdots\\a_{n1}&a_{n2}&\cdots&a_{nn}\end{vmatrix}

连乘

$\prod$: \prod

$\begin{vmatrix}1&1&\cdots&1\\x_1&x_2&\cdots&x_n\\x_1^2&x_2^2&\cdots&x_n^2\\\vdots&\vdots&\vdots&\vdots\\x_1^{n-1}&x_2^{n-1}&\cdots&x_n^{n-1}\\\end{vmatrix}=\prod_{1\leq i<j\leq n}(x_j-x_i)$:

\begin{vmatrix}1&1&\cdots&1\\x_1&x_2&\cdots&x_n\\x_1^2&x_2^2&\cdots&x_n^2\\\vdots&\vdots&\vdots&\vdots\\x_1^{n-1}&x_2^{n-1}&\cdots&x_n^{n-1}\\\end{vmatrix}=\prod_{1\leq i<j\leq n}(x_j-x_i)

矩阵

$\begin{pmatrix}\end{pmatrix}$: \begin{pmatrix}\end{pmatrix}

$A=\begin{pmatrix}a_{11}&a_{12}&\cdots&a_{1n}\\a_{21}&a_{22}&\cdots&a_{2n}\\\vdots&\vdots&\vdots&\vdots\\a_{m1}&a_{m2}&\cdots&a_{mn}\end{pmatrix}$:

A=\begin{pmatrix}a_{11}&a_{12}&\cdots&a_{1n}\\a_{21}&a_{22}&\cdots&a_{2n}\\\vdots&\vdots&\vdots&\vdots\\a_{m1}&a_{m2}&\cdots&a_{mn}\end{pmatrix}

左大括号

$\begin{cases}\end{cases}$: \begin{cases}\end{cases}

$\begin{cases}a_{11}x_1+a_{12}x_2+\cdots+a_{1n}x_n=b_1,\\a_{21}x_1+a_{22}x_2+\cdots+a_{2n}x_n=b_2,\\\cdots\ \cdots\ \cdots\ \cdots\\a_{m1}x_1+a_{m2}x_2+\cdots+a_{mn}x_n=b_m,\end{cases}$:

\begin{cases}a_{11}x_1+a_{12}x_2+\cdots+a_{1n}x_n=b_1,\\a_{21}x_1+a_{22}x_2+\cdots+a_{2n}x_n=b_2,\\\cdots\ \cdots\ \cdots\ \cdots\\a_{m1}x_1+a_{m2}x_2+\cdots+a_{mn}x_n=b_m,\end{cases}

等价 / 合同: $\cong$ / $\simeq$: \cong / \simeq; $A\cong B$ / $A\simeq B$: A\cong B / A\simeq B

离散数学

合取 / 析取 / 异或: $\land$ / $\lor$ / $\oplus$: \land / \lor / \oplus; $p\land q$ / $p\lor q$ / $p\oplus q$: p\land q / p\lor q / p\oplus q

连续合取 / 连续析取

$\bigwedge$ / $\bigvee$: \bigwedge / \bigvee

$\neg(\underset{j=1}{\overset{n}\bigwedge}p_j)\equiv\underset{j=1}{\overset{n}\bigvee}\neg p_j$:

\neg(\underset{j=1}{\overset{n}\bigwedge}p_j)\equiv\underset{j=1}{\overset{n}\bigvee}\neg p_j

蕴含 / 双向蕴含: $\to$ / $\leftrightarrow$: \to / \leftrightarrow; $p\to q$ / $p\leftrightarrow q$: p\to q / p\leftrightarrow q

全称量词 / 存在量词: $\forall$ / $\exists$: \forall / \exists; $\forall xp(x)$ / $\exists xp(x)$: \forall xp(x) / \exists xp(x)

因此

$\therefore$: \therefore

$\begin{align}&p\\&\underline{p\to q}\\\therefore\ &q\end{align}$:

\begin{align}&p\\&\underline{p\to q}\\\therefore\ &q\end{align}

属于 / 不属于: $\in$ / $\notin$: \in / \notin; $a\in A$ / $a\notin A$: a\in A / a\notin A

子集 / 父集 / 真子集 / 真父集: $\subseteq$ / $\supseteq$ / $\subset$ / $\supset$: \subseteq / \supseteq / \subset / \supset; $A\subseteq B$ / $B\supseteq A$ / $A\subset B$ / $B\supset A$: A\subseteq B / B\supseteq A / A\subset B / B\supset A

空集 / 阿列夫零: $\varnothing$ / $\aleph_0$: \varnothing / \aleph_0; $\varnothing\subseteq S$ / $|S|=\aleph_0$: \varnothing\subseteq S / |S|=\aleph_0

并集 / 交集: $\cup$ / $\cap$: \cup / \cap; $A\cup B$ / $A\cap B$: A\cup B / A\cap B

连续并集 / 连续交集: $\bigcup$ / $\bigcap$: \bigcup / \bigcap; $\underset{i=1}{\overset{n}\bigcup}A_i$ / $\underset{i=1}{\overset{n}\bigcap}A_i$: \underset{i=1}{\overset{n}\bigcup}A_i / \underset{i=1}{\overset{n}\bigcap}A_i

布尔积: $\odot$: \odot; $A\odot B$: A\odot B

求和: $\sum$: \sum; $\sum_{k=1}^{n}k=\frac{n(n+1)}{2}$: \sum_{k=1}^{n}k=\frac{n(n+1)}{2}

下大括号: $\underbrace{}$: \underbrace{}; $A^R=\underbrace{AAA\cdots A}_{(r个A相乘)}$: A^R=\underbrace{AAA\cdots A}_{(r个A相乘)}

不大于 x 的最大整数 / 不小于 x 的最小整数: $\lfloor x\rfloor$ / $\lceil x\rceil$: \lfloor x\rfloor / \lceil x\rceil; $\lfloor \log_2n\rfloor+1$ / $\lceil \log_2(n+1)\rceil$: \lfloor \log_2n\rfloor+1 / \lceil \log_2(n+1)\rceil

GitHub Workflow 和 Action 的一些注意事项

2024-12-29T08:55:22.000Z

GitHub 的 workflow 和 action 存在着一些注意事项，包括 workflow 的 yaml 配置，action 的脚本编写，以及对应的 branch 的保护设置，总结如下，以供参考

Workflow

on.issues.types

如果需要判断 label，不需要指定 opened，只需要指定 labeled，因为即使 label 是新建时设置的，也会触发 labeled

permissions

如果需要 checkout 当前 repo，需要添加 contents: write，否则会有权限问题

jobs.check.steps.env

如果需要使用 GitHub API，需要添加环境变量

1	GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Action

List repository issues

API 不仅返回 issues，也会返回 prs，默认 30 条每页，可以指定 labels 来过滤

List pull requests

API 返回所有 pull requests，默认 30 条每页，可以通过 per_page 和 page 参数做分页处理，例如：

const prs = [];
for (let page = 1; ; page++) {
  const { data } = await octokit.rest.pulls.list({
    ...context.repo,
    base: `refs/heads/main`,
    state: 'open',
    per_page: PER_PAGE,
    page,
  });
  prs.push(...data);
  if (data.length < PER_PAGE) {
    break;
  }
}

Get commit status

API 列出所有 contexts 对应的 state，可以过滤当前的 context

Create commit status

API 用于创建 commit 的 status，可指定 state，context 和 description（作为运行结果显示）

Setting

Require status checks

需要在 Branch protection rule 中的 Protect matching branches 下，勾选 Require status checks to pass before merging

Add required checks

需要将当前的 GitHub action 添加到 Status checks that are required

React 类组件转换为函数式

2023-12-29T13:05:16.000Z

函数式的 React 组件更加现代，并支持有用的 hooks，现在流行把旧式的类组件转换为函数式组件。这篇文章总结了转换的一些通用的步骤和陷阱。

通用替换

定义

从

1	class (\w+) extends Component \{

改为

1	const $1: FC = () => {

这是没有 export 和 props 的场景

从

1	(export) default class (\w+) extends Component \{

改为

1	$1 const $2: FC<$2Props> = () => {

作为第二个捕捉的单词，$2 就是组件名。
$2Props 应该定义为 props 的接口名。

Attributes 前缀

从

1	this\.(state\.\|props\.)?

改为

假设 props 被统一解构。

生命周期函数

从

1	componentDidMount() {

改为

1	useEffect(() => {}, []);

componentDidUpdate 也可以被转换为 useEffect，并设置合适的依赖。
componentWillUnmount 可以转换为对应 useEffect 处理函数的返回函数。

State 相关语句

从

1
2
3

state = {
  data: null,
};

改为

1	const [data, setData] = useState();

从

1
2
3

this.setState({
  data,
});

改为

1	setData(data)

类方法

从

1	^(\s)(\w+)$(\w)$ \{

改为

1	$1const $2 = ($3) => {

这属于常规函数定义。
$1 是空格, $2 是方法名, $3 是参数.

从

1	^(\s)((\w+) = (async )?$(\w+(, )?)$ =>)

改为

1	$1const $2

这属于箭头函数定义。
$1 是空格, $2 方法名之后的所有内容

类 Getter

从

1	^(\s*)(get) (\w+)

改为

1	$1const $2\u$3 = () =>

\u 表示对后面捕获的单词首字母大写。
对 getter 的调用应该在方法名后加上 ()。
如果 getter 很简单，可以直接赋值而不用使用函数。

渲染函数

从

render() {
  return (
    <></>
  );
}

改为

1
2
3

return (
  <></>
);

值得关注的陷阱

命名冲突

类组件可以具有同名的 attributes 和 props，例如 this.data 和 this.props.data。
当 this.data 变为 data，另外 props 经常被解构为 const {data} = props，命名冲突就产生了。

State 回调

通过 this.setState，我们可以设置一个回调，在 state 确实改变时进行调用，但我们需要把这种方式更新为使用更新的 state 作为依赖的 useEffect。

函数 State

如果 state 的值是函数，你需要把这个函数包裹在另一个匿名函数中，否则 hook 版本的 setState 会把这个函数视为回调。
实际上，在大多情况下，这种 state 是和渲染无关的，所以也许使用 useRef 更加合适。

这个文章展示了一些使用 RegExp 的替换，可以使类组件到函数式组件的替换简单点，另外指出了一些在这个过程中你可能会遇到的陷阱，可以特别留意下，不过当然，不同的场景会存在更多的工作要处理。

常用 Git 命令行操作

2022-12-31T01:03:10.000Z

本文记录了一些常用 Git 命令行操作的具体使用方式

git clone

git clone REPOSITORY_URL
拉取仓库，并使用仓库名作为本地文件名
git clone REPOSITORY_URL FOLDER
拉取仓库，并使用 FOLDER 作为本地文件名

git fetch

git fetch origin
更新所有远程分支
git fetch origin BRACH
更新指定远程分支

git pull

git pull origin
相当于 fetch + merge 对应的上游分支
git pull origin BRACH
拉取指定分支到当前分支
git pull origin --rebase master
让本地分支重新基于远端的 master 分支

git push

git push origin
把分支推到远端对应的上游分支
git push origin BRANCH
把分支推到远端对应的分支
git push --set-upstream origin BRANCH
把分支推到远端对应的分支，并将其设为上游分支（一般第一次提交自己的开发分支需要用到）
git push -f origin
把分支强推到远端对应的上游分支（会覆盖远端分支，需要慎用）
git push origin -d BRANCH
删除远程分支

git branch

git branch
列出本地所有分支
git branch -a
列出本地和远程分支
git branch -m NEW_BRANCH
更新当前分支名
git branch -d BRANCH
删除已合并的分支
git branch -D BRANCH
强制删除分支（即使未合并）

git checkout

git checkout BRANCH
切到对应分支
git checkout -b NEW_BRANCH
创建新分支
git checkout -b NEW_BRANCH BRANCH
基于 BRANCH 创建新分支
git checkout SHA-1
切换到某个提交，也可以用 HEAD~N（N 为 1, 2, 3…）切到上 N 个提交
git checkout SHA-1 /PATH/TO/FILE
把文件还原到相应的提交版本
git checkout --theirs /PATH/TO/FILE
有冲突时使用对方的文件版本
git checkout --ours /PATH/TO/FILE
有冲突时使用自己的文件版本
git checkout -
切换到之前的分支，适合在两个分支频繁切换时使用

git add

git add .
把所有增加/修改/删除的文件标识为要提交
git add /PATH/TO/FILE
只把单一文件标识为要提交，当有其他不需要提交的文件被修改时可使用

git commit

git commit
把 git add 标识的文件进行提交
git commit -a
把修改/删除的文件进行提交（如果有新增的文件，需要使用 git add 添加）
git commit -am "MESSAGE"
把修改/删除的文件进行提交并指定注释（适用于临时或简单注释内容）
git commit --amend
更新上一次提交，可以加上 -a 或在之前运行 git add 追加更新文件
git commit --amend --reset-author
默认的更新提交是不改变作者的，如果需要改变可以明确配置

git cherry-pick

git cherry-pick SHA-1
把某个提交应用到当前分支

git status

git status
查看目前状态

git diff

git diff
当前所有修改到的，没被标识为要提交的文件的更新内容
git diff --cache
当前所有修改到的，并被标识为要提交的文件的更新内容
git diff /PATH/TO/FILE
指定文件的更新内容，同样可以用 --cache 区分

git log

git log
详细显示所有记录
git log -n 10
显示最近 10 条记录
git log --oneline
简要显示所有记录
git log --oneline master ^BRANCH | wc -l
可以计算 BRANCH 和 master 分支相差多少个提交

git stash

git stash
暂存修改/删除，或已标识为要 commit 的新增的文件
git stash -u
暂存修改/删除/新增的文件，即新增文件可以不用 git add
git stash pop
把暂存的文件重新放出来

git revert

git revert SHA-1
通过形成一个新提交取消某个提交
git revert SHA-1 -m 1
如果是合并节点，需要指定要取消提交对应的父节点
例如合并是把 BRANCH_2 合并到 BRANCH_1，那么要在 BRANCH_1 取消这次合并，就应该指定 m 为 1（大多数情况都是这样）

git reset

git reset
取消对要 commit 的文件的标识（相当于 git add 的撤销）
git reset --hard
取消修改/删除或已标识为要 commit 的新增的文件的更新
git reset SHA-1
取消从 SHA-1 之后的所有提交，但是保留提交文件的更新
如果只想取消上一次提交，SHA-1 可以设为 HEAD^
git reset --hard SHA-1
取消从 SHA-1 之后的所有提交，而且不保留提交文件的更新

git rebase

git rebase BRANCH
让当前分支重新基于 BRANCH
git rebase -i SHA-1
更新 SHA-1 以后的提交，可以 pick/p，edit/e，drop/d，squash/s 相应提交
如果第一个提交使用 p，后面的提交使用 s，可以把多个提交合并成一个提交

git merge

git merge BRANCH
把 BRANCH 合并到当前分支，尽量不形成合并节点
git merge --no-ff BRANCH
把 BRANCH 合并到当前分支，并确保形成合并节点
git merge --squash BRANCH
把 BRANCH 和当前分支的变更作为标识为要提交的内容，需要运行 git commit 完成只有一个提交的合并

git update-index

git update-index --assume-unchanged /PATH/TO/FILE
当某个文件被临时修改，但不想提交，也不适合放到 .gitignore，可以用此命令让 git 不将其识别为已修改
如果这个文件是新增的，就不能用这个命令了，不过可以把文件路径加到 .git/info/exclude
git update-index --no-assume-unchanged /PATH/TO/FILE
恢复以上文件的修改识别

不同环境的性能测试计划

2021-06-19T23:07:15.000Z

不同环境下的 JMeter 性能测试，设置基本一致，只是地址，账户等信息不同，本文利用 Shell 脚本和 JMeter 变量进行统一处理

安装 JMeter

wget https://mirror.cogentco.com/pub/apache//jmeter/binaries/apache-jmeter-5.4.1.tgz
tar -zxvf apache-jmeter-5.4.1.tgz -C /opt

把执行目录加入 PATH

1	export PATH="$PATH:/opt/apache-jmeter-5.4.1/bin"

这样就可以从任何地方执行 jmeter 命令了

设置测试计划

运行 JMeter GUI

jmeter

常规设置

右键单击 Test Plan，把鼠标移至 Add，再移至 Threads(User)，点击 Thread Group，设置合适的 Number of Threads (users) 值
右键单击 Test Plan 下新增的 Thread Group，把鼠标移至 Add，再移至 Config Element，点击 HTTP Request Default，设置 Server Name or IP 为 ${__P(HOST)}，Port Number 为 ${__P(PORT)}
右键单击 Thread Group，把鼠标移至 Add，再移至 Sample，点击 HTTP Request，设置 Name 为 Frontend，Path 为 /
右键单击 Thread Group，把鼠标移至 Add，再移至 Sample，点击 HTTP Request，设置 Name 为 Backend，Path 为 /api/currentUser
右键单击 Thread Group，把鼠标移至 Add，再移至 Assertion，点击 Response Assertion，设置 Field to Test 为 Response Code，Patten Matching Rules 为 Equals，点击下方的 Add，输入 200

__P 为 JMeter 获取命令行参数的函数

权限处理

以上的后端接口是需要先登录才能有权限访问的，权限认证方式为 cookies 或 Authorization Header 中的 token，所以需要先获取这个 token，并在每次访问时带上

右键单击 Test Plan，把鼠标移至 Add，再移至 Threads(User)，点击 setUp Thread Group
右键单击 Test Plan 下新增的 setUp Thread Group，把鼠标移至 Add，再移至 Sample，点击 HTTP Request，设置 Name 为 Login，Server Name or IP 为 ${__P(HOST)}，Port Number 为 ${__P(PORT)}，HTTP Request 的方法为 POST，Path 为 /api/login/account，点击下方的 Add，分别增加 Name 为 username 和 password，Value 为 ${__P(USERNAME)} 和 ${__P(PASSWORD)}
右键单击 setUp Thread Group，把鼠标移至 Add，再移至 Post Processors，点击 Regular Expression Extractor，设置 Name of created variable 为 token，Regular Expression 为 "token":"(.+?)"，Template 为 $1$
右键单击 setUp Thread Group，把鼠标移至 Add，再移至 Sample，点击 BeanShellSampler，设置 Name 为 Token，Script 为 ${__setProperty(token, ${token})}
右键单击 Thread Group，把鼠标移至 Add，再移至 Config Element，点击 HTTP Cookie Manager，点击下方的 Add，设置 Name 为 token，Value 为 ${__property(token)}，Domain 为 ${__P(HOST)}:${__P(PORT)}，Path 为 /

"token":"(.+?)" 将返回结果中的 token 的值捕捉为 $1$
__setProperty 为 JMeter 设置全局变量的函数
__property 为 JMeter 获取置全局变量的函数

运行测试计划

直接运行

以上的计划设置，把地址和账户信息都作为变量，可以在命令行传递，形如：

mkdir report
HEAP=”-Xms1g -Xmx1g -XX:MaxMetaspaceSize=256m”
jmeter -n -t test.jmx \
-J HOST=127.0.0.1 \
-J PORT=80 \
-J USERNAME=USERNAME \
-J PASSWORD=PASSWORD \
-l log/local-20210620095700.txt \
-e -o report/local-20210620095700

report 文件夹必须存在，才能写入报告目录，所以首次需用 mkdir 新建
以上命令使用了 jmeter 的命令选项 -n，-t，-J，-l，-e 和 -o
local-20210620095700 里面的 html 格式的测试报告，包括表格数据和可视化图表，如下图所示

脚本处理

以上命令相对繁琐，而且不同环境需要重新设置每个参数，所以通过 Shell 脚本简化

设置变量

export LOCAL_HOST=127.0.0.1
export LOCAL_PORT=80
export LOCAL_USERNAME=USERNAME
export LOCAL_PASSWORD=PASSWORD
export TESTING_HOST=192.168.1.10
export TESTING_PORT=80
export TESTING_USERNAME=USERNAME
export TESTING_PASSWORD=PASSWORD
export PRODUCT_HOST=192.168.1.100
export PRODUCT_PORT=80
export PRODUCT_USERNAME=USERNAME
export PRODUCT_PASSWORD=PASSWORD

调用变量

#!/bin/sh

time=$(date "+%Y%m%d%H%M%S")
server=${1:-"local"}
prefix=$(echo $server | tr 'a-z' 'A-Z')_
HOST=${prefix}HOST
PORT=${prefix}PORT
USERNAME=${prefix}USERNAME
PASSWORD=${prefix}PASSWORD

if ! [ -d "report" ]
then
mkdir report
fi

HEAP="-Xms1g -Xmx1g -XX:MaxMetaspaceSize=256m"
jmeter -n -t test.jmx \
  -J HOST=${!HOST} \
  -J PORT=${!PORT} \
  -J USERNAME=${!USERNAME} \
  -J PASSWORD=${!PASSWORD} \
  -l log/$server-$time.txt \
  -e -o report/$server-$time

$(echo $VAR | tr 'a-z' 'A-Z') 表示全部大写，等效于版本 4.0 以上的 Bash 的 ${VAR^^}
如果 report 文件夹存在就不用再重新创建，所以先通过 -d 判断
${!HOST} 表示 $HOST 的值为另一变量的名称，最后解析出来的是这另一个变量的值

运行脚本

本地环境

./test.sh

测试环境

./test.sh testing

正式环境

./test.sh product

在不设环境的时候，${1:-"local"} 把默认环境设置为 local

总结

以上计划和脚本可以在此 GitHub 仓库下载，主要实现了：

JMeter 通过接收命令行输入的参数进行动态设置测试计划
通过启动线程组进行登录处理，并将 token 设置为全局变量
通过 Shell 脚本简化命令并进行不同环境的统一处理

React 应用的 Nginx 缓存控制

2021-05-23T01:54:46.000Z

典型 React 应用面临的缓存问题，可通过 Nginx 配置进行解决

通用部署

构建应用后，只需使用 Nginx 指向静态文件即可

server {
  listen 80;
  root /PATH/TO/APP/build;
  try_files $uri $uri/ /index.html;
}

缓存问题

第一次请求页面的时候，所有页面和资源都是从服务器返回的，如下图所示：

关闭浏览器，重新打开，输入网址，按下Enter，浏览器会从本地缓存获取文件，如下图所示：

即使在以上两次请求之间，页面已更新，浏览器也不会从服务器重新获取更新，因为 disk cache 并没有和服务器进行任何通信

解决思路

如果资源文件有更新，其文件名就会更新，所以资源的缓存不是问题，只需禁用页面的缓存即可

即把以上的

1	try_files $uri $uri/ /index.html;

替换为

location / {
  if ( $uri = '/index.html' ) {
    add_header Cache-Control no-store always;
  }
  try_files $uri $uri/ /index.html;
}

因为所有的页面最终都指向入口文件，所以其实际的 $uri 都是 /index.html
no-store 是最严格的 Cache-Control 禁用缓存的值，确保浏览器不使用任何缓存
因为 add_header 连带 if 不能直接在 server 下，所以加了一层 location

解决效果

这样第二次请求页面时，页面本身不会缓存，但是资源如果没有改变就会缓存，如下图所示：

可以访问以下地址，尝试操作，并查看对应的网络请求：

http://react.chanvinxiao.com

总结

浏览器输入地址按 Enter 会出现奇怪的缓存问题
通过 Nginx 的 $uri 可以判断请求是否为页面
通过 Nginx 的 add_header 可以设置缓存控制头

Hexo 博客利用 Nginx 实现中英文切换

2020-05-10T10:36:32.000Z

本文记录了对 Hexo 博客进行中英文切换的配置过程，实现同一应用共用模版，任何页面可以切换到另一语言的对应页面，并对未明确语言的访问地址，根据浏览器语言进行自动跳转

实现细则

中英文地址区分

博客中文首页：

https://chanvinxiao.com/cn/blog/

博客英文首页：

https://chanvinxiao.com/en/blog/

中英文切换

例如以下博客中文页面

https://chanvinxiao.com/cn/blog/archives/2020/04/

点击右上角的 English，则切换到以下地址

https://chanvinxiao.com/en/blog/archives/2020/04/

在这个页面点击右上角的中文，则会切换回来

自动跳转

例如以下博客地址

https://chanvinxiao.com/blog/vuejs-tic-tac-toe/

当浏览器语言设置的首选语言为英文时，会跳转到其对应的英文版本

https://chanvinxiao.com/en/blog/vuejs-tic-tac-toe/

当浏览器语言设置的首选语言为中文时，则跳转到其对应的中文版本

https://chanvinxiao.com/cn/blog/vuejs-tic-tac-toe/

Hexo 配置

增加英文配置

在项目根目录下增加 _config-en.yml

# Site
title: TITLE
subtitle: SUBTITLE
description: DESCRIPTION
keywords: KEYWORDS
language: en

# URL
url: https://chanvinxiao.com/en/blog
root: /en/blog/

# Directory
source_dir: source-en
public_dir: public-en

#Site 相关的配置，主要是把中文的内容改为英文的，关键是将 language 设为 en，这样模版就会使用英文的语言项
URL 和 root 要设置为独立于中文对应的地址和目录
将英文的 source 和 public 目录和中文区分开，就可以确保中、英文版分别只出现中、英文博客文章

增加相关脚本

在 package.json 中增加以下脚本

"scripts": {
  ...
  "build:en": "hexo generate --config _config.yml,_config-en.yml",
  "clean:en": "hexo clean --config _config.yml,_config-en.yml",
  "server:en": "hexo server --config _config.yml,_config-en.yml"
},

增加了英文对应的构建、清除和服务器的脚本，中英文相对独立，互不影响
使用自定义配置, 将相应脚本的配置设为 _config.yml 与 _config-en.yml 的叠加配置
系统会自动生成叠加配置文件 _multiconfig.yml，应将此文件添加至 .gitignore 中

Nginx 配置

在 Nginx 对应的 server 中增加以下配置

if ( $http_accept_language ~* ^en ) {
  rewrite ^(/blog.*) /en$1 redirect;
}

rewrite ^(/blog.*) /cn$1 redirect;

location /cn/blog {
  alias /PATH/TO/BLOG/public;
  error_page 404 $scheme://$host/cn/blog;
}

location /en/blog {
  alias /PATH/TO/BLOG/public-en;
  error_page 404 $scheme://$host/en/blog;
}

$http_accept_language 为 Nginx 的 http 模块为请求首部 Accept-Language 设置的内嵌变量，如果浏览器的默认语言为英文，其值将以 en 开头，例如 en-US,en;q=0.9
rewrite ^(/blog.*) /en$1 redirect; 相当于把 /blog 开头的地址前面增加 /en，rewrite 的标记设置为 redirect 表示 302 跳转，下面默认的 cn 跳转也是一致
以上设置对以 /blog 开头的地址（即未明确语言的地址）进行了判断跳转，如果浏览器默认语言为英文，则跳转到以 /en/blog 开头的英文站，否则默认跳转到以 /cn/blog 开头的中文站
因为 /cn/blog 对应的是 public 目录下的 index.html，而不是 cn/blog/index.html，所以需要使用 alias，而不是 root
error_page 设置了 404 处理，$scheme 为 http 或 https，标示为页面跳转，分别跳转到对应博客中、英文首页

页面对应切换

以模版 landscape 为例，在 themes/landscape/source/js/script.js 中的 })(jQuery);前，增加以下内容

let language = {};
language.now = location.pathname.match(/^\/en/) ? 'en' : 'cn';
if('en' === language.now){
  language.label = '中文';
  language.href = location.pathname.replace(/^\/en/, '/cn');
}else{
  language.label = 'English';
  language.href = location.pathname.replace(/^\/cn/, '/en');
}
$('#sub-nav').prepend(`class="main-nav-link" href="${language.href}">${language.label}`)

根据页面路径前面是否为 /en，确认是博客中文页面还是英文页面
英文页面增加到对应中文页面的链接菜单，中文则增加英文的链接
直接将地址中的 cn 改为 en 或 en 改为 cn 则为对应页面，如果没有对应页面，根据以上的 Nginx 配置，将跳转到对应首页
利用 jQuery 的 prepend 将链接增加到子菜单中，共用类 main-nav-link 的样式

总结

在实现博客中英文过程中，主要使用了以下技术：

Hexo 的自定义配置和 package.json 的 scripts
Nginx 的 http 模块的请求首部内嵌变量
Nginx 的指令 rewrite, alias 和 error_page
location 的 pathname 和 jQuery 的 prepend

prefetch 和 preload 及 webpack 的相关处理

2020-04-26T03:43:29.000Z

使用预取和预加载是网站性能和用户体验提升的一个很好的途径，本文介绍了使用 prefetch 和 prefetch 进行预取和预加载的方法，并使用 webpack 进行实现

Link 的链接类型

标签的 rel 属性可以定义链接类型，与 href 配合使用可以预取或预加载对应资源，prefetch 是其中的一种链接类型

1	rel="prefetch" herf="URL">

preload 是另外一种类型，同样用 href 定义资源地址，但其处理预取外，还会对资源进行解析，所以还要增加属性 as，说明资源的类型

1	rel="preload" href="URL" as="MIME_TYPE">

预取资源

prefetch 表示用户在接下来的浏览中（例如在下一个页面），有可能用到对应资源，提示浏览器要在闲时获取对应资源

先新建文件夹 prefetch-preload-demo（本文所有代码将在此创建），安装相关依赖，并新建文件夹 static

mkdir prefetch-preload-demo
cd prefetch-preload-demo
npm init -y
npm i -D http-server
mkdir static

在 static 中创建 prefetch.html， main.js 和 script.js

prefetch.html 定义了一个 rel 为 prefetch 的链接

<html>
<head>
<title>Prefetchtitle>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="prefetch" href="script.js">
head>
<body>
<script src="main.js">script>
body>
html>

main.js 创建了一个按钮，并绑定了点击事件

let button = document.createElement('button');
button.innerHTML = 'Add Script';
button.addEventListener('click', e => {
  let script = document.createElement("script");
  script.src = "script.js";
  document.head.appendChild(script);
});
document.body.appendChild(button);

script.js 只是简单的打印了一下

1	console.log('script run');

运行服务器（也可在 package.json 中增加 server 脚本）

npx http-server

访问 http://localhost:8080 并导航至 static 中，点击 prefetch.html，或者直接访问线上页面，初始状态下，查看控制台的网络选项卡下的内容如下（不要勾选 Disable Cache，点击右侧齿轮，勾选 Use large request rows）

script.js 被 fetch 下来，size 列的两个数字，275 B 表示下载的字节大小，0 B 表示解析的字节大小（即目前并没有解析）
控制台是空的，即脚本没有运行

点击页面上的 Add Script，会在页面增加地址为 script.js 的