zoukankan html css js c++ java

python Django day17

表单几本验证（Dom绑定）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
             250px;
            height: 60px;
            position: relative;
        }
        .item input{
             200px;
        }
        .item span{
            position: absolute;
            top: 20px;
            left: 0px;
            font-size: 8px;
            background-color: indianred;
            color: white;
            display: inline-block;
             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>
        function CheckValid() {
            $('form .item span').remove();
            var flag = true;

            $('form .c1').each(function () {
                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 flag;
        }
    </script>
</body>
</html>

表单验证（jQuery绑定）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
             250px;
            height: 60px;
            position: relative;
        }
        .item input{
             200px;
        }
        .item span{
            position: absolute;
            top: 20px;
            left: 0px;
            font-size: 8px;
            background-color: indianred;
            color: white;
            display: inline-block;
             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();" />-->
            <input type="submit" value="提交" />
        </form>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
           BindCheckValid();
        });

        function BindCheckValid() {

            $('form :submit').click(function () {
                $('form .item span').remove();
                var flag = true;

                $('form .c1').each(function () {
                    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 flag;

            });

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

jQuery each 循环

（return false 表示break）

<!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>
            <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();" />-->
            <input type="submit" value="提交" />
        </form>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>

        function BindCheckValid(){

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

            })
        }

        BindCheckValid();

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

each循环

jQueryk=扩展

a、自执行函数

b、闭包

/**
 * Created by alex on 2016/8/28.
 */

(function(jq){
    jq.extend({
        'dalong1': function(arg){
            console.log(arg);
        }
    });

    function f1(){

    }
})(jQuery);

extend1

<!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>
            <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();" />-->
            <input type="submit" value="提交" />
        </form>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script src="extend1.js"></script>
    <script>
        $.dalong1('123');


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

导入直接用

jquery扩展实现基本验证

a. 支持是否允许为空

b. 长度

c. 正则表达式

/**
 * Created by alex on 2016/8/28.
 */
(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自定义标签属性
                        // 增加验证规则+错误提示
                    }

                });

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

commons.js

<!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>

直接导入引用

正则表达式

1、定义正则表达式

/.../ 用于定义正则表达式
/.../g 表示全局匹配
/.../i 表示不区分大小写
/.../m 表示多行匹配
JS正则匹配时本身就是支持多行，此处多行匹配只是影响正则表达式^和$，m模式也会使用^$来匹配换行的内容)

var pattern = /^Javaw*/gm;
var text = "JavaScript is more fun than 
JavaEE 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
 
# 只要正则在字符串中存在就匹配，如果想要开头和结尾匹配的话，就需要在正则前后加 ^和$

View Code

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

获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组。
 
非全局模式
    获取匹配结果数组，注意：第一个元素是第一个匹配的结果，后面元素是正则子匹配（正则内容分组匹配）
    var pattern = /Javaw*/;
    var text = "JavaScript is more fun than Java or JavaBeans!";
    result = pattern.exec(text)
 
    var pattern = /(Java)w*/;
    var text = "JavaScript is more fun than Java or JavaBeans!";
    result = pattern.exec(text)
 
全局模式
    需要反复调用exec方法，来一个一个获取结果，直到匹配获取结果为null表示获取完毕
    var pattern = /Javaw*/g;
    var text = "JavaScript is more fun than Java or JavaBeans!";
    result = pattern.exec(text)
 
    var pattern = /(Java)w*/g;
    var text = "JavaScript is more fun than Java or JavaBeans!";
    result = pattern.exec(text)

字符串中相关方法

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

滚动菜单

<!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{
             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;
             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;
             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;
             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>

前端插件：

fontawsome

easyui

jqueryui

bootstrap

　　-- 引入css

　　-- 引入jQuery（2.x，1.12）

　　-- 引入js

　　-- bootstrap模版

bxslider

jquery.lazyload

Web框架

请求周期

处理用户请求放置HTML模版　　操作数据库

Controllers 　　Views 　　　　Modals 　　MVC

Views 　　　　Template 　　　　Modals MTV

MVC/MTV

Django => MTV

Django 功能齐全

安装： pip3 install django

　　　添加环境变量

1、创建

//命令创建
django-admin startproject mysite

还可以通过pycharm创建

#project

mysite

　　　　-settings.py　　#配置路由文件

　　　　-urls.py 　　　 #路由系统

　　　　-wsgi.py 　　　 #WSGI

　　manage.py　　　　 #django程序启动文件

2、创建APP

　　cd mysite

　　python manage.py startapp cmdb

3、编写代码

　　urls.py

　　view.py 函数

基本请求流程：

from django.shortcuts import render
from django.shortcuts import HttpResponse
# Create your views here.
def index(request):
    return HttpResponse('123')

views.py

from django.conf.urls import url
from cmdb import views

urlpatterns = [
    url(r'^index/', views.index),
]

urls.py

访问 http://127.0.0.1:8000/index 会看到 123说明成功访问

4、启动django程序 python manage.py runserver 127.0.0.1:8000

5、使用模版

　　settings.py配置

　　render(request,‘路径’)

6、创建静态文件夹并配置

statics目录放置静态文件(jscss图片)

STATIC_URL = '/fff/'  #前缀

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


//引用文件
<script src="/fff/jquery-1.8.2.min.js"></script>

7、连接数据库，操作数据库

settings.py

注册App：

我们的app叫cmdb,所以添加到最后

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'cmdb',
]

models.py

class UserInfo(models.Model):
    user = models.CharField(max_length=32)
    pwd = models.CharField(max_length=32)

执行命令：

之后命令后自动创建表

python manage.py makemigrations
python manage.py migrate

8、操作数据库

创建：

models.类.objects. create(user=u,pwd=p)

获取：

models.类.objects.all()

查看全文

相关阅读:
boost::asio在VS2008下的编译错误
 Java集合框架——接口
 ACM POJ 3981 字符串替换（简单题）
ACM HDU 1042 N!（高精度计算阶乘）
OneTwoThree (Uva)
ACM POJ 3979 分数加减法（水题）
ACM HDU 4004 The Frog's Games（2011ACM大连赛区第四题）
Hexadecimal View （2011ACM亚洲大连赛区现场赛D题）
ACM HDU 4002 Find the maximum（2011年大连赛区网络赛第二题）
ACM HDU 4001 To Miss Our Children Time （2011ACM大连赛区网络赛）

原文地址：https://www.cnblogs.com/QL8533/p/5824549.html