# 2022-1-6

# split() 还有第二个参数

"red,blue,green,yellow".split(',')
(4) ['red', 'blue', 'green', 'yellow']
"red,blue,green,yellow".split(',', 2)
(2) ['red', 'blue']
1
2
3
4

# 2022-2-8

# monaco-editor sql 提示

  • 新版 monaco-editor 注册 sql关键词等提示。
  • 可以自由选择加载某个语言包的关键词。
import { language as mysqlLanguage } from 'monaco-editor/esm/vs/basic-languages/mysql/mysql';

registerSql() {
        monaco.languages.registerCompletionItemProvider('sql', {
            provideCompletionItems: function(model, position) {
                var textUntilPosition = model.getValueInRange({
                    startLineNumber: position.lineNumber,
                    startColumn: 1,
                    endLineNumber: position.lineNumber,
                    endColumn: position.column
                });
                var match = textUntilPosition.match(/(\S+)$/);
                if (!match) return [];
                match = match[0].toUpperCase();
                var suggestions = [];
                //关键词
                mysqlLanguage.keywords.forEach(item => {
                    if (item.indexOf(match) !== -1) {
                        suggestions.push({
                            label: item,
                            kind: monaco.languages.CompletionItemKind.Keyword,
                            insertText: item
                        });
                    }
                });
                //算法
                mysqlLanguage.operators.forEach(item => {
                    if (item.indexOf(match) !== -1) {
                        suggestions.push({
                            label: item,
                            kind: monaco.languages.CompletionItemKind.Operator,
                            insertText: item
                        });
                    }
                });
                //内置函数
                mysqlLanguage.builtinFunctions.forEach(item => {
                    if (item.indexOf(match) !== -1) {
                        suggestions.push({
                            label: item,
                            kind: monaco.languages.CompletionItemKind.Function,
                            insertText: item
                        });
                    }
                });
                return {
                    suggestions
                };
            }
        });
    }
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
  • 参考 https://www.jianshu.com/p/b934c2b3cc99

# 2022-2-11

# [5, [[4, 3], 2, 1]] 的数组当作 (5 - ((4 - 3) - 2 - 1)) 进行分组的减法运算。

  • 方法一:可以采用正则替换加 eval()函数实现,代码如下:
const testData = [5,[2,[[3,1],[5,4]]]]
const replaceFun = (target) => {
	let targetStr = target + '';
	targetStr.replace(/\[/g,'(').replace(/\]/g,')').replace(/\,/g,'-')
	console.log(eval(targetStr)); //4
}
replaceFun(testData)
1
2
3
4
5
6
7
  • 方法二:采用递归加reduce()方法实现,代码如下:
/*
 * @Author: wangzhihao
 * @Date: 2022-02-11 10:00:56
 * @LastEditors: wangzhihao
 * @LastEditTime: 2022-02-11 10:07:07
 */
const testData = [5,[2,[[3,1],[5,4]]]]
function reduceSub(xs) {
  if (xs.length === 0) return 0
  var first = xs.shift()
  var initVal = Array.isArray(first) ? reduceSub(first) : first

  return xs.reduce((left, right) => {
    return left - (Array.isArray(right) ? reduceSub(right) : right)
  }, initVal)
}
console.log(reduceSub(testData)); //4
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 2022-2-16

# 网络小知识

  • 网络地址分为公网IP地址和局域网IP地址。
  • 公网和局域网之间无法直接通信。
  • 家里的路由器上有一个运营商提供的公网地址和一个局域网地址。
  • 家里的设备之间通信可以直接用局域网。
  • 访问万维网上的内容就要借助路由器的公网IP与万维网通信再与设备通信。(路由器作为中间人)
  • 路由器的管理页面一般是 局域网的第一个地址。比如你连上的地址是 127.16.27.119,你可以在浏览器打开127.16.27.1,就能打开管理页面了。

# curl curlip.me

  • 获取当前的IP地址信息

# 2022-3-14

# ES6 新增的操作对象的方法 Reflect对象

  • 判断对象上是否有某个属性
// 老写法
'assign' in Object // true

// 新写法
Reflect.has(Object, 'assign') // true
1
2
3
4
5
  • 删除对象上某个属性
Reflect.deleteProperty(this.ruleData, 'row');
1

# 2022-7-11

# node 默认内存限制 2G

  • 更改方式(设置 --max-old-space-size参数 )
"node --max-old-space-size=8192 src/index.js"
1

# 2022-7-20

# nth-child

# 前言

渲染列表时,需要设置前3个元素的 margin-bottom 值与其他的不同。

# 实现

:nth-child(-n+3){
     margin-bottom: 10px;
}
1
2
3

# 扩展

  • 选择前几个元素
/*【负方向范围】选择第1个到第6个 */
:nth-child(-n+6){}
1
2
  • 从第几个开始选择
/*【正方向范围】选择从第6个开始的 */
:nth-child(n+6){}
1
2
  • 两者结合使用,可以限制选择某一个范围
/*【限制范围】选择第6个到第9个,取两者的交集 */
:nth-child(-n+9):nth-child(n+6){}
1
2

# 2022-8-4

# 文件下载的几种方式

  • Blob 切片模式
handleDownLoadTu() {
      this.$toast({
          content: '下载中...',
          type: 'loading'
      });
      const params = {
          apiSymbol: this.formData.apiSymbol,
          apiVersion: this.formData.apiVersion
      };
      _downTempLate(params, {
          responseType: 'blob'
      })
          .then(res => {
              const blob = new Blob([res.data], { type: res.headers['content-type'] });
              const content = res.headers['content-disposition']; // 注意是全小写,自定义的header也是全小写
              if (content) {
                  let name = content.split('filename=')[1]; // 获取filename的值
                  name = decodeURIComponent(name);
                  let downloadElement = document.createElement('a');
                  let href = window.URL.createObjectURL(blob); //创建下载的链接
                  downloadElement.href = href;
                  name = name.replace(/\"/g, '');
                  downloadElement.download = name; //下载后文件名
                  document.body.appendChild(downloadElement);
                  downloadElement.click(); //点击下载
                  document.body.removeChild(downloadElement); //下载完成移除元素
                  window.URL.revokeObjectURL(href); //释放掉blob对象
                  this.$toast.hide();
                  this.message.success('文件下载成功');
              }
          })
          .catch(err => {
              this.message.error(err);
              this.$toast.hide();
          });
  },
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
28
29
30
31
32
33
34
35
36
  • 走浏览器 a 标签下载
downloadTempLate() {
    if (!this.formData.apiSymbol) {
        this.message.warning('请先选中API后,在进行操作。');
        return;
    }
    let fileNames = this.apiSymbol + '.csv';
    let link = document.createElement('a');
    link.style.display = 'none';
    console.log(this.formData, 'llll'); //jing-log
    link.href = `/api/oneservice/testData/downTempLate`;
    link.setAttribute('download', decodeURI(fileNames));
    document.body.appendChild(link);
    link.click();
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 2022-8-11

# git merge 后还没提交,发现不想 merge 这次的代码怎么操作

git merge --abort
1

# 2022-8-16

# nginx 配置支持前端 history 路由

location / {
    root   html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
}
1
2
3
4
5
  • root 代表网站根目录,这里放的是 html 文件夹。(装nginx默认就有的)
  • index 代表的是首页,这里放的是 index.html 或者 index.htm
  • try_files 这个属性的意思是尝试着访问下这个路径$uri代表的就是访问路径栏对应的文件。要是还找不到,就把$uri/当成一个文件夹去访问该文件夹下的index.html。最后还找不到就去访问单页应用的/index.html

# 2022-8-25

# iconfont 添加项目所有图表到购物车方法

[...document.getElementsByClassName('block-icon-list')[1].children].forEach(item => {
    item.lastChild.firstChild.click();
})
1
2
3