前端回顾：
整体：
- 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