文章 | 学习笔记

常用工具

[[toc]] 日常工具代码转图片 ; 正则表达式可视化工具 ; 在线调色板 ; web开发文档 ; 免版权插图 ; 娱乐社区社区 Github (https://github.com/zhanghaijun666) ：全球最大开源社区。; CSDN (https://blog.csdn.net/) ：老牌中文技术博客社区。; 掘金 (https...

大约 7 分钟

CSS命名规范

CSS 的命名，采用 BEM 命名规范，可以有效的避免组件间样式的相互污染，减少嵌套层级。具体规则如下：

BEM 是什么?

BEM 使用分隔符将类名区隔成三个部分：

[prefix]-[block]__[element]--[modifier]

prefix：全局的前缀，这里指代表 tdesign 的前缀，也就是 t-
Block(块) ：组件的最外层父元素，这个类包含最通用和可重用的功能。
Element(元素) ：组件内可包含一个或多个元素，元素为块添加了新功能。无需重置任何属性。
Modifier(修饰类) ：块或元素都可以通过修饰词来表示为变体。

大约 5 分钟

组件的命名

按照设计师和前端工程师的共同认知进行命名和归类

基础(Basic)	布局(Layout)	导航(Navigations)	数据类(Data)	沟通类（Notice）	输入类(Input)	其他 Others
色彩 Color	布局 Layout	选项卡 Tabs	图表 Diagram	全局提醒 Message	输入框 Input	模态抽屉 Drawer
字体 Fonts	栅格 Grid	步骤条 Steps	列表 List	文字提示 Tootip	日期选择器 DatePicker	锚点 Anchor
图标 Icon	卡片 Card	面包屑 Breadcrumb	表格 Table	加载中 Loading	时间选择器 TimePicker	标签 Tag
动效 Motion	走马灯 Carousel	分页 Pagination	表单 Form	警告提示 Alert	单选框 Radio
按钮 Button	分割线 Divider	导航菜单 Menu	树 Tree	徽标数 Badge	多选框 Checkbox
				用户引导 Onboarding	搜索框 Search
				气泡确认 Popconfirm	穿梭框 Transfer
				对话框 Dialog	下拉菜单 Dropdown
				消息通知 Notification	树选择 TreeSelect
					上传 Upload
					开关 Switch
					选择器 Select

小于 1 分钟

邮件配置

测试邮件

## 安装依赖
yum install -y sendemail mailx
## 发送测试邮件
sendemail -f dev@bjtxra.com -t zhanghaijun@bjtxra.com -s smtp.exmail.qq.com:587 -xu dev@bjtxra.com -xp 'Bedrock123!@#' -u "Test Email" -m "This is a test email."

小于 1 分钟

家庭系统搭建

需求

全屋 Wifi
全屋 Wifi-软路由（非必须）
存储中心（例如 NAS、群晖）
存储中心-支持手机图片同步
存储中心-支持电视点播影视作品
存储中心-支持网盘备份

群晖

小于 1 分钟

SSH配置多个GIT平台

1、Git全局配置

如果之前设置过全局的user.name和user.email, 需要先删掉，删除命令如下

# 查看全局配置
git config --global --list
# 删除全局配置的用户名
git config --global --unset user.name
# 删除全局配置的邮箱
git config --global --unset user.email

大约 1 分钟

Linux中磁盘管理

一、磁盘分区

在Linux下，磁盘格式化、分区和挂载的详细步骤如下所示：

1.确定磁盘设备

使用以下命令来查看可用磁盘设备：

fdisk -l
# Disk /dev/mmcblk1: 7456 MB, 7818182656 bytes, 15269888 sectors
# 238592 cylinders, 4 heads, 16 sectors/track
# Units: sectors of 1 * 512 = 512 bytes

# Disk /dev/mmcblk1 doesn't contain a valid partition table
# Disk /dev/mmcblk1boot0: 4 MB, 4194304 bytes, 8192 sectors
# 128 cylinders, 4 heads, 16 sectors/track
# Units: sectors of 1 * 512 = 512 bytes

# Disk /dev/mmcblk1boot0 doesn't contain a valid partition table
# Disk /dev/mmcblk1boot1: 4 MB, 4194304 bytes, 8192 sectors
# 128 cylinders, 4 heads, 16 sectors/track
# Units: sectors of 1 * 512 = 512 bytes

# Disk /dev/mmcblk1boot1 doesn't contain a valid partition table
# Disk /dev/mmcblk0: 15 GB, 15931539456 bytes, 31116288 sectors
# 486192 cylinders, 4 heads, 16 sectors/track
# Units: sectors of 1 * 512 = 512 bytes

# Device       Boot StartCHS    EndCHS        StartLBA     EndLBA    Sectors  Size Id Type
# /dev/mmcblk0p1 *  0,32,33     8,73,1            2048     133119     131072 64.0M  c Win95 FAT32 (LBA)
# /dev/mmcblk0p2    8,73,2      912,229,21      133120   31116287   30983168 14.7G 83 Linux

大约 10 分钟

美化Centos的终端

Centos的终端用起来太单一了。想着换成zsh终端，并配合oh my zsh的主题。从而打造不一样的终端吧。

大约 1 分钟

用proxy改造你的console

解决方案

方案一，通过ast解析console 将变量名放在console后面，奈何esbuild不支持ast操作(不是我不会哈哈哈哈), 故放弃。

方案二，既然vue能代理对象，那么console是不是也能被代理。

实践

第一步代理console,将原始的console,用全局变量originConsole保存起来，以便后续使用 withLogging 函数拦截console.log 重写log参数

js复制代码const originConsole = window.console; 
var console = new Proxy(window.console, { 
    get(target, property) { 
    if(property === 'log') { 
        return withLogging(target[property]) 
    } 
    return target[property] }, 
})

大约 1 分钟

Jar瘦身实例

1、依赖拆分配置

只需要在项目pom.xml文件中添加下面的配置：

 <build>
  <plugins>
    <plugin>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-maven-plugin</artifactId>
    <configuration>
      <executable>true</executable>
      <layout>ZIP</layout>
      <!-- 这里是填写需要包含进去的jar，
          必须项目中的某些模块，会经常变动，那么就应该将其坐标写进来
          如果没有则nothing ，表示不打包依赖 -->
      <includes>
        <include>
          <groupId>nothing</groupId>
          <artifactId>nothing</artifactId>
        </include>
        <!-- 除了第三方依赖，会将子模块的引用加进来 -->
        <!-- 
        <include>
          <groupId>com.example</groupId>
          <artifactId>example-util</artifactId>
        </include> 
        -->
      </includes>
    </configuration>
   </plugin>
   <!--拷贝依赖到jar外面的lib目录-->
   <plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-dependency-plugin</artifactId>
    <executions>
      <execution>
        <id>copy</id>
        <phase>package</phase>
        <goals>
          <goal>copy-dependencies</goal>
        </goals>
        <configuration>
          <!--指定的依赖路径-->
          <outputDirectory>${project.build.directory}/lib</outputDirectory>
        </configuration>
      </execution>
    </executions>
   </plugin>
  </plugins>
 </build>

大约 2 分钟

...

跳转到: