day17前端补充+Django入门

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了day17前端补充+Django入门相关的知识,希望对你有一定的参考价值。

---恢复内容开始---

jQuery示例:
表单验证,jQuery扩展
1、回顾基础内容

2、dom事件绑定

3、jquery事件绑定

4、$.each return false 表示break;

5、jquery扩展方法:
两种方式:

6、自定义jQuery扩展的正确方法:
a. 自执行
b. 闭包

7、jquery扩展实现基本验证

a. 支持是否允许为空

b. 长度

c. 正则表达式
定义正则表达式
reg = /正则表达式/ *****
g
i
m ==> 特殊

利用正则匹配
reg.test(字符串) *****
reg.exec(字符串)
全局
非全局
字符串三个方法:
search
match
replace
-- 特殊符号

技术分享
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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();" />
        </form>
    </div>

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

        function BindCheckValid() {

            $(form input).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;

            });

        }



//        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>
表格验证

 

技术分享
/**
 * Created by Aaron on 2016/8/28.
 */

(function (jq) {
    jq.extend({
        ‘aaron1‘: function (arg) {
            console.log(arg);
        }
    });
        function f1() {

    }
})(jQuery);
extend1
技术分享
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="jquery-1.12.4.js"></script>
    <script src="extend1.js"></script>
    <script>
        $.aaron1(aaron111)
    </script>
</body>
</html>
闭包的解决方案

 



滚动菜单
页面布局(absolute)
监听滚动事件:
如果滚动>60,菜单固定
如果滚动<60,菜单固定取消
技术分享
<!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>
滑动菜单

 


Ajax(欠)

前端插件:
fontawsome

easyui
jqueryui
**bootstrap
-- 引入css

-- 引入jQuery(2.x,1.12)
-- 引入js

-- bootstrap模版


bxslider
jquery.lazyload

==> 以后可以用模版




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

Views Template Modals

MVC/MTV


Django => MTV


Django
    功能齐全
    安装:
        pip3 install django
        
        添加环境变量
        
    1、创建
        django-admin startproject mysite
        
        
        #project
        mysite
            mysite
                - setting.py  配置文件(各种位置信息)
                - urls.py     路由系统
                - wsgi.py      socket
                
            manage.py # django程序启动文件
            
            
        #app 处理请求
            cd mysite
            python manage.py startapp cmdb
        
            监控
            cmdb
        
        编写代码
        
            urls.py    映射关系
            views.py
            
        启动Django程序
            python manage.py runserver 127.0.0.1:8000
            pycharm可以直接启动
            
            
        使用模板
            settings配置
            render(request,‘路径‘)
            
        静态文件的配置(可以放一切文件)
        
            STATIC_URL = ‘/fff/‘ 调用时用的目录
            STATICFILES_DIRS = (
                os.path.join(BASE_DIR,‘statics‘),
            )
        
            starics 目录放置静态文件
            
            <script src="/fff/jquery-1.8.2.min.js"></script
        
        连接数据库,操作数据库
        ORM
        settings.py
        
        
        modals.py
        
            class UserInfo(models.Model):
                user = models.CharField(max_lenth=32)
                email = models.CharField(max_lenth=32)
                
        注册app
        
                INSTALLED_APPS = [
                ‘django.contrib.admin‘,
                ‘django.contrib.auth‘,
                ‘django.contrib.contenttypes‘,
                ‘django.contrib.sessions‘,
                ‘django.contrib.messages‘,
                ‘django.contrib.staticfiles‘,
                ‘cmdb‘,
            ]
            
        执行命令:
            python manage.py makemigrations
            python manage.py migrate
            
            
    操作数据库
注册:
    检测:
        m = models.类.objects.filter(user="alex").count()
        # 获取用户名等于alex的数据个数
    创建:
        models.类.objects.create(user=u,email=e)
    获取
        models.类.objects.all()
        
登录:
    检测:
        m = models.类.objects.filter(user="alex").count()
    成功后:跳转
        from django.shortcuts import redirect
        def login(request):
            # ...
            # 判断用户是否是POST请求
            # return redirect(‘http://baidu.com‘)
            return redirect(‘/index/‘)
        
    失败后:当前页面
    
后台管理:
    Form提交数据:Form验证
    后台添加数据
    
    
预习Django:

    django book

技术分享
"""
Django settings for mysite1 project.

Generated by ‘django-admin startproject‘ using Django 1.10.

For more information on this file, see
https://docs.djangoproject.com/en/1.10/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/1.10/ref/settings/
"""

import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/1.10/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 57yh^=b()#=sw%apn4^[email protected]#5v16v632p$!1ebby6$o+1!o_mi-

# SECURITY WARNING: don‘t run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

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

MIDDLEWARE = [
    django.middleware.security.SecurityMiddleware,
    django.contrib.sessions.middleware.SessionMiddleware,
    django.middleware.common.CommonMiddleware,
    # ‘django.middleware.csrf.CsrfViewMiddleware‘,
    django.contrib.auth.middleware.AuthenticationMiddleware,
    django.contrib.messages.middleware.MessageMiddleware,
    django.middleware.clickjacking.XFrameOptionsMiddleware,
]

ROOT_URLCONF = mysite1.urls

TEMPLATES = [
    {
        BACKEND: django.template.backends.django.DjangoTemplates,
        DIRS: [os.path.join(BASE_DIR, templates)]
        ,
        APP_DIRS: True,
        OPTIONS: {
            context_processors: [
                django.template.context_processors.debug,
                django.template.context_processors.request,
                django.contrib.auth.context_processors.auth,
                django.contrib.messages.context_processors.messages,
            ],
        },
    },
]

WSGI_APPLICATION = mysite1.wsgi.application


# Database
# https://docs.djangoproject.com/en/1.10/ref/settings/#databases

DATABASES = {
    default: {
        ENGINE: django.db.backends.sqlite3,
        NAME: os.path.join(BASE_DIR, db.sqlite3),
    }
}


# Password validation
# https://docs.djangoproject.com/en/1.10/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        NAME: django.contrib.auth.password_validation.UserAttributeSimilarityValidator,
    },
    {
        NAME: django.contrib.auth.password_validation.MinimumLengthValidator,
    },
    {
        NAME: django.contrib.auth.password_validation.CommonPasswordValidator,
    },
    {
        NAME: django.contrib.auth.password_validation.NumericPasswordValidator,
    },
]


# Internationalization
# https://docs.djangoproject.com/en/1.10/topics/i18n/

LANGUAGE_CODE = en-us

TIME_ZONE = UTC

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.10/howto/static-files/

STATIC_URL = /statics/
STATICFILES_DIRS = (
    os.path.join(BASE_DIR,statics),
)
settings
技术分享
"""mysite1 URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/1.10/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  url(r‘^$‘, views.home, name=‘home‘)
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  url(r‘^$‘, Home.as_view(), name=‘home‘)
Including another URLconf
    1. Import the include() function: from django.conf.urls import url, include
    2. Add a URL to urlpatterns:  url(r‘^blog/‘, include(‘blog.urls‘))
"""
from django.conf.urls import url
from django.contrib import admin
from cmdb import views

urlpatterns = [
    # url(r‘^admin/‘, admin.site.urls),
    url(r^index/, views.index),
    url(r^login/, views.login),
]
urls
技术分享
from django.shortcuts import render
from django.shortcuts import redirect
from django.shortcuts import HttpResponse
from cmdb import models
# Create your views here.

def index(request):
    # return HttpResponse(‘123‘)
    if request.method == POST:
        userid = request.POST.get(userid, None)
        usrtel = request.POST.get(usrtel, None)
        email = request.POST.get(email, None)
        psw = request.POST.get(psw, None)
        user_check = models.UserInfo.objects.filter(user=userid).count()
        pass_check = models.UserInfo.objects.filter(user=userid).filter(pwd=psw).count()
        if userid and psw:
            if email and usrtel:
                if user_check >= 1:
                    return render(request, index.html)
                else:
                    models.UserInfo.objects.create(user=userid, phone=usrtel, mail=email, pwd=psw)
                    return render(request, ret.html)
            else:
                if user_check != 0 and pass_check != 0 :
                    data_list = models.UserInfo.objects.all()
                    # return render(request, ‘login.html‘, {‘data‘: data_list})
                    return redirect(/login/,)
                else:
                    return render(request, index.html)
        else:
            return render(request, index.html)
    return render(request, index.html)


def login(request):
    data_list = models.UserInfo.objects.all()
    return render(request, login.html, {data: data_list})
views
技术分享
from django.db import models

# Create your models here.

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

 
































以上是关于day17前端补充+Django入门的主要内容,如果未能解决你的问题,请参考以下文章

python学习_day69_django入门项目(老师表)

python_day17_Django-1

人生苦短,我用python-- Day19 django框架之URL路由系统视图应用模板应用django之orm应用

python—day58 Django介绍 之模板补充路由

重修课程day61(django之补充)

day17-django的ORM与其他