python 自动化之路 day 18 前端内容回顾、补充/Django安装、创建

zoukankan html css js c++ java

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.

一、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();
}

})

})($);

二、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)

三、Web框架本质

浏览器：socket客户端
服务器：socket服务端

1. Socket服务端
import socket

def handle_request(client):
buf = client.recv(1024)
client.send(b"HTTP/1.1 200 OK ")
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...

四、Django

分类(功能齐全)：
Django
Bottle,Flask,Tornado,Webpy...
安装：
pip3 install django

解压
python3 setup.py install

==》可执行文件 django-admin.exe 目录：C:Python35Scripts

# 添加环境变量

基本操作：
命令
创建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

查看全文

相关阅读:
....
CodeForces 375A(同余)
POJ 2377 Bad Cowtractors (最小生成树)
POJ 1258 AgriNet (最小生成树)
HDU 1016 Prime Ring Problem(全排列)
HDU 4460 Friend Chains(bfs)
POJ 2236 Wireless Network(并查集)
POJ 2100 Graveyard Design(尺取)
POJ 2110 Mountain Walking(二分/bfs)
CodeForces 1059B Forgery(模拟)

原文地址：https://www.cnblogs.com/yangliheng/p/6542520.html

python 自动化之路 day 18 前端内容回顾、补充/Django安装、创建

前端回顾：

一、jQuery

二、JavaScript高级

三、Web框架本质

四、Django