python 自動化之路 day 18 前端內容回顧、補充/Django安裝、建立

前端回顧： 

總體：
- HTML
- CSS
- JavaScript
- 基本數據類型
- for，while..
- DOM
- obj = document.getElementById('..')
- obj.innerHtml
- BOM:
- setInterval。。。
----> 能夠完成全部操做 <----

- jQuery：
- 選擇器 $('#') $('.')
- 篩選器 $('#').find('')
- 內容或屬性
- $('#i1').val() input系列，select,textarea
- $('#i1').text()
- $('#i1').html()
------------------------
- $('#i1').attr
- $('#i1').prop('checked',true)
------------------
- $('#i1').empty()
- $('#i1').remove()
- css
$('#i1').addClass
$('#i1').removeClass
$('#i1').css('color','xxxx')

$('#i1').scrollTop()

$('#i1').offset()
$('#i1').position()

- 文檔
<div id='i1'>
<div>asdf</div>
</div>
$('$#1').append('<a>百度</a>')
$('$#1').prepend('<a>百度</a>')
$('$#1').after('<a>百度</a>')
$('$#1').before('<a>百度</a>')

- 事件綁定
...




a. 

1、jQuery

- 事件綁定
DOM事件綁定：
- 在標籤上綁定
- 經過找到標籤再綁定
<div class='c1'>
<div>
<div class='title'>菜單一</div>
<div class='content'>內容 一</div>
</div>
<div>
<div class='title'>菜單一</div>
<div class='content'>內容 一</div>
</div>
<div>
<div class='title'>菜單一</div>
<div class='content'>內容 一</div>
</div>
<div>
<div class='title'>菜單一</div>
<div class='content'>內容 一</div>
</div>
</div>
jQuery事件綁定：
1.
$('.title').click(function(){
var v = $(this).text();
console.log(v);

})
2.
$('.title').bind('click',function(){
var v = $(this).text();
console.log(v);
})
3.
$('.c1').delegate('.title','click',function(){
var v = $(this).text();
console.log(v);
})

4.
$('.c1').on('click','.title', function () {
var v = $(this).text();
console.log(v);
});

頁面框架加載完成：

$(function () {
...
})

使用：但願查看頁面當即執行的操做

阻止默認事件的發生：
$('#bd').click(function () {
var v = $(this).text();
alert(v);
return false;
})

-- Form表單驗證示例

- jQuery擴展
- $.extend({ }) $.xx
- $.fn.extend({}) $().xx
- 自定義jQuery組件：
-
xxx.js

(function(jq){
function common(){

}

jq.extend({
xx: function(){
common();
}

})

})($);

2、JavaScript高級

- 做用域相關
1.
function func(){
if(1==1){
var v= 123;
}
console.log(v);
}
func()
A. 報錯(Java,C#) B. 123(對) C.undefined
=》 JavaScript/python是以函數爲做用域，非括號爲做用域
=》 括號爲做用域
2.
xo = 'root1';
function func(){
var xo = 'root2';
function inner(){
console.log(xo);
}
inner();
}
func();
做用域鏈
// root2
3.

xo = 'root1';
function func(){
var xo = 'root2';
function inner(){
console.log(xo);
}
return inner;
}
result = func();
result();
// 做用域鏈在函數調用以前已經建立，當尋找變量時，根據最開始建立的做用域查找
// root2

4.
xo = 'root1';
function func(){
var xo = 'root2';
function inner(){
console.log(xo);
}
xo = 'root3'
return inner;
}

result = func();
result();

5.
var xxxx;
console.log(xxxx);


function func(){
console.log(xo);
var xo = '123';
console.log(xo);
}
func()
// 提早聲明,JS
1. 預編譯：
var xo;
2. 執行

6.
function func(num){
console.log(num); // function
num = 18;
console.log(num); // 18

function num(){
}
console.log(num); // 18
}
func(666);

a. 預編譯 AO
先編譯參數：
AO.num = undefined
AO.num = 666
再編譯變量：
若是AO中有num，則不作任何操做
不然 AO.num = undefined
最後編譯函數：
AO.num = function num(){
}

b. 執行


7.

function func(num){
console.log(num); // function
function num(){
}
console.log(num); // function
num = 18;

console.log(num); // 18
}
func(666);


先編譯參數：
AO.num = undefined
AO.num = 666
再編譯變量：
若是AO中有num，則不作任何操做
不然 AO.num = undefined
最後編譯函數：
AO.num = function num(){
}

8.
function func(){
console.log(xo);
var xo = 123;
}
func()

編譯：
參數：
AO
變量：
AO.xo = undefined
執行：

- 函數和麪向對象相關
1.
function func(arg){
console.log(this,arg);
}
func(18);
// func.call(window,20);
// func.apply(window,[30]);


(function(arg){
console.log(this,arg);
})(123)

在函數被執行時，默認this是代指window對象

function func(){
window.nn = 'root';
//nn = 'root';
this.nn = 'root';
}
func()
console.log(nn);

=====>
a. 在函數內部，默認都有this變量。默認狀況下，執行函數時 this=window
b. 使用 函數名.call 或者 函數名.apply 能夠對函數中的this主動設置值

document.getElementById('id').onclick = function(){
// this
}

document.getElementById('id').onclick.call(DOM對象)


2. 在JS中麼有字典類型
只有對象僞形成字典形式

var dict = {
name: 'alex',
age: 18
}
等價於
var dict = new Object(); # 表示建立空字典
dict.name = 'alex';
dict.age = 18;



function Foo(name){
this.Name = name
}

Foo('root') # 當作函數時，this默認是window
var dict1 = new Foo('root1') # 當作類時，this是 dict1 同pyself
// Foo.call(dict1,'root1')
var dict2 = new Foo('root2') # 當作類時，this是 dict2


====
function Foo(name){
this.Name = name;
this.Func = function(){
console.log(this.Name);
}
}
# 當作函數
Foo('root1')
window.Name
window.Func()

# 當作類
obj = new Foo('root2')
obj.Name
obj.Func()

# 直接對象
dict = {
Name: 'root3',
Func: function(){
console.log(this.Name);
}
}

# dict = new Object();
# dict.Name = 'root3';
# dict.Func = function(){
console.log(this.Name);
}
dict.Func()
==========================》 誰調用函數，this就是誰。 函數()執行時候默認window.函數()


誰調用函數，this就是誰。 函數()執行時候默認window.函數()
每個函數裏都有一個this
Name = '666';
var dict = {
Name: 'root',
Age: 18,
Func: function(){
// this等於dict
console.log(this.Name); // root

function inner(){
console.log(this.Name); // 666
}
window.inner();
}
}

dict.Func();

============================
誰調用函數，this就是誰。 函數()執行時候默認window.函數()
每個函數裏都有一個this
變量查找順序，做用域鏈
Name = '666';
var dict = {
Name: 'root',
Age: 18,
Func: function(){
// this等於dict
console.log(this.Name); // root
// that 等於dict
var that = this;

function inner(){
// this=window
console.log(that.Name); // root
}
window.inner();
}
}

dict.Func();

3. 原型

function Foo(name){
this.Name = name;
}
// 原型
Foo.prototype = {
Func: function(){
console.log(this.Name);
}
}

obj1 = new Foo(1)
obj2 = new Foo(2)
obj3 = new Foo(3)

3、Web框架本質

瀏覽器：socket客戶端
服務器：socket服務端

1. Socket服務端
import socket

def handle_request(client):
buf = client.recv(1024)
client.send(b"HTTP/1.1 200 OK\r\n\r\n")
client.send(b"Hello")

def main():
sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
sock.bind(('localhost', 8000))
sock.listen(5)

while True:
connection, address = sock.accept()
handle_request(connection)
connection.close()

if __name__ == '__main__':
main()
2. 次之

WSGI：通用網關服務接口
'cgi': CGIServer,
'flup': FlupFCGIServer,
'wsgiref': WSGIRefServer,
'waitress': WaitressServer,
'cherrypy': CherryPyServer,
'paste': PasteServer,
'fapws3': FapwsServer,
'tornado': TornadoServer,
'gae': AppEngineServer,
'twisted': TwistedServer,
'diesel': DieselServer,
'meinheld': MeinheldServer,
'gunicorn': GunicornServer,
'eventlet': EventletServer,
'gevent': GeventServer,
'geventSocketIO':GeventSocketIOServer,
'rocket': RocketServer,
'bjoern' : BjoernServer,
'auto': AutoServer,

# WEB框架的開發者

from wsgiref.simple_server import make_server

def runServer(environ, start_response):
# environ： 用戶請求相關信息
# start_response： 設置用戶響應相關信息
start_response('200 OK', [('Content-Type', 'text/html')])
return [bytes('<h1>Hello, web!</h1>', encoding='utf-8'), ]

if __name__ == '__main__':
httpd = make_server('127.0.0.1', 8000, runServer)
print("Serving HTTP on port 8000...")
httpd.serve_forever()

3. 現成的Web框架：Bottle,Flask,Tornado,Django...

=> 咱們
分類(功能齊全)：
Django
Bottle,Flask,Tornado,Webpy...

 

4、Django

分類(功能齊全)：
Django
Bottle,Flask,Tornado,Webpy...
安裝：
pip3 install django

解壓
python3 setup.py install

==》 可執行文件 django-admin.exe 目錄：C:\Python35\Scripts

# 添加環境變量

基本操做：
命令
建立project
先進入本身指定的目錄
django-admin startproject mysite

mysite
- mysite (配置文件)
- manage.py （管理Project）
- app(cmdb)
- models.py 數據庫操做
- admin.py 配置Django自帶的後臺管理
- apps.py 當前app的配置
- tests.py 單元測試
- views.py 作業務處理...
運行
cd mysite
python3 manage.py runserver 127.0.0.1:8000

建立app cd mysite python3 manage.py startapp cmdb python3 manage.py startapp monitor