Python学习笔记

好,2019年12月24日,圣诞节。今天开始开坑学Python了!~目标是Django后端框架
资料就看廖雪峰老师的blog了。后面会陆陆续续更新这篇文章。

1,map和reduce函数的问题

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
    #map比较容易理解,迭代后面的元素,每个元素用前面的函数运算
    #reduce是把后面一个序列的前两个元素做函数运算,然后把结果再和后面的继续运算,reduce要import
    #reduce(f, [x1, x2, x3, x4]) = f(f(f(x1, x2), x3), x4) 那reduce就是返回前面第一个参数返回的结果
    #下面这个例子把str转换为int
    from functools import reduce

    def fn(x,y):
        return x*10 + y

    def char2num(s):
        digits = {'0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9}
        return digits[s]

    reduce(fn,map(char2num,'13579')

    #简化的写法看下面
    #原文里面还有一个lambda函数,后面会看到,暂时不会
    from functools import reduce

    DIGITS = {'0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9}

    def str2int(s):
        def fn(x, y):
            return x * 10 + y
        def char2num(s):
            return DIGITS[s]
        return reduce(fn, map(char2num, s))

    #练习1:把用户输入的不规范的英文名字,变为首字母大写,其他小写的规范名字
    def format(L):
    def cap(s):
        return s.capitalize()
    return map(cap,L)
    #测试OK  list(format(['adam', 'LISA', 'barT']))  输出['Adam', 'Lisa', 'Bart']

    #练习2:编写一个prod()函数,可以接受一个list并利用reduce()求积:
    #请编写一个prod()函数,可以接受一个list并利用reduce()求积:
    from functools import reduce
    def prod(L):
        def multi(a,b):
            return a*b
        return reduce(multi,L)
    #测试OK prod([2,3,4]),输出24

    #练习3:利用map和reduce编写一个str2float函数,把字符串'123.456'转换成浮点数123.456:

有一个问题就是python里面貌似是next()过了以后,下次调用就停在那个位置了。比如我s=map(char2num,’13579′)以后,第一次reduce(fn,s)是ok的,但是马上再来一次就会Traceback报错,以后再看。

CSS笔记-持续更新

这部分内容很多是参考这个CSS经典面试题,总结的不错。还有W3School的示例。
css经典面试题汇总

1,用position定位水平垂直居中一个元素的例子
第一种情况是不知道中间那个span的宽和高。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    .outer{
        width: 300px;
        height: 300px;
        background-color: tomato;
        position: relative;
    }
    span{
        /* float:left; */
        position:absolute;
        background-color:pink;
        top:50%;
        left:50%;
        /* transform:translate(-50%,-50%); */
        /* 上面这行代码如果没有的话,元素的左上角那个点会正好在中心 */
    }


因为当中的span的position是absolute的,所以他的left和top是看包裹他的外面的元素。如果.outer的div没有position,span会去看最外层页面居中。
绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。

第二种情况是已知元素的宽高

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    .outer{
        width: 300px;
        height: 300px;
        position: relative;
        background-color: tomato;
    }
   
    span{
        float:left;
        text-align: center;/* 文字的水平居中 */
        line-height: 50px;/* 让文字的行高和容器的行高相等,实现简易的文字垂直居中 */
        position: absolute;
        background-color: pink;
        width: 150px;
        height: 50px;
        top: 50%;
        left: 50%;
        /* margin:-25px 0 0 -75px; */
        margin-top: -25px;
        margin-left: -75px;
    }

如果知道高度和宽度,就可以用具体的宽度数值去调整margin

2,块格式化上下文Block Fomatting Context的理解
Working on it…

3,水平居中一个div

1
2
3
4
5
    .center{
        margin:auto;
        width: 70%;
        background-color: tomato;
    }

因为div是块级元素,所以可以通过调整其宽度的方法来实现居中。

4,垂直水平居中一个div,用position:abosolute

1
2
3
4
5
6
7
8
9
10
11
12
    .center{
        border:1px solid black;
        position:absolute;
        width: 200px;
        height: 100px;
        background-color: tomato;
        margin: auto;
        left:0;
        right: 0;
        top: 0;
        bottom: 0;
    }

指定宽度和高度以后,用绝对定位,指定marigin:auto。上下左右全都0

5,display属性
就记住inline block flex 和none吧…其他估计也不太会用

6,用CSS画一个三角形
这个感觉比较有意思,参考以下:
css draw triangle
首先是想象一个正方形,然后他有四个比较粗的边框,边框的交汇处会出现三角形。
然后其实这个正方形边框里面的宽度和高度都是0,就是content的宽高。
这样一来,比如上面左边右边的边框是透明的话,看上去就只有下面一个边框是三角形了。

1
2
3
4
5
6
7
8
    .arrow_up{
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-bottom: 100px solid tomato;
    }

最后效果:

7,画一个全屏的品字。
这里的做法我和上面的链接稍微有点不太一样,第一行是一样的。第二行的两个方块感觉如果用flex布局的话也可以。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    .square{
        width:300px;
        height:300px;
        background-color: tomato;
        border-radius: 8px;
    }
    .square.top{
        margin:0 auto;/* 让第一行的方块居中 */
    }
    .square.below{
        margin:10px;/* 让第二行的方块有上边距 */
    }
    .line2{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
    }

发现margin的调整也可以放在html的内联样式表里面操作。不知道一般的做法是不是这样。

8,确定Containing Block
在确定尺寸和位置的时候,要看这个元素是参照谁去计算的。感觉下面这个链接写的比较通俗易懂吧,其实在查看网上资料的时候发现这个问题有很多情况的讨论,不过这里只写简单的。
“一个元素的尺寸和位置经常受其包含块的影响。大多数情况下,包含块就是这个元素最近的祖先块元素的内容区,但也不是总是这样。”

Explain Containing Block
(1)如果position为static或relative(最一般的情况或者默认情况)Containing Block就是最近的祖先块元素的内容区域。

第一个例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    body{
        background-color: pink;
    }
    section{
        display: block;
        width: 400px;
        height: 160px;
        background-color: salmon;
    }
    p{
        background-color: tomato;
        width:50%;/* 因为p是position为static的,所以section的content部分就是他的包含快 width=400*0.5 */
        height:25%;/* 同理,height=160*25% */
        margin:5%;/* margin的百分数是相对于父元素的 width 计算的。w3school的外边距这里有写,所以是400*0.05=20px */
        padding:5%;/* 400*0.05=20px */
        /* 为什么要确定Containing Box 因为比如margin和padding都是要根据包含块的width来计算的,注意上下margin的塌陷,这个笔记的第九条 */
    }

第二个例子:(最近的元素是inline,不是块元素,所以他看的是最外层的Body)

1
2
3
4
5
6
7
8
9
10
11
12
    body{
        background-color: pink;
    }
    section{
        display: inline;/* inline是把他变成行内元素,然后他又没有内容,所以啥都没显示 */
        background-color: salmon;
    }
    p{
        background-color: tomato;
        width:50%;/* 因为section不是块元素,所以他的50%是body的50% */
        height:200px;/*这里如果写百分比的话,会自动变成0*/
    }

(2)如果position为absolute,则Containing Block就是最近不为static的祖先元素内边距的边缘区域,如果没有就是最外面的视窗。

第三个例子:
这个示例中,P 元素的包含块是 section,因为 section 的 position 为 absolute 。P 元素的百分值会受其包含块的 padding 所影响。不过,如果包含块的 box-sizing 值设置为 border-box ,就没有这个问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    body{
        background-color: pink;
    }
    section{
        position: absolute;/* 首先这个section是absolute的,所以他的containing box是body */
        background-color: salmon;/* 背景颜色是content+padding的部分 */
        left:30px;
        top:30px;
        width: 400px;
        height: 160px;
        padding:30px 20px;
    }
    p{
        position: absolute;/* 这个p元素的containing box是section的包括padding的部分 */
        background-color: tomato;
        width: 50%;/* (400+20+20)*0.5=220px padding的部分也要计算进去的*/
        height: 25%;/* (160+30+30)*0.25=55px 同样考虑padding的距离*/
        margin: 5%;/* (400+20+20)*0.05=22px */
        padding: 5%;/* (400+20+20)*0.05=22px */
        /* top:auto; 如果position是absolute的时候,并且外面Containing Box是block的情况,top和left,当然还有bottom和right都是auto*/
        /* left:auto; 在这里注释掉这个或者不注释掉是一样的*/
    }

(3)如果position为fixed,则Containing Block就是最外层视窗。(这个例子不写了,比较容易理解。)
[注]上面这三点是比较粗略的判断方法,实际可能还有其他情况,看了一下不是很懂就稍微忽略了一下。。。

9,margin在上下的情况下对齐会出现两种情况:
(1)上下margin的时候会取较大值发生合并。这个比较容易理解。
(2)上下塌陷现象。一个大盒子中包含一个小盒子,给小盒子设置一个margin-top,大盒子会一起向下平移。
理解了BFC以后会补充这部分内容,continuing…

10,display和position
浮动和绝对定位不能同时定义。但是浮动和相对定位是可以同时定义的。
display属性规定元素应该生成框的类型。(是块级元素还是内联元素。还有很多别的先不纠结)
position是定位。相对定位,还是绝对定位。

11,理解float
用float的初衷是让文字环绕图片。如果要一个三栏的布局,感觉还是考虑Flex布局的方法比较好。
文字环绕图片的话,比较容易出现一个问题就是外面比如有个div,让这两个东西被包括在这个div里面。但是呢,里面两个都是浮动元素,所以他们一脱离普通文档流,
外面包裹的div就没有高度了。对于这种情况,有几种常见的处理方法:
(1)手动设置外面div的高度->最好不要用
(2)用空div去清空浮动clear->这个方法比较好,但是貌似现在不是最主流的。
(3)定义伪类清空浮动->还要学一下伪类才行啊。。。暂时先不看这个,恩。

Flex布局的示例

Flex布局是很常用的!
主要参考阮一峰的blog
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
css什么不太会…刚刚开始学,如果看到写的很傻的地方求不黑。

示例1:

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
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>flex_eg2</title>
        <link rel="stylesheet" type="text/css" href="flex_eg2.css"/>
    </head>
    <body>
        <div class="Container">
            <div class="Grid">1/2</div>
            <div class="Grid">1/2</div>
        </div>
        <div class="Container">
            <div class="Grid">1/3</div>
            <div class="Grid">1/3</div>
            <div class="Grid">1/3</div>
        </div>
        <div class="Container">
            <div class="Grid">1/4</div>
            <div class="Grid">1/4</div>
            <div class="Grid">1/4</div>
            <div class="Grid">1/4</div>
        </div>
    </body>
    </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    .Container{
        width: 100%;
        height:120px;
        display: flex;
    }

    .Grid{
        background-color:gainsboro;
        border-radius: 10px;
        height: 100px;
        width: 100px;
        margin: 5px;
        text-align: center;/*内部文字水平居中*/
        line-height: 100px;/*内部文字垂直居中 要算一下高度*/
        flex: 1;/*flex的第一个参数是flex-grow,相当于自动扩展*/
    }

最后效果:

示例2:百分比布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>flex_eg3</title>
        <link rel="stylesheet" type="text/css" href="flex_eg3.css"/>
    </head>
    <body>
        <div class="Grid">
            <div class="Grid-cell u-1of2">1/2</div>
            <div class="Grid-cell">auto</div>
            <div class="Grid-cell">auto</div>
        </div>
        <div class="Grid">
            <div class="Grid-cell u-1of4">1/4</div>
            <div class="Grid-cell">auto</div>
            <div class="Grid-cell u-1of3">1/3</div>
        </div>
        <div class="Grid">
            <div class="Grid-cell">auto</div>
            <div class="Grid-cell u-1of3">1/3</div>
        </div>
    </body>
    </html>

css文件

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
    *{
        font-family: sans-serif;
    }

    .Grid{
        display: flex;
        border-radius: 10px;
        background-color: bisque;
        width: 100%;
        height:120px;
    }

    /* flow-grow为1 这里都没写宽度,反正是按照比例填满的*/
    /*这个是auto的格子*/
    .Grid-cell{
        background-color:pink;
        border-radius: 10px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        flex:1;
        margin: 5px;
    }

    /* flex前面两个0就代表既不flex-grow也不flex-shrink保持大小不变 */
    /*不管别的怎么变,他就是25%的意思,不知道这么理解对不对哦*/
    .Grid-cell.u-1of4{
        background-color:skyblue;
        border-radius: 10px;
        margin: 5px;
        text-align: center;
        line-height: 100px;
        height: 100px;
        flex: 0 0 25%;
    }

    .Grid-cell.u-1of3{
        background-color:snow;
        border-radius: 10px;
        margin: 5px;
        text-align: center;
        line-height: 100px;
        height: 100px;
        flex: 0 0 33.3333%;
    }

    .Grid-cell.u-1of2{
        background-color:palegreen;
        border-radius: 10px;
        margin: 5px;
        text-align: center;
        line-height: 100px;
        height: 100px;
        flex: 0 0 50%;
    }

最后效果:(把颜色稍微涂一下感觉好多了。。)

示例3:圣杯布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>holygrail</title>
        <link rel="stylesheet" type="text/css" href="holygrail.css"/>
    </head>
    <body>
        <div class="HolyGrail">
            <header>#header</header>
            <div class="HolyGrail-body">
                <div class="HolyGrail-nav">#HolyGrail-nav</div>
                <div class="HolyGrail-content">#HolyGrail-content</div>
                <div class="HolyGrail-ads">#HolyGrail-ads</div>
            </div>
            <footer>#footer</footer>
        </div>
    </body>
    </html>
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
    *{
        font-family: sans-serif;
        border-radius: 5px;
    }

    header,footer{
        flex:1;
        background-color: steelblue;
        margin: 5px;
    }

    .HolyGrail{
        display: flex;
        flex-direction: column;
        min-height: 600px;
    }

    .HolyGrail-body{
        display: flex;
        flex:1;
        background-color: whitesmoke;
        min-height: 400px;
    }

    .HolyGrail-nav, .HolyGrail-ads{
        flex:0 0 160px;
        background-color: wheat;
        margin:5px;
    }

    .HolyGrail-content{
        background-color: tomato;
        flex:1;
        margin:5px;
    }

    .HolyGrail-nav{
        order: -1;
    }

最后效果:

示例4:悬挂式布局
这里静态的内容放着只是为了举个栗子。

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
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Miao Miao Examples</title>
        <link rel="stylesheet" type="text/css" href="suspend.css"/>
    </head>
    <body>
        <p style="font-weight:bold">MiaoMiao Examples</p>
        <br/>
        <div class="suspend-body">
            <div class="left" style="width: 50%;">
                <div class="suspend-item">
                    <img class = "media-figure" src="cat01.jpg">
                    <div class = "media-body">
                        <p style="font-weight: bold;">Miao Miao Miao Miao</p>
                        <p>Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Mi</p>
                    </div>
                </div>
                <div class="suspend-item" >
                    <img class = "media-figure" src="cat01.jpg">
                    <div class = "media-body">
                        <p style="font-weight: bold;">Miao Miao Miao Miao</p>
                        <p>Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Mi</p>
                    </div>
                </div>
            </div>
            <div class="right" style="width: 50%;">
                <div class="suspend-item">
                    <img class = "media-figure" src="cat01.jpg">
                    <div class = "media-body">
                        <p style="font-weight: bold;">Miao Miao Miao Miao</p>
                        <p>Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao</p>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>
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
    *{
        font-family: sans-serif;
        border-radius: 5px;
    }

    .suspend-body{
        display:flex;
    }

    .left .right{
        display: flex;
        flex-direction: column;
    }

    /*每个悬挂的灰色的那块*/
    /*align-items说明里面的元素贴着上面对齐*/
    .suspend-item{
        flex:1;
        display:flex;
        align-items: flex-start;
        background-color:whitesmoke;
        margin: 10px;
    }

    .media-figure{
        margin: 12px;
        width: 50px;
        height: 50px;
    }

    .media-body{
        flex:1;
        margin:2px
    }

最后效果:

示例5:Sticky Footer
这种做法就是外面是display:flex 然后中间的content是flex:1 上下的header和footer高度固定,这样下面就能一直显示到

React笔记(不定时更新)

这个部分主要就是抄React官网的教程,以后找起来方便一点啦。
希望熟练了以后可以不用一直ref就好。
https://react.docschina.org/tutorial/tutorial.html#lifting-state-up

1,函数组件
如果你想写的组件只包含一个 render 方法,并且不包含 state,那么使用函数组件就会更简单。我们不需要定义一个继承于 React.Component 的类,我们可以定义一个函数,这个函数接收 props 作为参数,然后返回需要渲染的元素。函数组件写起来并不像 class 组件那么繁琐,很多组件都可以使用函数组件来写。
替换前:

1
2
3
4
5
6
7
8
9
10
11
    class Square extends React.Component {
    render() {
    return (
    <button> {this.props.onClick()}}
    &gt;
    {this.props.value}
    {/* value属性用的时候是this.props.value */}
    </button>
    );
    }
    }

替换后:

1
2
3
4
5
6
7
    function Square(props) {
    return (
    <button>
    {props.value}
    </button>
    );
    }

2,create-react-app

1
2
3
4
5
6
7
    # 全局安装
    npm install -g create-react-app
    npx create-react-app my-app
    cd my-app

    # 启动编译当前的React项目,并自动打开 http://localhost:3000/
    npm start

3,可以在Chrome浏览器上装一个React插件,名字叫:React Developer Tools

4,props和state的区别(b站视频里面总结的)
・props中的数据都是外界传递过来的;state中的数据都是私有的(通过Ajax获取回来的数据,一般都是私有数据)
・props中的数据都是只读的,不能重新赋值;state中的数据,都是可读可写的

❤爱在蜈支洲❤

时间是2019/8/24-2019/9/1
其实为什么会决定是去蜈支洲岛呢?
有一次,我去虹桥机场出差要乘飞机的时候,望着地铁窗子发呆。不是会有那种频率跟列车速度保持一致的广告嘛,
就是在那里第一次知道蜈支洲岛,(第二次当然是做旅游攻略的时候了)当时小影片结束的最后就是”爱在蜈支洲”,字体也好看。
感觉是很浪漫的五个字,所以就决定去蜈支洲啦。

起飞的时间稍微延误了一会。不过后来听Chien说上海周五下午去海南岛的航班一般都会延误。超级玛丽以前从天津去延迟貌似也更严重。。
因为是暑期旺季,来回都是一飞机小朋友,所以带好充电宝,听音乐或者看b站什么还是很有必要的。不然有可能会被吵的头疼。

这次的主要目标是奔着拍婚纱照去的,是克洛伊全球旅拍,之前看FSY拍得很好所以去的。负责的化妆师静静还有杨摄像师专业程度都是很高的!绝对的五星好评!★★★★★
助理是新人感觉稍微有点怂,哈哈O(∩_∩)O不过人也很nice,工作特别到位。

先报一下前几天的流水账,前面两天是在克洛伊的民宿里面确定拍摄事项和服装什么。
然后去附近的鹿回头景区稍微散散步。爬到顶上风景很好,可以看到凤凰岛的酒店还在开发中。
毕竟海南岛可是国家重点发展的对象啊。










大中午去第一海鲜市场吃了点海鲜什么的。果然很贵,因为如果不懂当地行情,一般都会被狠狠宰一波。不过还是那句话,来都来了。。。就当不知道吧



好!开始进入拍婚纱照的正题,总共有四个主题。粉红甲壳虫-绿色植被-海滩比基尼-还有一本正经的正装礼服和婚纱。
第一套老婆觉得拍得不好,不过我觉得很好啊!可能男女的审美眼光果然还是有点不同的。


















好想有一部敞篷甲壳虫啊!!!!!!!!!啊。!!!!!!!!!(算了,这不重要=_=|||)
第二套开始都是在蜈支洲岛上的摄影,原计划是当天拍摄完成,正好很累了可以住岛上的蜈支洲珊瑚酒店,想想就很完美。
结果天公不作美,我们去的当天中午左右拍完甲壳虫以后就开始下雨了,暑假快结束的时候海南岛天气真的挺难把握的。
后来因为下雨天拍不出效果,放弃了当天的拍摄。然后就在蜈支洲岛玩了一天一夜。
后来我专门去看了白百合他们演的《私人订制》里面开场有个泳池的镜头就是蜈支洲岛,不过那里我们去的当时在装修。。。
顺便一提,我很粉白百合的,有演技,颜值高,还热衷于做公益。后来出的《妈阁是座城》我也很喜欢,有时间一定要去澳门一游!(可惜香港是去不了的了)




其实白天的蜈支洲岛吵吵闹闹的。可是到了最后一班离岛的船走后,人也少了,整个岛也安静了。吹着海风,听听海浪,好像就能让人暂时放下烦恼的事情,沉浸在珍贵的片刻安宁中。

这个是岛上自动制作冰激凌的机器人!カワイイネ❕







可乐和炸鸡还是必不可少的。。。
感觉蜈支洲岛这个时间段最主流的就是三口之家带孩子来的,因为晚上泳池从阳台很远听到也很吵啊。。。=_=
然后到了第二天,又可以重新回到婚纱照的正题了。其实当天早上我一直在担心,坐在阳台上盯着外面的天,心里想’那朵乌云啥时候被吹走啊’的问题。还好我本人没有什么其他特长,就是运气好,到了中午基本放晴了。下午就太阳超级大了。
关于我运气好这件事,跟我一桌打过八十分的人都知道是怎么回事。(不过好久没空打啦,什么时候组牌局啊chy)
咳咳,扯远了,不好意思。后面两套婚纱照的效果我们都很满意!尤其是绿植感觉很唯美啊。

这张对比度比较高的图明显是PS过的啦,相信大家一看就知道。。。下面的就是原图了。













最后这张明显过曝了,不过如果经过专业的P图,一定可以效果很好看的。
接下来这套比基尼算是拍得体力层面最轻松的一套,因为海滩就应该穿比基尼才行啊!!!

同理这张对比度也很强,所以也是修过图的。













反倒是最后一套主纱的婚纱照,可能是因为我上午祈祷放晴的愿望太强烈,到拍这套的时候下午三点的太阳变得异常刺眼。
由于闪得我们两个人睁不开眼,最后效果感觉不是很好啦。不过我们实在累得拍不动了,再加上前面的都很满意,所以也就OK啦。
(克洛伊承诺如果不满意可以拍到满意为止,不过后来当时的台风杨柳就要袭击海南岛了,所以感觉也没啥希望了。。。)









到此为止,婚纱照拍摄的重要任务总算完成啦!给杨摄影师和静静团队疯狂安利输出中。大半天的拍摄任务我们也超累,老婆后背晒伤涂了四天芦荟胶。
后面几天就在亚龙湾和三亚湾悠闲地呆了几天。因为当时台风来袭,去”非诚勿扰”中舒淇葛优的那个热带森林公园的地方的计划也落空啦,感觉稍微有点小遗憾。不过以后还有可能再来玩的,所以也无所谓啦O(∩_∩)O









我刚在想怎么给文章结尾,百度了一下舒淇和葛大爷的《非诚勿扰》中的经典对白,以此代表我的心情:
“你不仅是情人眼里出西施,在仇人眼里也是西施”

Javascript常用笔记(不定时更新)

1,关于两个!!a的用法
在Antd的checkbox group里面有用,判断indeterminate的状态的地方
!!a是一个布尔值,代表a有内容,即a不为null,不为undefined,不为空字符串

1
2
3
4
5
    var array1=[1,2,3];
    var array2=[];

    !!array1.length;//true
    !!array2.length;//false

2,Spread运算符(…)

用法1:用于构造函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    var arr1 = [1,3,5];
    var arr2 = [2,4,6];

    […arr1,…arr2]  //输出[1,3,5,2,4,6]

    //第二个例子
    var o2 = {
        age:22,
        address:'中国北京',
    }
   
    var o1={
        name:'张三',
        ...o2,
    }
    console.log(o1);//得到一个属性都有的对象

用法2:用于调用函数时,将一个数组用作函数的参数,(就是把这个数组转化为参数的列表)

1
2
3
4
5
6
    function testFunc(x,y,z){
        return x+y+z;
    }

    var args = [1,2,3];
    testFunc(…args);  //输出6

用法3,(不知道是不是应该叫用法3)
属性前面的三个点(…props),是延展操作符。 在React中,延展操作符一般用于属性的批量赋值。比如

1
2
3
4
5
6
7
8
9
    var props = {};
    props.foo = x;
    props.bar = y;
    var component = <Component {...props} />;
    //等同于
    var props = {};
    props.foo = x;
    props.bar = y;
    var component = <Component foo={x} bar={y} />;

使用延展操作符的好处是,当你的属性有所增加的时候,组件中的使用不需要去增加对应的属性。

3,filter函数,
filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

1
2
3
4
5
6
7
    var ages = [32,33,16,40];

    function checkAdult(age){
          return age >= 18;
    }

    ages.filter(checkAdult);//[32,33,40]

4,Array(46).keys()迭代器
这个不太懂,比如得到一个数组,元素是数字[0,1,2,3,……,45]
就是用下面这个方法

1
2
3
4
    var it = Array(46).keys();//这是一个迭代器对象,具体是啥我也不造,目前看到过的都是...它 当参数用,从零到四十五
    var arr1 = [];
    arr1 = [...it];
    document.getElementById("demo3").innerHTML=arr1;//输出0,1,2,3,4,5,.....,45

5, var a = a || {}
是给a赋默认值的一种写法。
如果a已经赋值了,这 a 为真 a || {} 返回 a,即a还是原来的值。
如果a为假 a || {} 返回 {},就为a赋值为{} 了。

6,Object.assign(target,source)复制

1
2
3
4
5
6
7
8
9
10
    const target = { a: 1, b: 2 };
    const source = { b: 4, c: 5 };

    const returnedTarget = Object.assign(target, source);

    console.log(target);
    // expected output: Object { a: 1, b: 4, c: 5 }

    console.log(returnedTarget);
    // expected output: Object { a: 1, b: 4, c: 5 }

Antd受控组件-以Table组件为例

//详细信息直接看以下代码中的注释内容。
//就是一个组件里面要告诉外面发生事件的时候要setState的属性
//外面要告诉里面组件的状态是看state里面的属性
//https://ant.design/components/table-cn/

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
import React, { Component } from 'react';  
import { Table, Button } from 'antd';
import './TableTest4.css';

const columns = [
    {
        title:'Name',
        dataIndex:'name',
    },
    {
        title:'Age',
        dataIndex:'age',
    },
    {
        title:'Address',
        dataIndex:'address',
    },
];

const data =[];
for(let i=0;i<46;++i){
    data.push({
        key:i,
        name:`特仑苏${i}`,
        age:32,
        address:`London,Park Lane no.${i}`,
    });
}

export default class TableTest4 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedRowKeys:[],
            loading : false,
            //hasSelected : selectedRowKeys.length > 0,//React里面是不能state里面的状态互相联动的
            //一个组件里面是不能这么写的
        }
    }

    componentDidMount() {
    }

    start = () => {
        this.setState({loading:true});
        //ajax request
        setTimeout(()=>{
            this.setState(
                {
                    selectedRowKeys:[],
                    loading:false,
                }
            );
        }
        ,1000);

    }

    onSelectChange = (selectedRowKeys,selectedRows) =>{
        console.log('selectedRowKeys changed',selectedRowKeys);
        console.log('selectedRows',selectedRows);
        this.setState({selectedRowKeys})
    }

    render() {
        const hasSelected = this.state.selectedRowKeys.length>0;
        const rowSelection = {
            selectedRowKeys:this.state.selectedRowKeys,//外面告诉里面是看state的状态
            onChange:this.onSelectChange,//里面告诉外面变化的时候应该怎么触发事件
        }

        return (
            <div>
                <p>TableTest4</p>
                <div style={{marginBottom:16}}>
                    <Button type="primary" onClick={this.start} disabled={!hasSelected} loading={this.loading}>
                        Reload
                    </Button>
                    <span style={{marginLeft:8}}>
                        {hasSelected?`Selected ${this.state.selectedRowKeys.length} items`:''}
                    </span>
                </div>                
                <Table rowSelection={rowSelection} columns={columns} dataSource={data}/>
            </div>                
        );
    }
}

用Powershell管理NTFS权限的脚本示例

其实NTFS权限是可以用powershell简单管理的,这样就可以实现一些自动化的脚本管理。

今天看到一个总结得非常好的文章,先附上原文链接,然后我把里面部分内容挑出来做个笔记。

<https://blog.netwrix.com/2018/04/18/how-to-manage-file-system-acls-with-powershell-scripts/>

不过其实有一点一直不明白,就是windows系统为什么需要sharentfs两套权限系统,用户访问的权限是看他们两个较小的权限决定的。一般我看到大多数人的做法都是把share设置成authenticated users读写或者everyone读写。然后用户访问文件夹的权限用ntfs来控制。下面是正题:

<示例1 添加某个用户的ntfs权限到特定的文件夹>

target\newuser02添加Full Control权限到名为newuser02ntfs权限中。添加以后该权限应用于此文件,子文件夹和文件,可以被继承。

$acl = Get-Acl newuser02

$AccessRule = New-Object System.Security.AccessControl.FileSystemAccessRule(“target\newuser02″,”FullControl”,”ContainerInherit,ObjectInherit”,”None”,”Allow”)

$acl.SetAccessRule($AccessRule)

$acl | Set-Acl newuser02

<示例2 禁用/启用某个文件夹的权限继承>

使用$acl.SetAccessRuleProtection方法,两个参数的意思分别是:

第一个参数表示要禁用继承,两个可选状态是$true$false

第二个参数表示要保留原来的权限(改成个别权限)还是去掉继承的权限

其实熟悉权限设置的话很容易明白上面是干嘛的,只是本来用鼠标点的也可以用命令的意思啦。。

但是第二个如果要用$false的话一定要保证有可以再执行权限分配的账号才行。

$acl = Get-Acl newuser03

$acl.SetAccessRuleProtection($true,$false)

$acl | Set-Acl newuser03

以上就是用powershell管理ntfs的大概例子,具体还有很多参数比如移除权限,take ownership,复制整个文件夹权限到新文件夹等等都是可以简单做到的。

AD DC无法启动时转移FSMO

如果主域控无法启动,而FSMO角色在主域控上的情况,可以用强制Seize FSMO命令让副域控取得FSMO角色。该命令对工作时间没有影响。(不过话也不能说死。。)

<https://social.technet.microsoft.com/wiki/contents/articles/6736.powershell-move-transfering-or-seizing-fsmo-roles-to-another-domain-controller.aspx>

Import-Module -Name Activedirectory

Move-ADDirectoryServerOperationMasterRole -Identity “Target-DC” -OperationMasterRole 0,1,2,3,4

另外需要注意的是父域控一般是SchemaMasterDomainNamingMaster,所以这两个角色可能不需要Seize

主要看 netodom query fsmo的结果。

其中,RIDMaster是和域的SID相关的,在ADMT的操作中需要选择RID主机,涉及到迁移的话特别注意。