学习备忘录

 跨域

  接触到的解决跨域的方法 JSONP,CORS

CORS

  在服务器端设置  Access-Control-Allow-Origin:*

1 header( 'Access-Control-Allow-Origin:*' ); //所有访问
2 
3 header( 'Access-Control-Allow-Origin:http://www.study.com');//特定网站

JSONP

  本质是利用 HTML中的<scirpt>标签具有跨域性的特点,通过<script>异步发送请求。

服务端返回一个特定字符串。这个字符串被js解析成一个函数调用。参数就是服务器传输的数据。

此方法需要前后端配合完成。只能以GET方式请求。ps:耗时操作都是异步,如请求,定时器

  jQuery中的JSONP

Jquery的$.ajax()方法集成了JSONP的实现。用法如下:

 1  $.ajax({
 2             url:" ",
 3             data:{
 4                 
 5             },
 6             dataType:'jsonp',//与ajax没啥关系,ajax用的是XMLHttpRequest对象的方法
 7             jsonp:""//传输的函数名,配合后台
 8             success:function(result){
 9              
10             }
11         });

 

Cookie&Session

  Session依赖于Cookie,因为Cookie在浏览器中记录服务器的数据。Session在服务器中生成一个文件,将文件名通CooKies在浏览器中保存。如果浏览器禁止Cookie则登录操作必须在每个页面进行一次。在百度贴吧中如果禁止cookie,则无法进行登录操作,在b站中如果禁止cookie则不显示登录按钮。

  用IP代替cookie?ip理论上是可以代替cookie进行验证的。方法是将IP和账号密码绑定。但ip可以造假,所有IP代替cookie实际上是不行的。

  在php中cookie和session的用法

        session_start();//无论读写session,都必须先调用session_start()方法,使用session_start()会新建一个空的session文件。
        $_SESSION["user"] = array(
          "username" => $_POST["username"],
          "userPwd" => $_POST["password"],
          "isLogin" => "yes"
        ); 

    

   // 有效期 的单位是秒。它的时间参照是php默认起始时间(1970-1-1)
   // setcookie("username","jack",time() + 10);
   // 设置永久存储的cookie
   // setcookie("username","jack",PHP_INT_MAX);

  // 通过path设置访问权限:目录的设置是参照网站根目录的
  // 1.设置目录为父级目录,子目录也能访问
  // 2.设置目录为子级目录,父级目录不能访问
  // /代表整站都能访问
  setcookie("username","jack",PHP_INT_MAX,"/");


  // 怎么创建就应该怎么删除:方法的参数应该对应
  // setcookie("username","jack",PHP_INT_MAX,"/");
  // setcookie("username","");
  setcookie("username","",PHP_INT_MAX,"/");

 

jquery中$.ajax()传输文件

  在XMLHttpRequest2.0中,用 构造函数FormData(表单元素)来收集表单中的数据,发送post请求时不需要设置请求头。如果设置则会出错。FormData中的参数必须是一个dom元素。jQuery对象 不是dom 元素。$("form")[0]才是dom对象。示例代码如下:

 1         var uploading = false;
 2         $("#sub").click(function () {
 3             if (uploading) {
 4                 alert("文件正在上传中,请稍候");
 5                 return false;
 6             }
 7             console.log(new FormData($('#form1')[0]));//必须加索引,不然无法读取到表单中的数据
 8             // $('#form1')[0]是取出id=form1的元素,至于为什么是[0],这是因为jquery对象都有一个默认为0的索引用来取出其Dom元素,
          $('f')是一个jquery对象,[0]为Dom元素 可以用dom的所有属性和方法
9 //FormData 中必须是一个dom元素 不能是jQ对象 10 $.ajax({ 11 type: "POST", 12 url: "03-uploadFile.php", 13 data: new FormData($('#form1')[0]),//必须加索引,不然无法读取到表单中的数据 14 dataType: 'json', 15 beforeSend: function(){ 16 uploading = true; 17 }, 18 processData: false, //jQ上传文件必须 不设置 setrequeryheadrt() 19 contentType: false,//jQ上传文件必须设置为fasle 不改变传输文件 参考https://www.cnblogs.com/henuyuxiang/p/6656001.html 20 success: function (res) { 21 console.log(res); 22 uploading = false; 23 } 24 }); 25 });

mySql

  在代码中有存储数据的用number ,string,array,objec,在数据库中有int char。那么数据库中是否能存储数组呢。

答案是不能的。数据库无法存储数组。那么有一个用户表 和一个商品表。一个用户可以拥有多种商品。一个商品也可被多个用户拥有。这种联系该如何存储呢?

  虽然数据库不能存储数组,但是数据库能存储字符串。将字符串按特定的符合分割就是数组了。

  在数据库中一般用  1,2,3,4 这种形式存储数组型数据。在查询时使用 find_in_set查找,代码如下:

select * from user where find_in_set(Id,"1,2")

一个页面数据库只用连接一次。再次连接会报错。

XmlHttpRequest

        var xhr = new XMLHttpRequest();
        xhr.open("get","index.php");
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//如果是post需要设置
        xhr.send(null);//数据是字符串 key=value&key1=value1
        xhr.onreadystatechange = function(){
            if(xhr.status = 200 && xhr.readyState == 4){
                console.log(xhr.responseText);
            }
        }

移动web 

视口 

  使视口等于理想视口,理想视口就是设备的实际宽高

 <meta name="viewport" content="width=device-width, initial-scale=1.0">//vs code 自动 sublime meta:vp+tab键补全

由于移动端不存在兼容问题,而jQuery中花费大量代码来解决兼容问题,影响了性能。所有使用

zepto来代替
zetpto有着与jQuery相同的语法,但也有一小部分不同。

一些用过的插件

fastclick : 用来解决移动端点击延迟300微秒的问题。
  $(function() {
        FastClick.attach(document.body);
    });

 

swper: 轮播图插件
<div class="swiper-container">
    <!--图片-->
    <ul class="swiper-wrapper">
        <li class="swiper-slide">
            <a href="javascript:;">
                <img src="./uploads/l1.jpg" alt="">
            </a>
        </li>
        <li  class="swiper-slide">
            <a href="javascript:;">
                <img src="./uploads/l2.jpg" alt="">
            </a>
        </li>
        <li  class="swiper-slide">
            <a href="javascript:;">
                <img src="./uploads/l3.jpg" alt="">
            </a>
        </li>
    </ul>
</div>
<script>
         var mySwiper = new Swiper('.swiper-container',{
        effect : 'cube',
        cube: {
            slideShadows: true,
            shadow: true,
            shadowOffset: 100,
            shadowScale: 0.6
        }
    })
</script>

 

iscroll: 区域滚动
html 父盒子固定高度 ,子盒子高度大于父盒子
<script type="text/javascript">
    var myScroll = new IScroll('#wrapper',{
        mouseWheel: true,
        scrollbars: true
    });

  var myScroll = new IScroll('.tabs_parent',{
  /*设置水平滑动,不允许垂直滑动*/
  scrollX: true, scrollY: false
  });
</script>

 

bootstrap

  主要运用了 @media 媒体查询来实现栅栏系统。

  媒体查询遵循原则 。

  1.向上兼容:如果设置了宽度更小时的样式,默认这些样式也会传递到宽度更大的条件范围内
  2.向下覆盖:宽度更大的样式会将前面宽度更小的样式覆盖*/

  

 /*max-width: 768px:宽度在768以下*/
        @media screen and (max-width: 768px){
            body{
                background-color: pink;
            }
        }

        /*max-width: 992px:宽度在992以下*/
        @media screen and (max-width: 992px){
            body{
                background-color: blue;
            }
        }
        /*max-width: 1200px:宽度在1200以下*/
        @media screen and (max-width: 1200px){
            body{
                background-color: green;
            }
        }

bootstrap 常用的类

  

 <div class="wjs_reverse hidden-xs">
        <div class="container">
            <div class="row">
                <div class="col-xs-9">
                  
                </div>
                <div class="col-xs-3">
                 
                </div>
            </div>
        </div>
 </div>
/*
bootstrap 默认 把宽度分为 12 格,可通过官网自定义这个属性。
屏幕大小  由小到大
   xs - sm - md -lg 

hidden-sx //在小屏幕隐藏
container: 在大屏幕是 100%,在小屏幕时 是固定值 左右有边距
container-fluid:宽度一直为100%
row:根类 使用 col 必须在 row盒子中
col-sm-12:在sm 宽度下 宽度占12格 也就是100%
*/

mui 框架

  一个坑:mui 默认阻止所有 a 标签的跳转,解决办法

mui('body').on('tap','a',function(){
        window.top.location.href=this.href;
    });//通过事件委托为所有的a便签注册 tap 事件,tap 为 mui中封装的点击事件

mui框架是专注与移动布局的框架。如务必要请不要在pc端中使用。如区域滑动功能 无法用鼠标滑轮控制 。更多功能可以查看 官网文档 <a href="http://dev.dcloud.net.cn" ></a>

 布局

  左右固定,中间自适应(双飞翼)

  定位或浮动实现: 中间盒子设置 padding 左右各200px .宽度自适应 , 左右盒子用浮动或定位 填充到左右

  flex实现: 父盒子设置 display:flex ;   中间盒子设置 flex :1 。左右设置固定宽度

  flex-direction: column; 改变排列方式为 纵向排列

    flex 常用的属性

  justify-content: center;
  align-items: center;

一个我没想到的布局  

  一个盒子分三份 ,每个盒子之间间隔15px. 盒子的content 相同且自适应 。

  实现  左:

    {

      width:33.33%

      margin-right:10px;

    }: 

    中{

      width:33.33%;

      margin: 0 5px;

    }

    右{

      width:33.33%;

      margin-left:10px

    }

less

  @定义变量 

  @color:#3c3c3c

  定义函数 

  .addRadius(@r:10px){
      border-radius: @r;
      -webkit-border-radius: @r;
      -moz-border-radius: @r;
     }

  调用函数

  box{

       .addRadius(5px);

  }

 rem,em  和 vw,wh 

   rem 相对于 html 的font-size , 如果 html  设置 font-size:100xp  则 1rem = 100px;  如果设置 font-size: 625%;  则 1rem = 16* 625%   16位浏览器默认的font-size

  em 相对于 父元素的font-size。

  一个bug  由于谷歌 浏览器 font-size 最小为12px 。12px 以下的默认为 12px 导致 兼容问题。目前无法解决(有)。幸好 10px 基本没人设置。

 

  vw 相对于 视口  如果 视口宽为 640px  则 1vw = 640/100= 6.4px;

  vh 相对于 视口 如果 视口高为 640px   则 1vh  = 640 / 100 = 6.4px;

 

posted @ 2018-12-20 11:56 掬水捧月可会不可言 阅读(...) 评论(...) 编辑 收藏