python Django day17
表單幾本驗證（Dom綁定）javascript
<!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 .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綁定）css
<!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() {
$('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 循環html
（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>
jQueryk=擴展java
a、自執行函數python
b、閉包jquery
/**
* Created by alex on 2016/8/28.
*/
(function(jq){
jq.extend({
'dalong1': function(arg){
console.log(arg);
}
});
function f1(){
}
})(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> <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擴展實現基本驗證web
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; } } // 一、html自定義標籤屬性 // 增長驗證規則+錯誤提示 } }); return flag; }); } }); })(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>
正則表達式
一、定義正則表達式
- /.../ 用於定義正則表達式
- /.../g 表示全局匹配
- /.../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()
二、匹配
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)
字符串中相關方法
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{
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>
前端插件：
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
添加環境變量
一、建立
//命令建立 django-admin startproject mysite
還能夠經過pycharm建立
#project
mysite
mysite
-settings.py #配置路由文件
-urls.py #路由系統
-wsgi.py #WSGI
manage.py #django程序啓動文件
二、建立APP
cd mysite
python manage.py startapp cmdb
三、編寫代碼
urls.py
view.py 函數
基本請求流程：
from django.shortcuts import render
from django.shortcuts import HttpResponse
# Create your views here.
def index(request):
return HttpResponse('123')
from django.conf.urls import url
from cmdb import views
urlpatterns = [
url(r'^index/', views.index),
]
訪問 http://127.0.0.1:8000/index 會看到 123說明成功訪問
四、啓動django程序 python manage.py runserver 127.0.0.1:8000
五、使用模版
settings.py配置
render(request,‘路徑’)
六、建立靜態文件夾並配置
statics目錄放置靜態文件(js\css\圖片)
STATIC_URL = '/fff/' #前綴
STATICFILES_DIRS = (
os.path.join(BASE_DIR,'statics'),
)
//引用文件
<script src="/fff/jquery-1.8.2.min.js"></script>
七、鏈接數據庫，操做數據庫
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
八、操做數據庫
建立：
models.類.objects. create(user=u,pwd=p)
獲取：
models.類.objects.all()
相關文章
- 1. DAY17-Django之model查詢
- 2. day17-Django進階及orm
- 3. Python學習day17
- 4. Python Day17(jQuery)
- 5. Python學習day17 任務發佈
- 6. day17
- 7. DAY17
- 8. Python學習路程day17
- 9. DAY17-認證系統
- 10. day17--JQuery
- 更多相關文章...
- • SQLite - Python - SQLite教程
- • Docker 安裝 Python - Docker教程
- • YAML 入門教程
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. DAY17-Django之model查詢
- 2. day17-Django進階及orm
- 3. Python學習day17
- 4. Python Day17(jQuery)
- 5. Python學習day17 任務發佈
- 6. day17
- 7. DAY17
- 8. Python學習路程day17
- 9. DAY17-認證系統
- 10. day17--JQuery