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);
<!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^s@6#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'), )
"""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), ]
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})
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)
