python运维开发(十七)----jQuery续(示例)web框架django

内容目录：

jQuery示例
前端插件
web框架
Django框架

jQuery示例

dom事件绑定，dom绑定在form表单提交按钮地方都会绑定一个onclick事件，所有查看网站的人都能看到代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom表单验证</title>
        <style>
        .item{
            width: 250px;
            height: 60px;
            position: relative;
        }
        .item input{
            width: 200px;
        }
        .item span{
            position: absolute;
            top: 20px;
            left: 0px;
            font-size: 8px;
            background-color: indianred;
            color: white;
            display: inline-block;
            width: 200px;
        }
    </style>
</head>
<body>
  <div>
        <form>
            <div class="item">
                <input class="c1" type="text" name="username" label="用户名"/>
                <!--<span>用户名不能为空</span>-->
            </div>
            <div class="item">
                <input  class="c1" type="password" name="pwd" label="密码"/>
                <!--<span>密码不能为空</span>-->
            </div>
            <input type="submit" value="提交" onclick="return CheckValid();" />
        </form>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('form .c1 span').remove();
        function CheckValid() {
            //找到form标签下的所有需要验证的标签
            //$('form .c1')
            //$('form input[type="text"],form input[type="password"]')
            //循环所有需要验证的标签，获取内容
            var flag = true;
            $('form .c1').each(function () {
                //每一个元素执行匿名函数
                //this
                //console.log(this,$(this));
                var val = $(this).val();
                if (val.length <=0 ){
                    var label = $(this).attr('label');
                    var tag = document.createElement('span');
                    tag.innerText=label+"不能为空";
                    $(this).after(tag);
                    flag=false;
                    return false;
                }
            });
            return flag;
        }
    </script>

</body>
</html>

dom表单提交事件绑定demo

jQuery事件绑定，使用jquery方式绑定的事件通过浏览器的调试模式也看不到绑定的事件，使网站的代码更安全。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery表单验证</title>
        <style>
        .item{
            width: 250px;
            height: 60px;
            position: relative;
        }
        .item input{
            width: 200px;
        }
        .item span{
            position: absolute;
            top: 20px;
            left: 0px;
            font-size: 8px;
            background-color: indianred;
            color: white;
            display: inline-block;
            width: 200px;
        }
    </style>
</head>
<body>
  <div>
        <form>
            <div class="item">
                <input class="c1" type="text" name="username" label="用户名"/>
                <!--<span>用户名不能为空</span>-->
            </div>
            <div class="item">
                <input  class="c1" type="password" name="pwd" label="密码"/>
                <!--<span>密码不能为空</span>-->
            </div>
            <input type="submit" value="提交"  />
        </form>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
            //当页面框架加载完成之后，自动执行
           BindCheckValid();
        });
        function BindCheckValid() {
            $('form :submit').click(function () {
                var flag=true;
                //只要一点击submit按钮，执行此处内容，找到form标签下的所有需要匹配的标签
                $('form .item span').remove();
                $('form .c1').each(function () {
                     //每一个元素执行匿名函数
                    //this
                    //console.log(this,$(this));
                    var val = $(this).val();
                    if (val.length <=0 ){
                        var label = $(this).attr('label');
                        var tag = document.createElement('span');
                        tag.innerText=label+"不能为空";
                        $(this).after(tag);
                        flag=false;
                        return false;
                    }
            });

            return flag;
            })
        }

    </script>

</body>
</html>

jQuery表单提交事件绑定demo

jQuery循环break,在jQuery中return false 表示中断循环

$.each([11,22,33,44],function(k,v){
if(v == 22){
//return ; // continue
return false; //break
}
console.log(v);

jQuery扩展方法

jQuery.extend(object):扩展jQuery对象本身

//在jQuery命名空间上增加两个函数
jQuery.extend({
  min: function(a, b) { return a < b ? a : b; },
  max: function(a, b) { return a > b ? a : b; }
});
//调用方式
$.min(2,3); // => 2
$.max(4,5); // => 5

jQuery.fn.extend(object):扩展 jQuery 元素集来提供新的方法（通常用来制作插件）

//增加两个插件方法
jQuery.fn.extend({
  check: function() {
    return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
});
//调用方式
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();

jQuery自定义扩展的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery扩展</title>
</head>
<body>
<script src="jquery-1.12.4.js"></script>
<script src="extend1.js"></script>
<script>
    $.jabe1('123');
</script>
</body>
</html>

HTML代码

//普通函数方式
a = function(jq){
    jq.extend({
        'jabe1': function(arg){
            console.log(arg);
            alert(arg);
        }
    });

    function f1(){

    }
};
a(jQuery);
//自执行函数方式
(function (jq) {
    jq.extend({
            'jabe1':function(arg) {
                // console.log(arg);
                alert(arg);
            }
        });
})(jQuery);

js代码

jQuery扩展实现基本验证

支持是否为空验证
文本长度验证

正则匹配验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输入文本长度和手机号验证</title>
    <style>
        .item{
            width: 250px;
            height: 60px;
            position: relative;
        }
        .item input{
            width: 200px;
        }
        .item span{
            position: absolute;
            top: 20px;
            left: 0px;
            font-size: 8px;
            background-color: indianred;
            color: white;
            display: inline-block;
            width: 200px;
        }
    </style>
</head>
<body>

    <div>
        <form id="form1">
            <div class="item">
                <input class="c1" type="text" name="username" label="用户名" require="true" min-len="6"/>
            </div>
            <div class="item">
                <input  class="c1" type="password" name="pwd" label="密码"/>
            </div>
            <div class="item">
                <input  class="c1" type="text" name="phone" label="手机" require="true" phone="true"/>
            </div>
            <input type="submit" value="提交" />
        </form>

    </div>

    <script src="jquery-1.12.4.js"></script>
    <script src="commons.js"></script>
    <script>
        $(function(){
            $.valid('#form1');
        });

    </script>
</body>
</html>

手机号和长度匹配验证demo-HTML代码

(function(jq){

    function ErrorMessage(inp,message){
        var tag = document.createElement('span');
        tag.innerText = message;
        inp.after(tag);
    }

    jq.extend({
        valid:function(form){
            // #form1 $('#form1')
            jq(form).find(':submit').click(function(){

                jq(form).find('.item span').remove();

                var flag = true;
                jq(form).find(':text,:password').each(function(){

                    var require = $(this).attr('require');
                    if(require){
                        var val = $(this).val();

                        if(val.length<=0){
                            var label = $(this).attr('label');
                            ErrorMessage($(this),label + "不能为空");
                            flag = false;
                            return false;
                        }

                        var minLen = $(this).attr('min-len');
                        if(minLen){
                            var minLenInt = parseInt(minLen);
                            if(val.length<minLenInt){
                                var label = $(this).attr('label');
                                ErrorMessage($(this),label + "长度最小为"+ minLen);
                                flag = false;
                                return false;
                            }
                            //json.stringify()
                            //JSON.parse()
                        }

                        var phone = $(this).attr('phone');
                        if(phone){
                            // 用户输入内容是否是手机格式
                            var phoneReg = /^1[3|5|8]\d{9}$/;
                            if(!phoneReg.test(val)){
                                var label = $(this).attr('label');
                                ErrorMessage($(this),label + "格式错误");
                                flag = false;
                                return false;
                            }
                        }

                        // 1、html自定义标签属性
                        // 增加验证规则+错误提示

                    }
                    // 每一个元素执行次匿名函数
                    // this
                    //console.log(this,$(this));
                    /*
                    var val = $(this).val();
                    if(val.length<=0){
                        var label = $(this).attr('label');
                        var tag = document.createElement('span');
                        tag.innerText = label + "不能为空";
                        $(this).after(tag);
                        flag = false;
                        return false;
                    }
                    */
                });

                return flag;
            });
        }
    });
})(jQuery);

手机号和长度匹配验证demo-js代码

正则匹配

1、定义正则表达式

/.../ 用于定义正则表达式
/.../g 表示全局匹配，类似生成器，每次执行exec取一个结果，全部匹配完成后返回null
/.../i 表示不区分大小写
/.../m 表示多行匹配
JS正则匹配时本身就是支持多行，此处多行匹配只是影响正则表达式^和$，m模式也会使用^$来匹配换行的内容)
```
var pattern = /^Java\w*/gm;
var text = "JavaScript is more fun than \nJavaEE or JavaBeans!";
result = pattern.exec(text)
result = pattern.exec(text)
result = pattern.exec(text)
```
注：定义正则表达式也可以 reg= new RegExp()

2、匹配，JavaScript中支持正则表达式，其主要提供了两个功能：

test(string) 检查字符串中是否和正则匹配

n = 'uui99sdf'
reg = /\d+/
reg.test(n)  ---> true

# 只要正则在字符串中存在就匹配，如果想要开头和结尾匹配的话，就需要在正则前后加 ^和$

exec(string) 获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组

//获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组。

//非全局模式
//获取匹配结果数组，注意：第一个元素是第一个匹配的结果，后面元素是正则子匹配（正则内容分组匹配）
    var pattern = /\bJava\w*\b/;
    var text = "JavaScript is more fun than Java or JavaBeans!";
    result = pattern.exec(text)

    var pattern = /\b(Java)\w*\b/;
    var text = "JavaScript is more fun than Java or JavaBeans!";
    result = pattern.exec(text)

//全局模式
//需要反复调用exec方法，来一个一个获取结果，直到匹配获取结果为null表示获取完毕
    var pattern = /\bJava\w*\b/g;
    var text = "JavaScript is more fun than Java or JavaBeans!";
    result = pattern.exec(text)

    var pattern = /\b(Java)\w*\b/g;
    var text = "JavaScript is more fun than Java or JavaBeans!";
    result = pattern.exec(text)

3、字符串中相关方法

obj.search(regexp)  //获取索引位置，搜索整个字符串，返回匹配成功的第一个位置(g模式无效)
obj.match(regexp)   // 获取匹配内容，搜索整个字符串，获取找到第一个匹配内容，如果正则是g模式找到全部
obj.replace(regexp, replacement)  //替换匹配替换，正则中有g则替换所有，否则只替换第一个匹配项，
$数字：匹配的第n个组内容；
$&：当前匹配的内容；
$`：位于匹配子串左侧的文本；
$'：位于匹配子串右侧的文本
$$：直接量$符号

var text = "JavaScript is more fun than Java or JavaBeans!";

text.search(/\b(Java)\w*\b/g)

0//结果返回第一个的位置

text.match(/\b(Java)\w*\b/g)

["JavaScript", "Java", "JavaBeans"]//返回匹配的所有存放在列表中

text.replace('Java','Python')

"PythonScript is more fun than Java or JavaBeans!"//Java替换为Python

滚动菜单实例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>

        body{
            margin: 0px;
        }
        img {
            border: 0;
        }
        ul{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .wrap{
            width: 980px;
            margin: 0 auto;
        }

        .pg-header{
            background-color: #303a40;
            -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
            -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
            box-shadow: 0 2px 5px rgba(0,0,0,.2);
        }
        .pg-header .logo{
            float: left;
            padding:5px 10px 5px 0px;
        }
        .pg-header .logo img{
            vertical-align: middle;
            width: 110px;
            height: 40px;

        }
        .pg-header .nav{
            line-height: 50px;
        }
        .pg-header .nav ul li{
            float: left;
        }
        .pg-header .nav ul li a{
            display: block;
            color: #ccc;
            padding: 0 20px;
            text-decoration: none;
            font-size: 14px;
        }
        .pg-header .nav ul li a:hover{
            color: #fff;
            background-color: #425a66;
        }
        .pg-body{

        }
        .pg-body .catalog{
            position: absolute;
            top:60px;
            width: 200px;
            background-color: #fafafa;
            bottom: 0px;
        }
        .pg-body .catalog.fixed{
            position: fixed;
            top:10px;
        }

        .pg-body .catalog .catalog-item.active{
            color: #fff;
            background-color: #425a66;
        }

        .pg-body .content{
            position: absolute;
            top:60px;
            width: 700px;
            margin-left: 210px;
            background-color: #fafafa;
            overflow: auto;
        }
        .pg-body .content .section{
            height: 500px;
        }
    </style>
</head>
<body>

    <div class="pg-header">
        <div class="wrap clearfix">
            <div class="logo">
                <a href="#">
                    <img src="">
                </a>
            </div>
            <div class="nav">
                <ul>
                    <li>
                        <a  href="#">首页</a>
                    </li>
                    <li>
                        <a  href="#">功能一</a>
                    </li>
                    <li>
                        <a  href="#">功能二</a>
                    </li>
                </ul>
            </div>

        </div>
    </div>

    <div class="pg-body">
        <div class="wrap">
            <div class="catalog">
                <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
                <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
                <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
            </div>

            <div class="content">
                <div menu="function1" class="section" style='background-color:green;'>
                    <h1>第一章</h1>
                </div>
                <div menu="function2" class="section" style='background-color:yellow;'>
                    <h1>第二章</h1>
                </div>
                <div menu="function3" class="section" style='background-color:red;'>
                    <h1>第三章</h1>
                </div>
            </div>
        </div>

    </div>

    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript">

        $(function(){
            // 自动执行
            Init();
        });

        function Init(){

            $(window).scroll(function() {
                // 监听窗口滚动事件

                // 获取滚动条高度
                var scrollTop = $(window).scrollTop();

                // 当滚动到50像素时，左侧带菜单固定
                if(scrollTop > 50){
                    $('.catalog').addClass('fixed');
                }else{
                    $('.catalog').children().removeClass('active');
                    $('.catalog').removeClass('fixed');
                }

                // 循环所有的内容
                $('.content').children().each(function(){
                    // 当前标签距离顶部高度
                    var offSet = $(this).offset(); // 高度，左边有多远
                    // offSet.top
                    // offSet.left

                    // 自身高度
                    var height = $(this).height();

                    //offSet<滚动高度<offSet+height

                    // 当前内容位于用户阅览区
                    if(scrollTop>offSet.top && scrollTop< offSet.top + height){
                        // $(this) 当前内容标签
                        /*
                        var target = $(this).attr('menu');
                        $('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active');
                        return false;
                        */

                        var docHeight = $(document).height();
                        var winHeight = $(window).height();
                        // 如果，滚轮到达底部，则显示最后一个菜单
                        if(docHeight == winHeight+scrollTop)
                        {
                            $('.catalog').find('div:last-child').addClass('active').siblings().removeClass('active');
                        }else{
                            var target = $(this).attr('menu');
                            $('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active');
                        }
                        return false;

                    }
                });

            });

        }

    </script>
</body>
</html>

滚动菜单--demo

注：以上demo需要下载jquery，配合使用

前端插件

fontawsome 小图片插件
easyui 基于jQuery的UI插件集合体
jqueryui 是jQuery插件，专指由jQuery官方维护的UI方向的插件
bootstrap 模板使用
- -- 引入css
- -- 引入jQuery（2.x，1.12）
- -- 引入js
bxslider 滚动图片插件

jquery.lazyload 延迟加载图片滚动多少加载多少

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <style>
         body{
             margin: 0 auto;
         }
         .pg-header{
             height: 48px;
             background-color: #3b5998;
         }
         .w{
             width: 980px;
             margin: 0 auto;
         }
         .clearfix:after{
             clear: both;
             content: '.';
             visibility: hidden;
             height: 0;
             display: block;
         }
         .product-list .item{
             float: left;
             height: 240px;
             width: 184px;
             overflow: hidden;
             border: 1px solid red;
             padding: 5px;
         }
         .product-list .item .lazy{

             height: 200px;
             width: 184px;
         }
     </style>
 </head>
 <body>
     <div class="pg-header"></div>
     <div class="pg-body">
         <div class="w">
             <div class="product-list clearfix">
                 <div class="item">
                     <img class="lazy" data-original="img/1.png"/>
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/2.png" />
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/3.png"/>
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/4.png"/>
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/5.png"/>
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/6.png" />
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/7.png"/>
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/8.png"/>
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/9.png" />
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/10.png" />
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/11.png"/>
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/12.png"/>
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/13.png"/>
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/14.png" />
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/15.png" />
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/16.png" />
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/17.png" />
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/1.png"/>
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/2.png" />
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/3.png"/>
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/4.png"/>
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/5.png"/>
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/6.png" />
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/7.png"/>
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/8.png"/>
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/9.png" />
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/10.png" />
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/11.png"/>
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/12.png"/>
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/13.png"/>
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/14.png" />
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/15.png" />
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/16.png" />
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/17.png" />
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/1.png"/>
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/2.png" />
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/3.png"/>
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/4.png"/>
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/5.png"/>
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/6.png" />
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/7.png"/>
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/8.png"/>
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/9.png" />
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/10.png" />
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/11.png"/>
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/12.png"/>
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/13.png"/>
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/14.png" />
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/15.png" />
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/16.png" />
                 </div>
                 <div class="item">
                     <img class="lazy" data-original="img/17.png" />
                 </div>

             </div>
         </div>
         </div>
     <div class="pg-footer"></div>

     <script src="js/jquery-1.12.4.js"></script>
     <script src="js/jquery.lazyload.js"></script>
     <script>
         $(function(){
             $('img.lazy').lazyload({
                 //container: $('.product-list'),   // 对指定标签对象内的图片实现效果，表示在此标签中滚动时，触发加载（注意：如果容器未设置height和overfload:auto，那么会默认加载所有图片）
                 threshold: 100,                    //当图片顶部距离显示区域还有100像素时，就开始加载
                 placeholder : "img/grey.gif",      // 图片未加载时，占位
                 effect: "slideDown",               // 图片出现的效果，值有show(直接显示),fadeIn(淡入),slideDown(下拉)
                 effect_speed: 1000,                // 效果出现的时间
                 event: 'scroll',                   // 滚动滚轮时触发，可以是：click、mouseover等
                 data_attribute: 'original',        // img标签中保存url的自定义属性，默认：data-original
                 skip_invisible: true,              // 是否跳过已经隐藏的图片（display:none）
                 failure_limit: 2,                  // 由于延迟加载是根据Dom从上到下执行
                                                    // 如果遇到Dom位置在上，但是图片定位在下导致看不到，那么会以为之后的图片不在应用延迟加载
                                                    // 此处的failure_limit用于限制如果出现N个【Dom位置在上，但是图片定位在下】才终止
                 appear: function(){                // 当图片位置刚出现在视图时，触发此事件
                     $(this).attr('src');
                 },
                 load: function(){                  // 当图片路径加载之后，触发此事件
                     $(this).attr('src');
                 }

             });
         })
     </script>
 </body>
 </html>

lazyload--demo_HTML

$(function(){
    $('img.lazy').lazyload({
        //container: $('.product-list'),   // 对指定标签对象内的图片实现效果，表示在此标签中滚动时，触发加载（注意：如果容器未设置height和overfload:auto，那么会默认加载所有图片）
        threshold: 100,                    //当图片顶部距离显示区域还有100像素时，就开始加载
        placeholder : "img/grey.gif",      // 图片未加载时，占位
        effect: "slideDown",               // 图片出现的效果，值有show(直接显示),fadeIn(淡入),slideDown(下拉)
        effect_speed: 1000,                // 效果出现的时间
        event: 'scroll',                   // 滚动滚轮时触发，可以是：click、mouseover等
        data_attribute: 'original',        // img标签中保存url的自定义属性，默认：data-original
        skip_invisible: true,              // 是否跳过已经隐藏的图片（display:none）
        failure_limit: 2,                  // 由于延迟加载是根据Dom从上到下执行
                                           // 如果遇到Dom位置在上，但是图片定位在下导致看不到，那么会以为之后的图片不在应用延迟加载
                                           // 此处的failure_limit用于限制如果出现N个【Dom位置在上，但是图片定位在下】才终止
        appear: function(){                // 当图片位置刚出现在视图时，触发此事件
            $(this).attr('src');
        },
        load: function(){                  // 当图片路径加载之后，触发此事件
            $(this).attr('src');
        }

    });
})

参数说明

源码下载

web框架

对于所有的Web应用，本质上其实就是一个socket服务端，用户的浏览器其实就是一个socket客户端。

WEB框架前面有WSGI或者是自己写的SOCKET，然后交给URL路由系统处理，然后交给某个函数或某个类，然后在模板里拿到模板然后模板和数据进行混合然后返回给用户！

WSGI用来接收请求，然后封装请求。对于Django来说都封装到了request里面。

MVC/MTV架构的不同主要是他们处理请求不同内容来放到不同的目录

请求周期
处理用户请求　　放置HTML模版　　操作数据库
Controllers 　　　　 Views 　　　　　Modals

Views 　　　　　　 Template 　　　　Modals

其中Django属于MTV架构

Django框架

1、安装

pip3 install django

2、创建项目(前提环境变量配置好)

django-admin startproject HelloWorld

pycharm中可以直接进行创建project选择django项目

3、创建应用

python3 manage.py startapp cmdb

4、修改urls

from cmdb import views

url(r'^index/', views.index),

5、添加index函数在views

from django.shortcuts import HttpResponse

def index(request):

return HttpResponse("Hello World")

6、启动django

python manage.py runserver 127.0.0.1:8000

在pycharm中可以直接点击启动，访问http://127.0.0.1:8000/index/

7、修改setting中添加默认模板位置配置

TEMPLATES

'DIRS': [os.path.join(BASE_DIR, 'templates')],

项目目录下面添加创建templates目录，如果存在则不用创建，再在templates下创建index.html

8、访问html文件

views下面用render返回

from django.shortcuts import render

def index(request):

return render(request,'index.html')

重新启动访问http://127.0.0.1:8000/index/就能看到index.html中的内容了

9、配置静态文件目录js、css、图片等目录

setting中最后添加如下配置

STATICFILES_DIRS = (
os.path.join(BASE_DIR,"statics"),
)

配置之后在项目project的目录下添加statics目录，并将jquery文件放入到该目录

STATIC_URL = '/static/' 表示引用的前缀

index.html中调用jquery地址如下：

10、浏览网页时候点击提交提示403的报错，需要将如下注释掉

MIDDLEWARE_CLASSES
　　#'django.middleware.csrf.CsrfViewMiddleware',

由于版本不同， MIDDLEWARE_CLASSES可能不相同，只需要注释'django.middleware.csrf.CsrfViewMiddleware'，这一行即可

11、配置提交的请求views，获取提交上来的数据并处理views

# 处理用户请求
USER_INPUT = [
    {'user':'u1', 'email': 'e1'},
    {'user':'u2', 'email': 'e2'},
]

def index(request):
    # ...
    # 判断用户是否是POST请求
    if(request.method == 'POST'):
        user = request.POST.get('user',None)
        email = request.POST.get('email',None)
        temp = {'user': user, 'email': email}
        USER_INPUT.append(temp)
        # request.POST.get('pwd',None)

    # return HttpResponse('123')
    # 模版引擎
    # 获取index.html模版 + {'data': USER_INPUT } ==》 渲染
    # 字符串
    return render(request, 'index.html', {'data': USER_INPUT })

# def index(request):
#     # return HttpResponse("Hello World")
#     return  render(request,'index.html')

views配置

12、在实际的环境中我们需要将提交和读取的数据放到数据库中的，相关sqllite配置如下：

views配置，获取收到的数据和返回处理后的数据，setting中注册APP（在settings里面注册，如果没有注册不能忘记要不然不能创建数据表）

from django.shortcuts import render
from django.shortcuts import HttpResponse
from cmdb import  models

# Create your views here.
# 处理用户请求

def index(request):
    # ...
    # 判断用户是否是POST请求
    if(request.method == 'POST'):
        # user = request.POST.get('user',None)
        # email = request.POST.get('email',None)
        u = request.POST.get('user',None)
        e = request.POST.get('email',None)
        models.UserInfo.objects.create(user=u,email=e)

    data_list = models.UserInfo.objects.all()

    return render(request, 'index.html', {'data': data_list })

views配置

//INSTALLED_APPS 中添加创建的应用名称
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'cmdb'
]

setting配置

```
from django.db import models

# Create your models here.

class UserInfo(models.Model):
    user = models.CharField(max_length=32)
    email = models.CharField(max_length=32)
```
models配置
models配置完之后需要执行创建表，两条命令

python3 manage.py makemigrations
python3 manage.py migrate 读取这个数据库结构生成数据库表，执行之后在应用名/migrations/0001_initial.py这个文件
重新启动就能看到效果了，将所有读取和写入的数据都进入到sqllite中了，不会重启之后数据就显示不出来了。

13、在实际应用中可能会涉及到跳转，django配置跳转的话

在views配置导入模块from django.shortcuts import redirect

返回跳转后的地址，可以是外部的地址也可以是自己做的页面地址return redirect('http://baidu.com')