学习笔记：Less预处理语言、Axios与Canvas验证码-优快云博客

1.通过应用对css预处理语言less有了更深的了解，less作为css的预处理语言，可以像css那样直接给每个元素添加相应的属性，但是也可以通过嵌套使逻辑结构更加明确，使代码更加明了。less在使用过程中，可以通过运用混合来灵活的减少代码的长度，因为刚开始使用没多久，还不太熟练，所以并没有尝试使用混合括号里加变量，而是单纯的使用混合，将三四行多个块都有的属性写到一块，然后将一个元素的属性用多个变量混合，再加上几行它特有的代码，减轻了工作量。同时，在使用过程里发现，如下这种情况

.box{
         div{
                width: 100px;
                height: 40px;
                padding: 11px 0;
                font-size: 16px;
                color: white;
                text-align: center;
                float: left;
                cursor: pointer;
            }
        }

当我给class为box的属性的元素的子div加上相关属性的时候，这个元素的子div的子div也会有同样的属性，除非给它加上class属性并作相关的操作，或者是有更加靠近它的div属性，就像这样

.box{
            div{
                width: 100px;
                height: 40px;
                padding: 11px 0;
                font-size: 16px;
                color: white;
                text-align: center;
                float: left;
                cursor: pointer;
                div{
                    width:200px;
                }
            }
        }

给我的感觉就像是定义的全局变量被其他变量覆盖了一样，这样虽然可以直接定义.box里所有的div，而且不用担心会影响到.box之外的div元素，但是感觉随着.box里的嵌套越来越多，还是会有所影响。

2.axios的学习

axios是基于promise对Ajax的再一次封装，使用方法和Ajax差不太多，下面是axios的使用

axios.get('/user', {    //axios使用的是get还是post是在开头标注过的，这点和Ajax不同
    params: {           //ajax是使用data传递参数，axios在get里使用params，在post里使用data
      ID: 12345
    }
  })
  .then(function (response) {     //此处相当于Ajax里的success
    console.log(response);
  })
  .catch(function (error) {        //此处相当于Ajax里的error
    console.log(error);
  });

下面是 Ajax的使用，用来和上面对照

$.ajax({
            url: "/user",
            type: 'get',                   //Ajax的类型
            data: {ID: 12345},            //传递的参数
            dataType: 'json',               //返回数据类型
            success: function (data) {
                console.log("这里是成功之后执行的")
            },
            error:function (){
                console.log("这里是失败之后执行的")
            }
        })

axios传递参数的时候如果是get请求使用parmas,是post请求则使用data，这是因为data和params虽然都是传递参数的，但是工作原理不同，parmas是通过吧内容加到传递的url上来实现的，好比这样 url: "http://www.XXXX.com/api?key=XXXX", 而data则是把请求添加到请求体body中来实现传递参数的，上网查阅资料，大佬们说是因为Ajax和axios使用的接口类型不同，导致在使用get请求的时候，用Ajax可以请求到的数据，axios却不行。具体原因是jQ的ajax如果不设置的话Content - Type是application/ x-wwW- form-urlencodedaxios的话会做判断如果data是字符串content -Type是application/ x-www-form-urlencoded如果data是对象content- Type是application/json。

3.canvas画布和图片登录验证的学习

因为在写项目的时候为了防止机器恶意用验证码轰炸，所以需要在发送邮箱验证码之前加一个图片登录验证，就学到了使用canvas，这里是先建立了一个数组，将大小写的英文字母以及0~9几个数字以字符的形式加进去，然后通过随机数来实现验证码内容的随机性，先创建一个对象canvas = document.getElementById("canvas");获取到canvas的对象，然后var context = canvas.getContext("2d");获取到canvas画图的环境，然后通过fillText来给画布添加文字，用font来设置文字的样式，还可以加入translate来给文字添加变换，让文字像平时用到的验证码那样产生左右倾斜，如果想让样式更加美观，可以加入随机的颜色，随机的线条和随机的点，随机线条使用moveto和linkto属性配合随机数产生断线效果随机的点则是随机线条的另一种形式，只要控制长度，比如context.moveTo(x, y);context.lineTo(x + 1, y + 1);这样就可以了，随机颜色则是通过三个随机数，给三个变量r,g,b，然后rgb(" + r + "," + g + "," + b + ")组合起来得到。

近期学习情况