用Python 操做Web 前端基礎 4

時間 2019-11-19

標籤 python web 前端基礎欄目 Python 简体版

原文原文鏈接

一、JS 正則css

test - 判斷字符串是否符合規定的正則
rep = /\d+/;
rep.test("asdfoiklfasdf89asdfasdf")
# true

rep = /^\d+$/;
rep.test("asdfoiklfasdf89asdfasdf")
# true

exec - 獲取匹配的數據
rep = /\d+/;
str = "wangshen_67_houyafa_20"
rep.exec(str)
# ["67"]

JavaScript is more fun than Java or JavaBeans!
var pattern = /\bJava(\w*)\b/;
# ["JavaScript", "Script"]

JavaScript is more fun than Java or JavaBeans!
var pattern = /\bJava\w*\b/g;
# ["JavaScript"]
# ["Java"]
# ["JavaBeans"]
# null

JavaScript is more fun than Java or JavaBeans!
var pattern = /\bJava(\w*)\b/g;
# ["JavaScript",'Script']
# ["Java", ""]
# ["JavaBeans", "Beans"]
# null

多行匹配：
默認就是多行匹配
^$
- 登陸註冊驗證
默認事件先執行：
checkbox
自定義先執行
a
submit
...
<form>

<input type='type' />
<input type='password' />
<input type='submit' />

</form>

$(':submit').click(function(){

$(':text,:password').each(function(){
...
return false;
})
return false;
})

input,checbox

================================== 驗證 ================================
JS：驗證

各類驗證

$(':submit').click(function(){

$(':text,:password').each(function(){
...
return false;
})
return false;
})

後端：python實現

業務處理
....
html

二、組件python

BootStrap
- css
- js
學習 BootStrap 規則

1、響應式
@media

2、圖標、字體
@font-face

3、基本使用

========》後臺管理

jQueryUI *
- css
- js
學習 jQueryUI 規則

EasyUI
- css
- js

學習 jQueryUI 規則
============ Ajax操做 ================

三、WEB框架nginx

MVC
Model View Controller
數據庫模板文件業務處理

MTV數據庫

Model Template View
數據庫模板文件業務處理

############## WEB：MVC、MTV

四、Django

pip3 install django

C:\Python35\Scripts

# 建立Django工程
django-admin startproject 【工程名稱】

mysite
- mysite # 對整個程序進行配置
- init
- settings # 配置文件
- url # URL對應關係
- wsgi # 遵循WSIG規範，uwsgi + nginx
- manage.py # 管理Django程序：
- python manage.py
- python manage.py startapp xx
- python manage.py makemigrations
- python manage.py migrate

# 運行Django功能
python manage.py runserver 127.0.0.1:8001

chouti
- chouti
- 配置
- 主站 app
- 後臺管理 app

# 建立app
python manage.py startapp cmdb
python manage.py startapp openstack
python manage.py startapp xxoo....

app：
migrations 數據修改表結構
admin Django爲咱們提供的後臺管理
apps 配置當前app
models ORM,寫指定的類經過命令能夠建立數據庫結構
tests 單元測試
views 業務代碼

一、配置模板的路徑

TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
二、配置靜態目錄
static

STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)django

內容整理
1. 建立Django工程
django-admin startproject 工程名app

2. 建立APP
cd 工程名
python manage.py startapp cmdb框架

三、靜態文件
project.settings.py

STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)

四、模板路徑

DIRS ==> [os.path.join(BASE_DIR,'templates'),]

五、settings中

middlerware

# 註釋 csrf

六、定義路由規則
url.py

"login" --> 函數名

七、定義視圖函數
app下views.py

def func(request):
# request.method GET / POST

# http://127.0.0.1:8009/home?nid=123&name=alex
# request.GET.get('',None) # 獲取請求發來的而數據

# request.POST.get('',None)

# return HttpResponse("字符串")
# return render(request, "HTML模板的路徑")
# return redirect('/只能填URL')

八、模板渲染
特殊的模板語言

-- {{ 變量名 }}

def func(request):
return render(request, "index.html", {'current_user': "alex"})

index.html

<html>
..
<body>
<div>{{current_user}}</div>
</body>

</html>

====> 最後生成的字符串

<html>
..
<body>
<div>alex</div>
</body>

</html>
-- For循環
def func(request):
return render(request, "index.html", {'current_user': "alex", 'user_list': ['alex','eric']})

index.html

<html>
..
<body>
<div>{{current_user}}</div>

<ul>
{% for row in user_list %}

{% if row == "alex" %}
<li>{{ row }}</li>
{% endif %}

{% endfor %}
</ul>

</body>

</html>

#####索引#################
def func(request):
return render(request, "index.html", {
'current_user': "alex",
'user_list': ['alex','eric'],
'user_dict': {'k1': 'v1', 'k2': 'v2'}})

index.html

<html>
..
<body>
<div>{{current_user}}</div>

<a> {{ user_list.1 }} </a>
<a> {{ user_dict.k1 }} </a>
<a> {{ user_dict.k2 }} </a>

</body>

</html>

###### 條件

def func(request):
return render(request, "index.html", {
'current_user': "alex",
"age": 18,
'user_list': ['alex','eric'],
'user_dict': {'k1': 'v1', 'k2': 'v2'}})

index.html

<html>
..
<body>
<div>{{current_user}}</div>

<a> {{ user_list.1 }} </a>
<a> {{ user_dict.k1 }} </a>
<a> {{ user_dict.k2 }} </a>

{% if age %}
<a>有年齡</a>
{% if age > 16 %}
<a>老男人</a>
{% else %}
<a>小鮮肉</a>
{% endif %}
{% else %}
<a>無年齡</a>
{% endif %}
</body>

</html>

XXOO管理：
MySQL
SQLAlchemy
主機管理（8列）：
IP
端口
業務線
...

用戶表：
用戶名
密碼

功能：
一、登陸
二、主機管理頁面
- 查看全部的主機信息（4列）
- 增長主機信息（8列） ** 模態對話框
三、查看詳細
url:
"detail" -> detail

def detail(reqeust):
nid = request.GET.get("nid")
v = select * from tb where id = nid
...
四、刪除
del_host -> delete_host

def delete_host(request):
nid = request.POST.get('nid')
delete from tb where id = nid
return redirect('/home')

函數