作者: admin

  • 数据模拟mock.js

    测试数据 数据 测试

    模拟数据 mock,为前后端分离,提前准备数据,不必要等待后台提供数据。但是前提是要约定好数据结构。

     

    浏览器引入:

    <script src="https://cdn.bootcss.com/Mock.js/0.1.11/mock-min.js"></script>

     

    node.js后台引入:

    //安装
    npm install mockjs --save-dev
    
    
    // 使用 Mock
    var Mock = require('mockjs')
    var data = Mock.mock({
     'list|1-10': [{  //在数组list里随机生成1到10条数据
         'id|+1': 1  //id属性递增加1
     }]
    })
    // 输出结果
    console.log(JSON.stringify(data, null, 4))
    
    

     

     

    在node.js后台可以拦截并模拟接口:

    import Mock from 'mockjs'
    .
    .
    .
    var data = Mock.mock('/home',{
       'list|1-10': [{
         'id|+1': 1
       }]
    });
    
    
     Vue.$http.get('/home').then((res)=>{
       this.json=res.body.list;
       console.log(res)
     })

     

    具体用法:http://mockjs.com/examples.html

     

  • mysql数据库存储过程

    优化:

    1,将一些业务逻辑放在数据库里判断,执行效率快。

    2,程序语言的移植也方便。例如php转java,等等。

    3,避免sql注入的破坏。

     

     

    缺点:

    1,给服务器造成压力

    2,过多业务逻辑放在数据库里判断,不好维护,修改也不方便。往往都要删除了在重新声明存储过程。

    3,换数据库之后,存储过程的逻辑要重写。

    4,不好调试

     

     

    在创建mysql存储过程之前,要先聊一些基础,不然后面学习会痛苦:

    DELIMITER // 要先输入,说明以下代码是存储过程
    CEATE PROCEDURE demo_in_parameter(IN p_in int) 声明存储过程名为demo_in_parameter,参数名p_in,输入参数,整数类型
    
    IN //接收外来值,外来值不会变。在存储过程中改变的值不会去修改全局环境的值 (最好看例子)
    OUT //不接收外来值,但可以直接修改外来值。在存储过程中可以修改覆盖全局的变量(最好看例子)
    INOUT //接收外来值,值也会被覆盖。(最好看例子)
     
    BEGIN ... END 存储过程开始和结束符号 
    SET @p_in=1 SET可以在全局环境中声明变量,也可以在存储过程中修改变量。存储过中不需要@
    DECLARE l_int int unsigned default 4000000; 只能在存储过程里面声明变量

     

     

    IN参数例子:

    mysql > DELIMITER // 
    mysql > CREATE PROCEDURE demo_in_parameter(IN p_in int) 
         -> BEGIN 
         -> SELECT p_in;  --接收并输出外来变量
         -> SET p_in=2; 
         -> SELECT p_in;  --输出修改后的p_in值,但是不会影响全局变量中的p_in值
         -> END; 
         -> // 
    mysql > DELIMITER ;

     

    结果:

    1. mysql > SET @p_in=1; --外来的全局变量
    2. mysql > CALL demo_in_parameter(@p_in); --传入外来变量
    3. +------+ 
    4. | p_in | 
    5. +------+ 
    6. | 1 |      --IN的参数接收外来变量,并输出
    7. +------+ 
    8. 
    9. +------+ 
    10.| p_in | 
    11.+------+ 
    12.| 2 |      --在存储过程可以修改外来变量值,仅仅在存储过程有效
    13.+------+ 
    14. 
    15.mysql> SELECT @p_in; 
    16.+-------+ 
    17.| @p_in | 
    18.+-------+ 
    19.| 1 |      --IN的参数,在存储过程里面修改不会影响到全局中的原来值
    20.+-------+

     

     

    OUT参数例子:

    mysql > DELIMITER // 
    mysql > CREATE PROCEDURE demo_out_parameter(OUT p_out int) 
         -> BEGIN 
         -> SELECT p_out;  --OUT的参数,不接收外面传来的参数返回一个NULL
         -> SET p_out=2;   --但可以在内部彻底修改外面全局变量的值
         -> SELECT p_out;  --被修改外面全局变量的值会被影响覆盖
         -> END; 
         -> // 
    mysql > DELIMITER ;

     

    结果:

    1. mysql > SET @p_out=1; 
    2. mysql > CALL demo_out_parameter(@p_out); 
    3. +-------+ 
    4. | p_out | 
    5. +-------+ 
    6. | NULL |   --OUT参数不会接收和输出外来变量的值
    7. +-------+ 
    8. 
    9. +-------+ 
    10.| p_out | 
    11.+-------+ 
    12.| 2 |      --但可以修改影响全局变量的值
    13.+-------+ 
    14. 
    15.mysql> SELECT @p_out; 
    16.+-------+ 
    17.| p_out | 
    18.+-------+ 
    19.| 2 |      --OUT参数可以直接影响全局变量的值
    20.+-------+

     

     

    INOUT参数例子

    mysql > DELIMITER // 
    mysql > CREATE PROCEDURE demo_inout_parameter(INOUT p_inout int) 
         -> BEGIN 
         -> SELECT p_inout;  --能接收,并输出外来变量
         -> SET p_inout=2; 
         -> SELECT p_inout;  --还能直接修改影响外来变量
         -> END; 
         -> // 
    mysql > DELIMITER ;

     

    结果:

    1. mysql > SET @p_inout=1; 
    2. mysql > CALL demo_inout_parameter(@p_inout) ; 
    3. +---------+ 
    4. | p_inout | 
    5. +---------+ 
    6. | 1 |        --接收并输出
    7. +---------+ 
    8. 
    9. +---------+ 
    10.| p_inout | 
    11.+---------+ 
    12.| 2 | 
    13.+---------+ 
    14. 
    15.mysql > SELECT @p_inout; 
    16.+----------+ 
    17.| @p_inout | 
    18.+----------+ 
    19.| 2 |        --直接修改影响外来变量
    20.+----------+

     

     

     

    综合案例:

     

    DELIMITER // --说明开始写存储过程
    CREATE PROCEDURE proc2(IN parameter1 INTEGER) --声明存储过程名为proc2,参数名parameter1,类型INTEGER,参数类型IN
    BEGIN --开始写逻辑
    DECLARE variable1 CHAR(10); --声明存储过程里面的内部变量名为variable1,注意加分号;
    IF parameter1 = 17 THEN --if条件判断
    SET variable1 = 'birds'; --为之前的变量赋值,可以使用SET
    ELSE
    SET variable1 = 'beasts';
    END IF; --if条件结束,加分号;
    insert into liuyan_user(liuyan_username) values (variable1);
    END; --逻辑结束
    //
    DELIMITER ; --存储过程结束
    
    set @xx1=17; --声明全局变量,也可以在存储过程里面声明但不需要加@
    CALL proc2(@xx1); --调用存储过程

     

    结果:

     

     

     

    一些简单案例:(主要学习声明存储过程还有哪些方式)

    mysql > CREATE PROCEDURE GreetWorld( ) SELECT CONCAT(@greeting,' World'); 
    mysql > SET @greeting='Hello'; 
    mysql > CALL GreetWorld( ); 
     +----------------------------+ 
      | CONCAT(@greeting,' World') | 
      +----------------------------+ 
      | Hello World | 
      +----------------------------+

     

     

    mysql> CREATE PROCEDURE p1() SET @last_procedure='p1'; 
    mysql> CREATE PROCEDURE p2() SELECT CONCAT('Last procedure was ',@last_procedure); 
    mysql> CALL p1( ); 
    mysql> CALL p2( ); 
     +-----------------------------------------------+ 
     | CONCAT('Last procedure was ',@last_proc | 
     +-----------------------------------------------+ 
     | Last procedure was p1 | 
     +-----------------------------------------------+

     

     

     

    存储过程局部变量:(只能在存储过程中声明)

    DECLARE l_int int unsigned default 4000000; 
    DECLARE l_numeric number(8,2) DEFAULT 9.95; 
    DECLARE l_date date DEFAULT '1999-12-31'; 
    DECLARE l_datetime datetime DEFAULT '1999-12-31 23:59:59'; 
    DECLARE l_varchar varchar(255) DEFAULT 'This will not be padded';

     

     

    条件:

    -> if parameter=0 then 
    -> ...
    -> else 
    -> ...
    -> end if;

     

     

    循环:

    while

     -> declare var int; 
     -> set var=0; 
     -> while var<6 do --没分号
     -> insert into t values(var); 
     -> set var=var+1; 
     -> end while;

     

    repeat…until

     -> declare v int; 
     -> set v=0; 
     -> repeat  --没分号
     -> insert into t values(v); 
     -> set v=v+1; 
     -> until v>=5  --没分号
     -> end repeat;

     

    loop ·····endloop

    这个循环的好处就是有类似于contiune和break的功能。

     ->declare v int; 
     -> set v=0; 
     -> LOOP_LABLE:loop 
     -> insert into t values(v); 
     -> set v=v+1; 
     -> if v >=5 then 
     -> leave LOOP_LABLE; --只有v >=5就退出循环,类似于break
     -> end if; 
     -> end loop;

     

     -> declare v int; 
     -> set v=0; 
     -> LOOP_LABLE:loop 
     -> if v=3 then 
     -> set v=v+1; 
     -> ITERATE LOOP_LABLE;  --跳过v=3的步骤,类似contiune
     -> end if; 
     -> insert into t values(v); 
     -> set v=v+1; 
     -> if v>=5 then 
     -> leave LOOP_LABLE; 
     -> end if; 
     -> end loop;

     

    https://blog.csdn.net/a__yes/article/details/52795793

  • a标签模拟button的disable属性

    在一些业务逻辑中button的disable属性有时候挺好使用,但我们希望a标签也有这样的功能。

    html:

    <a id="aa" data-disable="false" onclick="(!$(this).data('disable')) && this_click()">xx</a>

    true:禁用

     

    js:

    window.this_click=function () {
     //逻辑
    }

     

  • 传统服务端渲染 vs 前后端分离渲染

    首屏 seo 前后端分离 seo 白屏 闪屏

    服务端渲染(吐)

    服务端在返回 html 之前,在特定的区域,符号里用数据填充,再给客户端,客户端只负责解析 HTML 。

     

     

    客户端渲染(填)

    html 仅仅作为静态文件,客户端端在请求时,服务端不做任何处理,直接以原文件的形式返回给客户端客户端,然后根据 html 上的 JavaScript,生成 DOM 插入 html。

     

     

    异同

    1,渲染本质一样,都是字符串拼接,将数据渲染进一些固定格式的html代码中形成最终的html展示在用户页面上。
    2,拼接字符串必然引起性能的消耗。

    服务端渲染性能消耗在服务端,当用户量比较多时,缓存部分数据以避免过多数据重复渲染。 客户端渲染,如当下火热的 spa 框架,Angular、React、Vue,在首次渲染时,大多是将原 html 中的数据标记(如 {{ text }} )替换。客户端渲染较难的一点是数据更新以后,页面响应式更新时如何节省资源,直接 DOM 的读写,是很消耗性能的。 Vue 2.0 + 有 Vnode,进行 diff 后,渲染到页面上。

     

     

    利弊

     

     

    同构

    为了解决客户端渲染首屏慢与 SEO 问题,同构开始出现。

    同构:前后端共用 JS,首次渲染时使用 Node.js 来直出 HTML。一般来说同构渲染是介于前后端中的共有部分。

     

    简单说下在使用 Vue SSR(nuxt)的一些坑:

    1,服务端必须是 node.js 或者专门跑个 node.js 来支持;
    2,document 对象找不到,由于前端使用的 window,在 node 环境不存在;
    3,数据预获取时,组件尚未实例化(无法使用 this ),于是在 created 生命钩子调用 method 里的方法行不通,数据请求及格式化等操作都应该放置在专门的数据预取存储容器(data store)或”状态容器(state container)”中处理;
    4,string-based 模板性能肯定要比 virtual-dom-based 模板的性能好。string-base 模板只要填数据即可,virtual-dom-based 模板需要经历 Vue 模板语法 —> Vnode —> 拼接字符串 html 的过程。 有关性能的消耗对比,可以参考这篇文章;
    5,缓存方面,只能做到页面级的缓存。如果用户特定(user-specific),即对于不同用户需要渲染不同内容,缓存是不可用的。

     

    是否有其他解决客户端渲染不足之处的方法?

    1,处理 SEO 问题时,使用 prerender 、升级搜索引擎,以及其他。
    2,白屏可以加 loading、Skeleton Screen 效果、以及其他。

  • 浏览器版本过低提示

    js css 判断 ie 浏览器 版本过低

     

    <!--[if lte IE 9]>  <!--包括ie9以及ie9以下浏览器会提示--> 
     <div class="browsertip" id="browsertip"> <i class="ico-warn"></i> 您系统上的IE版本过低,可能会导致某些功能无法正常使用,<a href="http://dl.pconline.com.cn/sort/104.html" target="_blank" title="去升级">去升级IE</a> </div>
    <![endif]-->
    
    
    <!--[if lt IE 9]> <!--ie9以下浏览器会提示不包括ie9--> 
     <div class="browsertip" id="browsertip"> <i class="ico-warn"></i> 您系统上的IE版本过低,可能会导致某些功能无法正常使用,<a href="http://dl.pconline.com.cn/sort/104.html" target="_blank" title="去升级">去升级IE</a> </div>
    <![endif]-->
    
    

     

    css:

    /*浏览器版本过低提示*/
    
    .browsertip {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 35px;
     line-height: 35px;
     text-align: center;
     color: #F1F1F1;
     z-index: 20;
     background-color: rgba(0, 0, 0, 0.5);
     background: #000000;
     filter: alpha(opacity=50);
    }
    
    .browsertip a {
     color: #fc8412;
    }
    
    .browsertip .ico-warn {
     display: inline-block;
     vertical-align: middle;
     width: 25px;
     height: 25px;
     margin-right: 6px;
     position: relative;
     background: url(../img/www/bg.png) no-repeat -342px -4px;
     cursor: pointer;
     background-position: -715px -42px;
    }