转载

中文文案排版指北

统一中文文案、排版的相关用法，降低团队成员之间的沟通成本，增强网站气质。

其他语言：

• 英语
• 繁体中文
• 简体中文
• 简体中文（外部链接）

• pwsh docs 地址
• pwsh vs bash
• my profile
• other

PowerShell 是构建于 .NET 上基于任务的命令行 shell 和脚本语言。 PowerShell 可帮助系统管理员和高级用户快速自动执行用于管理操作系统（Linux、macOS 和 Windows）和流程的任务。

pwsh docs 地址

pwsh docs

pwsh vs bash

• 1. WSL2 linux权限问题 chmod(): Operation not permitted
  • 解决方法

1. WSL2 linux权限问题 chmod(): Operation not permitted

解决方法

最近在 WSL 下碰到PHP chmod(): Operation not permitted 这个问题，看起来是文件权限的问题，不过查看该文件的权限是 777，不知道是 Bug 还是什么原因导致的，Google 找了下，有说是 Windows 文件系统是 NTFS 的问题，Linux 挂载需要开启一些特性，解决办法是更改 wsl.conf文件。

1

sudo vim /etc/wsl.conf

添加挂载磁盘的一些默认设置。

1
2
3
4
5
6
7
8
9
10
11

# 2. 添加下面内容

[automount]
enabled = true
root = /mnt/
options = "metadata,umask=22,fmask=111"
mountFsTab = true
[filesystem]
umask = 022

更改重启之后，一些文件的权限会改为跟 Linux 权限一样，不再是默认的全部 777 了。

1
2

# 管理员权限启动windows cmd命令行
net.exe stop LxssManager

• anyproxy
  • fiddler
  • mitmproxy
• wsl/powershell+ssh+termial
  • xshell
  • MobaXterm
• mycli
  • mysqlshell
  • workbench
  • phpmyadmin
  • DataGrip
  • navicat

logo在线生成

接口mock 厉害了

最近一直用vscode 没怎么用phpstorm ，vscode 用的是PHP Intelephense，但是好多非核心得扩展都没有提示，所以用着并不是很舒服，打开phpstorm点击redis得提示能看到，这些提示是一个jar包里的php文件， https://github.com/JetBrains/phpstorm-stubs 把需要的文件放在项目中即刻获得代码提示。（原理和laravel的ide_helper一样）

浏览器将CORS请求分成两类：简单请求 simple request 和非简单请求not-so-simple request。 只要同时满足以下两大条件，就属于简单请求。

1
2
3
4
5
6
7
8
9
10

（1) 请求方法是以下三种方法之一：
    HEAD
    GET
    POST
（2）HTTP的头信息不超出以下几种字段：   
    Accept
    Accept-Language
    Content-Language
    Last-Event-ID
    Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

这里不做示范。直接上一段php解决非简单请求的方法

1

header("Access-Control-Allow-Headers:*")

直接设置会导致浏览器请求两次，所以还需要一些其他处理，防止重复请求

浏览器规定真。。。

两段示例，以作使用php自带加密方法的迁移之备

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php

$password = '123456';


$i = 10;
while($i--){

    $hash =  password_hash($password, PASSWORD_BCRYPT);
    echo $hash.PHP_EOL;
}

$hash = '$2a$10$PLRjN06j9QTztJ24evbLvOKcPOw6mBR5ARgcwQECkfN4p.Co.i/te';
var_dump(password_verify($password,  $hash));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

package main
 
import (
	"fmt"
	"golang.org/x/crypto/bcrypt"
)
 
func PasswordHash(password string) (string, error) {
	bytes, err := bcrypt.GenerateFromPassword([]byte(password), bcrypt.DefaultCost)
	return string(bytes), err
}
 
func PasswordVerify(password, hash string) bool {
	err := bcrypt.CompareHashAndPassword([]byte(hash), []byte(password))
	return err == nil
}
 
func main() {
	password := "123456"
	hash, _ := PasswordHash(password)
 
	fmt.Println("密码:", password)
	fmt.Println("hash:", hash)
 
	match := PasswordVerify(password, hash)
	fmt.Println("验证:", match)
}

注意第一种方法是react-route,二三种方法是react-router-dom，但是第二种方法个人不推荐 目前博客的jsx语法显示有些缺陷

三种写法，第一种根据react-router但是我没有写成功

1
2
3
4
5
6
7
8
9
10
11

<Router>
   <Route path="/" component={App}>
     <IndexRoute component={Dashboard} />
     <Route path="about" component={About} />
     <Route path="inbox" component={Inbox}>
       <Route path="/messages/:id" component={Message} />
       {/* 跳转 /inbox/messages/:id 到 /messages/:id */}
       <Redirect from="messages/:id" to="/messages/:id" />
     </Route>
   </Route>
 </Router>

第二种，b站教学视频，可以运行正确，但是失去层级意义，代码有冗余信息 个人认为这是一种错误写法，为了要起到二级目录的效果，所有的path都要写成二级目录的形式才能生效，导致该写法Switch中直接在Children编写相同，所以不要用这种写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<Router>
    <Switch>
    {/* 下面的Route组件的path没有生效
    */}
    <Route path="/admin" render={
            () => {
                return (
                    <Switch>
                        <Route path="/admin/" component={Admin} exact />
                        <Route path="/admin/article" component={Article} />
                        {/* 下面的不能正确匹配 */}
                        <Route path="/articleEdit" component={ArticleEdit} />
                        <Route path="/dashboard" component={Dashboard} />
                        <Route path="/setting" component={Setting} />
                    </Switch>
                )
            }
        } />
    </Switch>
</Router>

第三种，嵌套一目了然，同react-router但是可运行,有层级结构，代码简洁。推荐

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<Router>
    <Switch>

        {/* to do 结构待优化 */}
        <Route component={Home} path='/home' exact />
        <Router basename="/admin">
            <Switch>
                <Route path="/" component={Admin} exact />
                <Route path="/article" component={Article} />
                {/* 下面的不能正确匹配 */}
                <Route path="/articleEdit" component={ArticleEdit} />
                <Route path="/dashboard" component={Dashboard} />
                <Route path="/setting" component={Setting} />

            </Switch>
        </Router>
    </Switch>
</Router>

把一个react项目打包发布到了githubpage上，结果加载速度异常的慢，同比hexo生成的博客项目，加载速度尚可，打开network分析，两者差距较大， react项目的js文件将近1m，但是react的首屏出了一个nav和一段文字描述，其实并没有什么东西。而hexo项目本身文字较多，但js文件累加不足100k。导致react项目在带宽较低的情况下体验极差（我的腾讯云也只有1mbps理论上也需要将近10s才能加载完成）。因为引入库有限，所以对库文件进行分步引入分析。

react项目引入了 react本身 + ant 库 + echarts 库 + 其他

其中ant + echarts 占比 80%

react清单

• react 40kb +
• ant 245kb +
• react.qr 6kb
• echarts 272 （不引用地图资源）
• echarts chinamap world map 320 kb -> main.js
• 业务产生main.js < 3kb

内容较多展开查看

能憋死你不 能憋疯

想找一个js可视化的库，结果感觉有点乱，所以打算从库来源，下载数量等地方统计一下，来决定用哪个，虽然大不了再换，再大不了就去手撸js，不过还是先了解一下当下也是不错。

Three.js

该项目的目的是创建一个易于使用、轻量级的 3D 库，并带有默认 WebGL 渲染器。该库还提供了示例中的 Canvas 2D、SVG 和 CSS3D 渲染器。

在这提一下three.js，虽然该库也可以做数据展示，但是这个更偏向于引擎一类的东西。这个库里面还有一些摄像机之类的概念，其实和数据可视化不是很贴切，跳过。

npm-three

D3

D3（或D3.js）是一个JavaScript库，用于使用Web标准可视化数据。D3 可帮助您使用 SVG、画布和 HTML 使数据栩栩如生。D3 将强大的可视化和交互技术与数据驱动的 DOM 操作方法相结合，为您提供现代浏览器的全部功能，并可以自由地为您的数据设计正确的可视化界面。

npm-D3

这个库在github排名较高，可做参考

Chart

提供简单的一些数据可视化方式，多是折线图之类

npm-chart.js

echarts

憋死人的就在这了，我当时看着 chart.js 和 echart 一脸懵逼，为什么有两个名字这么像，但是呢文档不一样。结果发现是周杰和周杰伦的关系，这个出自百度。

npm-echarts

Highcharts

这是一个商业库（就是你想交银子不）

钦此