随记

不同路径写法对Rsync的影响

Rsync 同步时需要指定源路径与目标路径，那么路径末尾的 / 会影响同步的结果吗？做了以下测试

同步目录

以源路径 /Downloads/User 目录，远端目录 /data 为例

  • rsync Dowloads/User root@ip:/data
    • /data 存在，/data/User 与源目录一致
    • /data不存在，/data/User与源目录一致
  • rsync Downloads/User root@ip:/data/
    • /data存在，/data/User与源目录一致
    • /data不存在，/data/User与源目录一致
  • rsync Downloads/User/ root@ip:/data
    • /data存在，/data 与源目录一致
    • /data不存在，/data与源目录一致
  • rsync Dowloads/User/ root@ip:/data/
    • /data存在，/data与源目录一致
    • /data 不存在， /data与源目录一致

同步文件

以源路径 /Downloads/User/a.txt文件，远端路径 /data 为例

  • rsync Dowloads/User/a.txt root@ip:/data
    • /data 存在，/data 覆盖内容与a.txt一致
    • /data不存在，/data 创建文件，内容与a.txt一致
  • rsync Downloads/User/a.txt root@ip:/data/
    • /data存在，/data/a.txt 与a.txt一致
    • /data不存在，/data/a.txt 与a.txt一致
  • rsync Downloads/a.txt/ root@ip:/data
    • /data存在，报错：”Downloads/User/a.txt/.” failed: Not a directory (20)
    • /data不存在，报错：”Downloads/User/a.txt/.” failed: Not a directory (20)
  • rsync Dowloads/User/a.txt/ root@ip:/data/
    • /data存在，报错：”Downloads/User/a.txt/.” failed: Not a directory (20)
    • /data 不存在，报错：”Downloads/User/a.txt/.” failed: Not a directory (20)

总结

  • 同步的源路径为目录时
    • 源路径以/结尾时，同步源路径下边的所有文件至目标路径内
    • 源路径非/结尾时，同步源路径自身至目标路径内（源目录会作为目标路径的子目录）
    • 与目标路径是否以/结尾无关
  • 同步的源路径为文件时
    • 源路径以/结尾时报错，无法执行同步
    • 目标路径以/结尾时，同步文件至目标路径下，新建或覆盖目标路径下的同名文件
    • 目标路径非/结尾时，目标路径即为同步之后的文件路径（可理解为把源文件重命名为目标文件）
随记

Xtermjs使用入门

Xterm是一个实现web终端的js库。

使用方法

  1. 安装依赖

    1
    2
    npm install xterm
    yarn add xterm

  2. 引入xterm

    1
    import { Terminal } from 'xterm'

  3. 相关的html代码

    1
    <div id="terminal"/>

  4. 相关的js代码

    1
    2
    3
    let term = new Terminal()
    term.open(document.getElementById('terminal'));
    term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')

常用配置

  • 字体
    • term.options.fontFamily = 'monospace'
  • 字号
    • term.options.fontSize = 12
  • 行号
    • term.options.lineHeight = 1.2
  • 主题配色
    • term.options.theme = {background: '#2b2b2b', foreground: '#A9B7C6', cursor: '#2b2b2b'}

常用插件

  • xterm-addon-fit

    提供terminal内容自适应

    1
    2
    3
    4
    5
    import { FitAddon } from 'xterm-addon-fit'

    const fitAddon = new FitAddon();
    term.loadAddon(fitAddon);
    fitAddon.fit()
1
2
3
4
5
6
7
8
9
10
11
https://*.githubusercontent.com/*
https://github.githubassets.com/*
https://github.com/*
[
  {
    "id": 166,
    "targets": [
      {"id": 1, "name": "hostname1"},
    ]
  }
]
Python

Python使用openpyxl读写excel

  • 读取excel的内容

    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
    wb = load_workbook('/Users/aka/Downloads/w_pyxl.xlsx')
    ws = wb['Sheet1']

    for row in ws.rows:  # 遍历所有行
        # 按索引取出每行的指定位置的值
        print(row[0].value, row[1].value, row[2].value, row[3].value)
        

    # 每行组合成字典返回
    def parse_ws(sheet):
        keys = []
        for index, row in enumerate(sheet.rows):
            if index == 0:
                for item in row:
                    keys.append(item.value)
                continue

            values = [x.value for x in row]
            yield dict(zip(keys, values))


    wb = load_workbook('/Users/aka/Downloads/w_pyxl.xlsx')
    ws = wb['Sheet1']
    for line in parse_ws(ws):
        print('姓名：', line['姓名'])   # 通过表头来取值

  • 生成excel文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    from openpyxl import Workbook

    wb = Workbook()
    ws = wb.active

    data = [
        ('张三', '一三班', '100'),
        ('李四', '一三班', '65'),
        ('王武', '一三班', '95')
    ]

    ws.append(('姓名', '班级', '分数'))
    for item in data:
        ws.append(item)

    wb.save('/Users/aka/Downloads/test.xlsx')
docker

使用buildx创建多架构镜像

参考文档1：https://docs.docker.com/buildx/working-with-buildx/#build-multi-platform-images

参考文档2：https://docs.docker.com/desktop/multi-arch/

需求

步骤

1. 启用 binfmt_misc

1
docker run --privileged --rm tonistiigi/binfmt --install all

2. 创建并切换构建器

1
2
3
docker buildx create --name mybuilder
docker buildx use mybuilder
docker buildx inspect --bootstrap

3. 构建镜像

1
docker buildx build --platform linux/amd64,linux/arm64 -t openspug/spug-service --push .
前端

flex布局元素被挤压

问题

先看个常见的需求，元素A 设置了固定宽度 100px，但当元素B内容过多时会挤压A的宽度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
  .container {
    display: flex;
    flex-direction: row;
    width: 200px;
    border: 1px solid #999;
  }
  .a {
    width: 100px;
  }
</style>

<div class="container">
  <div class="a">leiem.cn</div>
  <div>先看个常见的需求，元素A 设置了固定宽度 `100px`，但当元素B内容过多时会挤压A的宽度。</div>
</div>

image-20220511122609088

可以看到总宽度 200px 元素A 设置的宽度 100px 应该占据一半的空间，但展示的效果明显被挤压了。

解决方法

处理办法也很简单就是 flex-shrink 属性，该属性定义了当父元素主轴空间不足时子元素的缩小比例。具体怎么缩小还受其他属性的影响，我们这里就不展开详述了，因为大部分情况下也不会遇到那么复杂场景。

针对上述例子只需要在元素A上添加 flex-shrink: 0 即可解决。

1
2
3
4
.a {
  width: 100px;
  flex-shrink: 0;
}

添加后的效果，完美解决 😄

image-20220511123334535

python

Django ORM小记

对一些常用的小技巧记录。

select_for_update

select_for_update 可以做小并发的控制，其只能在事务中使用。符合条件的查询结果会被加锁，其他查询包含加锁的数据时会阻塞，直到事务完成，如果其他查询结果不包含加锁的记录则不受影响。

1
2
3
4
5
6
7
from django.db import transaction

with transaction.atomic():
  # 会给所有type = '1' 的记录加锁
  tickets = Ticket.objects.select_for_update().filter(type='1')
  # 单条记录加锁
  ticket = Ticket.objects.select_for_update().get(id=12)
前端

2分钟搞定React服务端渲染

什么是服务端渲染这里就再解释了，网上已经有很多详细的介绍了。

为什么需要服务端渲染

这里再说下为什么需要服务端渲染，最主要解决的问题就是解决 SEO 问题了，因为 React Vue 基于这些框架写出来的项目数据都是浏览器端动态调用后端接口获取的，包括页面的元素结构什么的都是放在 Js 文件里的。当爬虫来访问时只拿到了 <div id="app"></div> 这样一个空的 div 里边什么内容也没，十分不利于 SEO 。

有了上述的 SEO 问题，那么解决问题思路就很简单了，就是如何能让搜索引擎的爬虫爬到页面是包含了完整内容的。

如何实现

实现的方法也很多，大都是要启动个单独的服务来处理这些爬虫的请求。这里使用的是一个开源的解决方案 prerender 使用非常简单，需要有个 nodejs 运行环境，以下上官方的使用文档。

  1. 安装 pretender

    1
    npm install prerender

  2. 创建文件 server.js

    1
    2
    3
    const prerender = require('prerender');
    const server = prerender();
    server.start();

  3. 启动并测试

    1
    2
    3
    node server.js

    curl http://localhost:3000/render?url=https://www.example.com/

其原理就是启动一个 headless 的 chrome 浏览器，在渲染完成后把结果在返回给客户端。

如何部署

到服务器上部署的时候会有个麻烦的问题，服务器一般都是 Liunx 系统安装 chrome 比较麻烦，那么就可以通过 Docker 来完美解决这个问题了，我已经构建了这样一个镜像，如果要使用可以通过以下步骤使用。

  1. 获取镜像

    1
    docker pull registry.aliyuncs.com/leiem/prerender

  2. 启动容器

    1
    docker run -d --restart=always -p 3000:3000 registry.aliyuncs.com/leiem/prerender

  3. 配置Nginx规则

    1
    2
    3
    4
    5
    6
    7
    8
    location / {
        try_files $uri /index.html;

        if ($http_user_agent ~* "googlebot|bingbot|yandex|baiduspider") {
            rewrite .* /render?url=$scheme://$host$request_uri break;
            proxy_pass http://127.0.0.1:3000;
        }
    }

    上述规则会匹配常见的搜索引擎的 User-Agent，让这些请求通过我们搭建的服务去处理。

自己构建镜像

可以直接使用我制作好的镜像 registry.aliyuncs.com/leiem/prerender ，如果要自己构建镜像可参考以下文档。

  • Dockerfile

    1
    2
    3
    4
    5
    6
    7
    8
    FROM browserless/chrome
    USER root
    WORKDIR /usr/src/prerender
    COPY server.js package.json ./
    RUN npm install
    USER blessuser
    EXPOSE 3000
    CMD [ "npm", "run", "start" ]

  • server.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    const prerender = require('prerender')

    const server = prerender({
      followRedirects: true,
      chromeLocation: '/usr/bin/google-chrome',
      chromeFlags: [ '--no-sandbox', '--headless', '--disable-gpu', '--remote-debugging-port=9222', '--hide-scrollbars' ],
    })

    server.use(prerender.blockResources())
    server.use(prerender.removeScriptTags())
    // server.use(require('prerender-memory-cache'))
    server.start()

  • package.json

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    {
      "name": "leiem.cn",
      "version": "1.0.0",
      "license": "MIT",
      "dependencies": {
        "prerender": "5.19.0",
        "prerender-memory-cache": "1.0.2"
      },
      "scripts": {
        "start": "node server.js"
      }
    }
前端

Antd动态控制表单项

再来赞一波 antd 简直不要太好用 ♥️

Antd 的 Form 组件出场率还是非常高的，除了常规的表单各项填写并提交外，有些时候需要根据用户的操作对表单项做一些控制，废话不多说直接拿个例子说

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
import React from 'react';
import { Form, Select, Input } from 'antd';


export default function HomeIndex() {
  const [form] = Form.useForm()
  return (
    <Form form={form}>
      <Form.Item name="is_love" label="是否喜欢">
        <Select placeholder="请选择">
          <Select.Option value="1">是</Select.Option>
          <Select.Option value="0">否</Select.Option>
        </Select>
      </Form.Item>
      <Form.Item noStyle shouldUpdate>
        {({getFieldValue}) =>
          getFieldValue('is_love') === '0' ? (
            <Form.Item name="reason" label="原因">
              <Input placeholder="请输入"/>
            </Form.Item>
          ) : null
        }
      </Form.Item>
    </Form>
  )
}

以上例子会根据用户选择 是否喜欢 项，如果选择 否 则会出现新的表单项。可以看到这里主要使用了 shouldUpdate 属性，默认为 false 。当其值为 true 时则整个表单任何改动都会触发改项的重新渲染，其值也可以为一个函数，例如 shouldUpdate={(p, c) => p.is_love != c.is_love} 则意味着只有 is_love 的值发生变化时才会触发重新渲染。

前端

去除antd蓝色边框

先来赞一波 antd 简直不要太好用 ♥️

某些特殊情况下我们会隐藏例如 Input 或 Select 等组件的边框，边框很好隐藏，找到对应的 class 覆盖样式即可，但隐藏了边框会发现在获取焦点的时候还是会有一个淡蓝色的边框就像这样。

image-20220207213220054

下边分别介绍几个组件的边框隐藏方法。

Input 组件

通过观察可以发现有个 focus 的伪类中的 box-shadow 属性的效果

image-20220207213737163

知道了原因解决方法也很简单

1
2
3
:global(.ant-input):focus {
  box-shadow: none;
}

这里我使用了 CSS Modules 所以外层加了 :global ，大家可根据情况处理。

Select / Cascader / AutoComplete 组件

这几个组件表现形式相似，同样也是通过 box-shadow 属性实现的

image-20220207214702679

直接覆盖即可

1
2
3
:global(.ant-select-selector) {
  box-shadow: none !important;
}

InputNumber 组件

1
2
3
:global(.ant-input-number-focused) {
  box-shadow: none !important;
}

DatePicker 组件

1
2
3
:global(.ant-picker-focused) {
  box-shadow: none !important;
}