[TOC]

1、antd-Pro项目创建

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$ mkdir <your-project-name>
$ cd <your-project-name>
$ yarn create umi  # or npm create umi
---------------------
推荐或者
1、创建文件夹，用ide打开
2、cnpm create umi

# Choose ant-design-pro:
 Select the boilerplate type (Use arrow keys)
❯ ant-design-pro  - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
  app             - Create project with a simple boilerplate, support typescript.
  block           - Create a umi block.
  library         - Create a library with umi.
  plugin          - Create a umi plugin.

$ git init
$ npm install
$ npm start         # visit http://localhost:8000

2、在 React / Vue / Angular 中使用 G2

基于 AntV 技术栈还有许多优秀的项目，在 React 环境下使用 G2，我们推荐使用 BizCharts 和 Viser-react！这两个产品都是基于 G2 的 React 版本封装，使用体验更符合 React 技术栈的习惯，他们都与 AntV 有着紧密的协同，他们很快也将同步开源和发布基于 G2 4.0 的版本。

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
 onSelect = (val, option) => {
const initData = this.state.getByServerData;
  const fitList = initData.filter(r => r.ipAddress === option.props.text);
const dataSource = { items: fitList, totalCount: fitList.length };
const { items, totalCount } = dataSource;
this.setState({ pageIndex: 1, items, totalCount, listloading: false, isSeach: true })
}

   handleSearch = value => value ? this.tabGetList(0, 10, value) : this.tabGetList(0, 10, null) && this.setState({ isSeach: false });

  renderOption = item => (<Option key={item.id} text={item.ipAddress}>
    <div className="global-search-item">
    <span className="global-search-item-desc">{item.ipAddress}</span>
  <span className="global-search-item-count">{item.manager.split('&')[0]} </span>
  </div>
  </Option>);

		 render() {
		   const { data, total, current, getByServerData, isSeach } = this.state;


			 const seachResults = getByServerData.length > 0 ? getByServerData.map(r => {
		   return this.renderOption(r);
		   }) : [];


return (
  <>
    <Row gutter={16} className={cls.searchRow}>

      <Search placeholder='输入查询条件进行搜索'
        seachResults={seachResults}
        onSelect={this.onSelect}
        handleSearch={this.handleSearch}
      />

    </Row>

3、react下载和跳转链接

4、form表单提交

5、·树treenode

6、禁用disabled

1
2
3
4
5
<div style={{pointerEvents:'none'}} >
  <Space size="middle">
    <Checkbox.Group  options={this.state.Options} defaultValue={text}/>
  </Space>
</div>

同一行

1
style={{verticalAlign:'middle', marginTop:'0'}}

7、格式化\n\t

<pre></pre>

8、时间戳转Data转字符串

1
StringTime=moment(new Date(时间戳)).format('YYYY-MM-DD HH:mm:ss');

9、字符串转Data

1
moment(StringTime, "HH:mm:ss"),

10、Data moment

①Data转时间戳
1
moment().valueOf()
②获取当前时间
1
console.log(moment().locale('zh-cn').format('YYYY-MM-DD HH:mm:ss'))
③获取当前时间戳
1
console.log(moment().locale('zh-cn').valueOf())
④时间头尾(主要格式化一定要HH:mm:ss)
1
2
moment().startOf('day').format('YYYY-MM-DD HH:mm:ss');//2021-1-28 00:00:00
moment().endOf('day').format('YYYY-MM-DD HH:mm:ss');//2021-1-28 23:59:59
⑤时间（string）加减法
1
2
moment(this.state.endTime, "YYYY-MM-DD").add(1, 'days').format("YYYY-MM-DD")
moment().subtract(7, 'days');
Key Shorthand
years y
quarters Q
months M
weeks w
days d
hours h
minutes m
seconds s

11、a标签居中：设置为block，添加宽度，标签居中，文本居中

1
<a   style={{width:'100px',display:'block',margin:'0 auto',textAlign:'center'}}>  XXX  </a>

12、js获取对象的长度

1
Object.keys(对象名称).length

13、js获取对象的key

1
Object.keys(对象名称) //是一个数组 ["xx", "xx", "xx", "xxx", "x"]

14、js获取对象的value

1
Object.values(对象名称) //是一个数组 ["xx", "xx", "xx", "xxx", "x"]

15、下载excel 下载zip 计算md5和获取视频时长

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
beforeUpload: file => {
       this.setState(state => ({
         fileList: [...state.fileList, file],
       }));

       //计算文件md5值
       let fileReader = new FileReader(),    //创建FileReader实例
         time;
       fileReader.readAsBinaryString( file );    //通过fileReader读取文件二进制码
       fileReader.onload = (e)=> {    //FileReader的load事件，当文件读取完毕时触发
         this.state.md5Value=SparkMD5.hashBinary(e.target.result);
         console.log(this.state.md5Value)
       }

       //获取视频时长
       let url = URL.createObjectURL(file);
       let audioElement = new Audio(url);
       let duration;
       audioElement.addEventListener("loadedmetadata",  (_event)=> {
         this.state.mediaTimeAuto=parseInt(audioElement.duration)+1;
         this.formRef.current.setFieldsValue({ runningTime:this.state.mediaTimeAuto });
       });


       return false;
     },

FastDFS上传文件访问url地址直接下载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
fdfs 存储节点storage安装nginx,修改nginx配置文件

location ~/group[1-9]/M00 {

 if ( $query_string ~* ^(.*)parameter=config\b|1\b(.*)$ ){

        add_header Content-Disposition "attachment;";

        }

    root /fdfs/storage/data;

    ngx_fastdfs_module;

}

在文件url地址后面加 ?parameter=1 ，直接下载文件

例: 192.168.100.100:8888/group1/M00/00/15/dgECTl3d4CuAqGuAADaHFkU0005.jpg?parameter=1

16、表格隐藏列

1
2
3
<标签+id>
.less文件写style
.jsx里面导入

17、表格多选框默认选择某几行（以默认全选为例）

tip：表格渲染变化是根据你是state有没有改变，所以一定要用setState

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
//数据导入
  componentWillMount(){
    for(let i=0;i<this.state.deviceDataSource.length;i++){
      this.state.selectedRowKeys=[...this.state.selectedRowKeys,i.toString()]
    }
    for(let i=0;i<this.state.deviceDataSource.length;i++){//保存每行数据
      this.state.selectedRows=[...this.state.selectedRows,this.state.deviceDataSource[i]]
    }
  }

    const {selectedRowKeys} = this.state;//细节，立刻写在下面上方
    const rowSelection_device = {
      type:'checkbox',
      selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        this.setState({
          selectedRowKeys: selectedRowKeys,
          selectedRows:selectedRows,
        })
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      },
      getCheckboxProps:	(record)=>{
        defaultChecked: selectedRowKeys.includes(`${record.key}`)//每行循环判断是否为true，若是则勾选
      },
    };

18、js 取字符串中某段

1
2
text.substr(from,length) 
text.substring(start,end)

19、Link传值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
传数据
<Link to={
  {
    pathname:`/garbagedelivery/TrashBag/TrashBagDetail`,
    state:record,
    或
    state:{
             ad_dateSource:this.state.ad_record,
             play_plan:this.state.selectedRows,
          },
  }
}>
	<Button>....
</Link>
    
取数据
Data:this.props.location.state, // Link传入的数据

20、PUT POST GET

方发之间的区别：

1、PUT和POST

PUT和POS都有更改指定URI的语义.但PUT被定义为idempotent的方法，POST则不是.idempotent的方法:如果一个方法重复执行

多次，产生的效果是一样的，那就是idempotent的。也就是说：

PUT请求：如果两个请求相同，后一个请求会把第一个请求覆盖掉。（所以PUT用来改资源）

Post请求：后一个请求不会把第一个请求覆盖掉。（所以Post用来增资源）

2、get和post

1、GET参数通过URL传递，POST放在Request body中。

2、GET请求会被浏览器主动cache，而POST不会，除非手动设置。

3、GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。

4、Get 请求中有非 ASCII 字符，会在请求之前进行转码，POST不用，因为POST在Request body中，通过 MIME，也就可以传输非 ASCII 字符。

5、 一般我们在浏览器输入一个网址访问网站都是GET请求

6、HTTP的底层是TCP/IP。HTTP只是个行为准则，而TCP才是GET和POST怎么实现的基本。GET/POST都是TCP链接。GET和POST能做的事情是一样一样的。但是请求的数据量太大对浏览器和服务器都是很大负担。所以业界有了不成文规定，（大多数）浏览器通常都会限制url长度在2K个字节，而（大多数）服务器最多处理64K大小的url。

7、GET产生一个TCP数据包；POST产生两个TCP数据包。对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。

8、在网络环境好的情况下，发一次包的时间和发两次包的时间差别基本可以无视。而在网络环境差的情况下，两次包的TCP在验证数据包完整性上，有非常大的优点。但并不是所有浏览器都会在POST中发送两次包，Firefox就只发送一次。

21、获取回收指南（二进制文件流）

1
2
3
4
5
6
7
8
9
10
11
12
13
getRecyclGuide=()=>{
  fetch(rootPath1+"/api/garbage/delivery/classification/query/getRecyclGuide").then((response) => {
    response.blob().then((blob)=>{
      let html = new FileReader();
      html.readAsText(blob, 'utf-8');
      html.onload=function(e)
      {
        let result=document.getElementById("result");
        result.innerHTML=html.result;
      }
    })
  });
}

22、字节流base-64解码

1
2
3
4
5
6
7
let t=atob(base64)   //window.btoa 与 window.atob 不支持中文

> window.btoa(encodeURIComponent('中文'))
"JUU0JUI4JUFEJUU2JTk2JTg3"

> decodeURIComponent(window.atob('JUU0JUI4JUFEJUU2JTk2JTg3'))
"中文"

23、JS计算日期相差天数：2021-01-01 2021-01-03

1
2
3
4
5
6
7
function GetDateDiff(startDate,endDate)
{
var startTime = new Date(Date.parse(startDate.replace(/-/g, "/"))).getTime();
var endTime = new Date(Date.parse(endDate.replace(/-/g, "/"))).getTime();
var dates = Math.abs((startTime - endTime))/(1000*60*60*24);
return dates;
}

24、JS 浅、深拷贝

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
 浅：
 var obj1 = {
    a: 1,
    b: 2,
    c: 3
}
 var obj2=obj1
 
 
 深：
 1、乞丐版——使用JSON.stringify()以及JSON.parse()不可以拷贝 undefined ， function， RegExp 等等类型的
 var obj1 = {
    a: 1,
    b: 2,
    c: 3
}
var objString = JSON.stringify(obj1);
var obj2 = JSON.parse(objString);
obj2.a = 5;
console.log(obj1.a);  // 1
console.log(obj2.a); // 5

2、Object.assign(target, source)——多层嵌套有问题
 var obj1 = {
    a: 1,
    b: 2,
    c: 3
}
var obj2 = Object.assign({}, obj1);
obj2.b = 5;
console.log(obj1.b); // 2
console.log(obj2.b); // 5
----------------------------------------------------
 var obj1 = {
    a: 1,
    b: 2,
    c: ['a','b','c']
}
var obj2 = Object.assign({}, obj1);
obj2.c[1] = 5;
console.log(obj1.c); // ["a", 5, "c"]
console.log(obj2.c); // ["a", 5, "c"]

3、递归拷贝
// 定义一个深拷贝函数  接收目标target参数
function deepClone(target) {
    // 定义一个变量
    let result;
    // 如果当前需要深拷贝的是一个对象的话
    if (typeof target === 'object') {
    // 如果是一个数组的话
        if (Array.isArray(target)) {
            result = []; // 将result赋值为一个数组，并且执行遍历
            for (let i in target) {
                // 递归克隆数组中的每一项
                result.push(deepClone(target[i]))
            }
         // 判断如果当前的值是null的话；直接赋值为null
        } else if(target===null) {
            result = null;
         // 判断如果当前的值是一个RegExp对象的话，直接赋值    
        } else if(target.constructor===RegExp){
            result = target;
        }else {
         // 否则是普通对象，直接for in循环，递归赋值对象的所有值
            result = {};
            for (let i in target) {
                result[i] = deepClone(target[i]);
            }
        }
     // 如果不是对象的话，就是基本数据类型，那么直接赋值
    } else {
        result = target;
    }
     // 返回最终结果
    return result;
}
---------------------------------------
        let obj1 = {
        a: {
            c: /a/,
            d: undefined,
            b: null
        },
        b: function () {
            console.log(this.a)
        },
        c: [
            {
                a: 'c',
                b: /b/,
                c: undefined
            },
            'a',
            3
        ]
    }
    let obj2 = deepClone(obj1);
        console.log(obj2);
1
2
3
4
5
6
7
8
9
10
11
12
13
//base64可能有用
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

 previewImage = await getBase64(file.originFileObj);

 <img alt="example" style={{ width: '100%' }} src={previewImage} />

25、保留小数点后两位

1
2
Math.round(number * 100) / 100  // 四舍五入
number.toFixed(2)  //无四舍五入

26、HTTP协议POST服务器：json与form表单的区别

1、form

1
2
3
4
5
6
7
头：数据类型：Content-Type:application/x-www-form-urlencoded（数据格式）;charset=UTF-8（编码格式）
const formData = new FormData();
formData.append('xxx',xxx);
fetch('xxx',{
    method: 'post',
    body: formData,
}).then(()=>{...})

2、json（对象数组）

1
2
3
4
5
6
7
8
9
头：数据类型：Content-Type:application/json（数据格式）;charset=UTF-8（编码格式，根据情况填写）
let arr = [];
let Obj = new Object();
Obj.xxx = xxx;
arr.push(Obj);
fetch('xxx',{
    method: 'post',
    body: JSON.stringify(arr),//或直接[JSON.stringify({xxx:xxx,xxx:xxx})] （可能）
}).then(()=>{...})