python day17
Posted A+
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了python day17相关的知识，希望对你有一定的参考价值。
Query示例： 表单验证，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 -- 特殊符号 滚动菜单 页面布局（absolute） 监听滚动事件： 如果滚动>60,菜单固定 如果滚动<60,菜单固定取消 Ajax(欠) 前端插件： fontawsome easyui jqueryui bootstrap -- 引入css -- 引入jQuery（2.x，1.12） -- 引入js -- bootstrap模版 bxslider jquery.lazyload ==> 以后可以用模版 验证失败报错 relative 和 absolute 合用是内容可以随意调整 <!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 CheckValid() { // 找到form标签下的所有需要验证的标签 // $(\'form .c1\') // $(\'form input[type="text"],form input[type="password"]\') // 循环所有需要验证的标签，获取内容 // 先清除 $(\'form .item span\').remove(); var flag = true; // each循环 $(\'form .c1\').each(function () { var val = $(this).val(); if(val.length<=0){ // attr获取属性 var label = $(this).attr(\'label\'); var tag = document.createElement(\'span\'); tag.innerText = label + "不能为空"; // after在之后加内容 $(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{ 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(); }); function BindCheckValid(){ // $(\':submit\').click(function () { $(\'form input[type=submit]\').click(function () { var flag = true; // 只要一点击submit按钮,执行此处内空，找到form标签下的所有需要验证的标签 $(\'form .item span\').remove(); $(\'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扩展 1.自执行函数 2.闭包，防多个扩展文件函数名冲突 extend1.js /** * Created by Administrator on 2016/8/28. */ // 自执行函数,参数即$，$即jQuery (function (jq) { jq.extend({ \'dalong1\':function (arg) { console.log(arg); } }); function f1() { } })(jQuery); s3.html <!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> // 调用dalong $.dalong1(\'123\'); </script> </body> </html> FORM验证，单文件定义限制规则 commons.js /** * Created by alex on 2016/8/28. */ // 自定义函数 (function(jq){ // 通用验证函数 function ErrorMessage(inp,message){ var tag = document.createElement(\'span\'); tag.innerText = message; inp.after(tag); } // JQUREY扩展 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); 4.html <!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(){ // 传form1给commons的function $.valid(\'#form1\'); }); </script> </body> </html> 正则表达式 http://www.cnblogs.com/wupeiqi/articles/5433893.html Web框架 请求周期 处理用户请求 放置HTML模版 操作数据库 Controllers Views Modals Views Template Modals MVC/MTV Django => MTV Django 1.安装 pip3 install Django==1.10 或 pip3 install Django 2.创建project django-admin.py startproject mysite 目录结构 mysite mysite - settings.py # 配置文件 - urls.py # 路由系统(调度) - wsgi.py # WSGI managel.py # django程序启动文件 3.创建APP 所有APP共享project cd mysite python3 manage.py startapp cmdb cmdb __init__.py admin.py # WEB后台管理 apps.py # 当前app配置文件 models.py # 数据库管理，自动创建数据结构 tests.py # 单元测试，测试你的某个功能 views.py # 业务请求处理 4.编写代码 urls.py views.py (1) 配置路由关系 urls.py urls.py from cmdb import views #导入views模块 urlpatterns = [ # url(r\'^admin/\', admin.site.urls), url(r\'^index/\', views.index), # 配置映射关系,逗号前是url，逗号后为交给某一函数(view模块的index函数) ] (2) 配置业务请求处理 views.py views.py 创建对应自己的函数 cmdb 的 views 处理用户请求，必须为函数 from django.shortcuts import HttpResponse # 导入处理模块 # Create your views here. # 处理用户请求 def index(request): # 处理函数，用户请求放入request中 return HttpResponse(\'123\') # 处理字符串，必须放在HttpResponse才能识别 5.启动Django程序 python3 manage.py runserver 8000 python manage.py runserver #测试 启动web服务器，只允许本地访问 python manage.py runserver 0.0.0.0:8080 #允许所有 6.访问 http://127.0.0.1:8000/index/ 7.使用模板 settings配置 指定Template目录，告诉django配置文件在那里 render传递数据给html (request,\'路径\') (1) Template # 放置HTML模版，可新建 index.html # 手动创建 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1 style="color: red">123</h1> </body> </html> (2) views #配置业务请求处理，指定html文件，在cmdb目录下 from django.shortcuts import render def index(request): # return HttpResponse(\'123\') return render(request,\'index.html\') #使用render方法指定html (3) 启动并访问 python manage.py runserver 0.0.0.0:8080 http://127.0.0.1:8000/index/ 8. 静态文件配置 (1) statics # 手动创建，在mysite主目录创建 jquery-1.8.2.min.js # 存入jquery文件 (2) index.html 指定statics <script src="/statics/jquery-1.8.2.min.js"></script> (3) settings 指定statics,在文件最后添加 (1) 指定静态文件目录 STATICFILES_DIRS = ( os.path.join(BASE_DIR,\'statics\'), ) (2) 指定HTML引用静态文件的前缀，可选项，非必选 STATIC_URL = \'/fff/\' #指定前缀为fff (4) index.html 引用前缀 <script src="/fff/jquery-1.8.2.min.js"></script> (5) 访问 F12 --- Elements----/fff/jquery-1.1.8.2.min.js----右键---open link in new tab打开成功即可 9.表单操作及页面展示(内存版) (1)表单页面 <body> <h1>用户输入：</h1> {#以POST方式提交#} <form action="/index/" method="POST"> <input type="text" name="user"/> <input type="test" name="email"/> <input type="submit" value="提交"/> </form> </body> (2)views处理 # 判断用户是否是POST请求 from django.shortcuts import render from django.shortcuts import HttpResponse # Create your views here. def index(request): # return HttpResponse(\'123\') # 判断 if (request.method == \'POST\'): user = request.POST.get(\'user\', None) email = request.POST.get(\'email\', None) print(user, email) return render(request,\'index.html\') 直接访问会提交会报错，是DJANGO提供的跨站请求伪造，可以通过settings修改处理 Forbidden (403) CSRF verification failed. Request aborted. (3)settings修改 MIDDLEWARE 或 MIDDLEWARE-CLASSES 列表注释掉 django.middleware.csrf.CsrfViewMiddleware 这一行 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\', ] (4)页面提交 提交内容为 123 123 后台接收到数据 123 123 [31/Aug/2016 23:13:28] "POST /index/ HTTP/1.1" 200 339 (5)数据展示 (1)views 处理数据 from django.shortcuts import render from django.shortcuts import HttpResponse # 1. 处理用户请求 u1和e1为两列，u1和u2为两行 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) # 2. 追加到列表 # request.POST.get(\'pwd\',None) # return HttpResponse(\'123\') # 模版引擎 # 获取index.html模版 + {\'data\': USER_INPUT } ==》 渲染 # 字符串 #传递给HTML return render(request, \'index.html\', {\'data\': USER_INPUT }) # 3. 传递给HTML使用data指定USER_INPUT列表 (2)HTML 编写代码，按django方式对数据进行for循环生成列表(取的是views里的data和USER_INPUT数据) django的for循环必须有开始有结束{% for item in data %}, {% endfor %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>用户输入：</h1> {#以POST方式提交#} <form action="/index/" method="POST"> <input type="text" name="user"/> <input type="test" name="email"/> <input type="submit" value="提交"/> </form> <h1>数据展示：</h1> <table border="1"> {% for item in data %} {# tr为行，td为列#} <tr> <td>{{ item.user }}</td> <td>{{ item.email }}</td> </tr> {% endfor %} </table> <script src="/fff/jquery-1.8.2.min.js"></script> </body> </html> 页面初始列表样式 －－－－ ｜u1｜e1｜ ｜－－－｜ ｜u2｜e2｜ －－－－ (3)提交数据到内存，输入内容后提交后在表格显示 http://127.0.0.1:8000/index/ 10.连接数据库 默认使用sqlite数据库 ORM 数据结构管理 models.py settings (1)models.py #配置数据库，创建类，生成数据库UserInfo表，指定字符长度 class UserInfo(models.Model): user = models.CharField(max_length=32) email = models.CharField(max_length=32) (2)注册app: settings.py # 指定APP名字 INSTALLED_APPS = [ \'django.contrib.admin\', \'django.contrib.auth\', \'django.contrib.contenttypes\', \'django.contrib.sessions\', \'django.contrib.messages\', \'django.contrib.staticfiles\', \'cmdb\', ] (3)执行命令，创建库和表 python3 manage.py makemigrations python3 manage.py migrate 两条命令完自动创建UserInfo表 返回结果： makemigrations返回结果 Migrations for \'cmdb\': cmdb\\migrations\\0001_initial.py: -以上是关于python day17的主要内容，如果未能解决你的问题，请参考以下文章
人生苦短，我用python-- Day17 jQuery讲解