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\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...

四、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

时间： 2024-10-12 12:16:19

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

python 自动化之路 day 07

本节内容: 面向对象编程介绍 为什么要用面向对象进行开发? 面向对象的特性:封装.继承.多态 类.方法. 引子 你现在是一家游戏公司的开发人员,现在需要你开发一款叫做<人狗大战>的游戏,你就思考呀,人狗作战,那至少需要2个角色,一个是人, 一个是狗,且人和狗都有不同的技能,比如人拿棍打狗, 狗可以咬人,怎么描述这种不同的角色和他们的功能呢? 你搜罗了自己掌握的所有技能,写出了下面的代码来描述这两个角色 + 上面两个方法相当于造了两个模子,游戏开始,你得成一个人和狗的实际对象吧,怎么生成呢? +

python 自动化之路 day 05

内容目录: 列表生成式.迭代器&生成器 装饰器 模块初始 常用模块 1.列表生成式,迭代器&生成器 列表生成式 需求:列表[0, 1, 2, 3, 4, 5, 6, 7, 8, 9],要求把列表里的每个值加1 你可能会想到2种方式 : 1 >>> a 2 [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 3 >>> b = [] 4 >>> for i in a:b.append(i+1) 5 ... 6 >>&

《Python自动化之路》大纲

第一天 1.编程语言介绍2.Python基础,介绍历史.发展情况及现状3.Python安装.环境准备4.编程风格.语法要求.变量格式等5.编写用户交互脚本6.读取用户输入7.基本流程控制,if..else/for x in…/while True8.程序流程控制二,break\continue\ 嵌套循环9.项目实践:编写用户登录认证程序* 实现用户名密码登陆,输入错误3次后锁定用户,多用户在线! 第二天1.python I/O交互2.处理文件.通过Python修改及处理文件内容3.项目实践:编

python 自动化之路 logging日志模块

logging 日志模块 http://python.usyiyi.cn/python_278/library/logging.html 中文官方http://blog.csdn.net/zyz511919766/article/details/25136485 清晰明了,入门必备http://my.oschina.net/leejun2005/blog/126713 继承讲的很棒http://my.oschina.net/u/126495/blog/464892 实例分析 一:概述 在实际项目

Python 学习第十六天 html 前端内容总结

一,css知识总结 1, css属性 css的属性包括以下内容 position:规定元素的定位类型 background:属性在一个声明中设置所有的背景属性 可以设置的如下属性:   (1)background-color (2)background-position (3)background-size (4)background-image text-align:规定元素中的文本的水平对齐方式 margin:在一个声明中设置所有的外边距属性 padding:在一个声明中设置所有的内边距属性

python 自动化之路 day 10

本节内容 Gevent协程 Select\Poll\Epoll异步IO与事件驱动 Python连接Mysql数据库操作 RabbitMQ队列 Redis\Memcached缓存 Paramiko SSH Twsited网络框架 引子 到目前为止,我们已经学了网络并发编程的2个套路, 多进程,多线程,这哥俩的优势和劣势都非常的明显,我们一起来回顾下 协程 协程,又称微线程,纤程.英文名Coroutine.一句话说明什么是线程:协程是一种用户态的轻量级线程. 协程拥有自己的寄存器上下文和栈.协程调度

Python自动化运维之18、Python操作 MySQL、pymysql、SQLAchemy

一.MySQL 1.概述 什么是数据库 ? 答:数据的仓库,和Excel表中的行和列是差不多的,只是有各种约束和不同数据类型的表格 什么是 MySQL.Oracle.SQLite.Access.MS SQL Server等 ? 答:他们均是一个软件,都有两个主要的功能: a. 将数据保存到文件或内存 b. 接收特定的命令,然后对文件进行相应的操作 PS:如果有了以上软件,无须自己再去创建文件和文件夹,而是直接传递 命令 给上述软件,让其来进行文件操作,他们统称为数据库管理系统(DBMS,Data

python 自动化之路 day 09 进程、线程、协程篇

本节内容 操作系统发展史介绍 进程.与线程区别 python GIL全局解释器锁 线程 语法 join 线程锁之Lock\Rlock\信号量 将线程变为守护进程 Event事件 queue队列 生产者消费者模型 Queue队列 开发一个线程池 进程 语法 进程间通讯 进程池

python 自动化之路 day 14

今日内容 http://www.cnblogs.com/wupeiqi/articles/5699254.html 群共享 s15Html课件 1. paramiko模块 https://github.com/paramiko/paramiko/blob/master/demos/interactive.py 2. 实现跳板机 作业:数据库+paramiko实现 3. HTML 在服务器端就是一个文件,文件内部: <h1>内容</h1> <h2>内容</h2>