前端基礎(chǔ)知識補(bǔ)遺
JS正則
test: 判斷字符串是否符合規(guī)定;
rep = /\d+/;
rep.test("sdfasdfasdfs");
# true
rep = /^d+$/;
rep.test("sdfasdfa");
# true
exec: 獲取匹配的數(shù)據(jù);
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
多行匹配: 默認(rèn)就是多行匹配 ^$
登錄注冊驗(yàn)證
默認(rèn)事件先執(zhí)行: checkbox
自定義先執(zhí)行: 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, checkbox
JS: 驗(yàn)證
$(":submit").click(function(){
$(":text, :password").each(function()
{
...
return false;
})
return false;
})
后端: python實(shí)現(xiàn)
業(yè)務(wù)處理
常用組件
- BootStrap
- css
- js
學(xué)習(xí)BootStrap規(guī)則:
- 響應(yīng)式布局
@media
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<style>
.c1 {
background-color: red;
height: 50px;
}
@media (min-width:700px){
.c2 {
background-color: grey;
}
}
</style>
</head>
<body>
<div class="c1 c2"></div>
</body>
</html>
- 基于字體存放圖片,圖標(biāo)以\uuid形式出現(xiàn)
@font-face - 基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.0-dist/dist/css/bootstrap.css"/>
<link rel="stylesheet" href="bootstrap-3.3.0-dist/dist/css/bootstrap-theme.css"/>
</head>
<body>
<span class="glyphicon glyphicon-plus-sign"></span>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider">
</li>
<li><a href="#">Separated 1ink</a></li>
</ul>
</div>
<script src="jquery-1.12.4.js"></script>
<script src="bootstrap-3.3.0-dist/dist/js/bootstrap.js"></script>
</body>
</html>
- bootstrip默認(rèn)所有園角,強(qiáng)制無圓角樣式代碼:
<style>
.no-radus{
border-radius:0 !important;
}
</style>
后臺(tái)管理
-
jQueryUI *
- css
- js
學(xué)習(xí)jQueryUI規(guī)則
-
EasyUI
- css
- js
- Ajax操作
學(xué)習(xí)jQueryUI規(guī)則
其他插件示例
利用bxslider寫輪播圖:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="jquery.bxslider/jquery.bxslider.css"/>
</head>
<body>
<ul class="bxslider">
<li><img src="/images/pic1.jpg"/></li>
<li><img src="/images/pic2.jpg"/</li>
<li><img src="/images/pic3.jpg"/></li>
<li><img src="/images/pic4.jpg"/></li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script src="jquery.bxslider/jquery.bxslider.js"></script>
<script>
$(document).ready(function () {
$('.bxslider').bxSlider();
})
</script>
</body>
</html>
WEB框架
MVC模型和MTV模型:
Model View Controller
數(shù)據(jù)庫 模板文件 業(yè)務(wù)處理
Model Template View
數(shù)據(jù)庫 模板文件 業(yè)務(wù)處理
Django
安裝django模塊
pip3 install django
創(chuàng)建Django工程:
django-admin startproject [工程名稱]
mysite
mysite # 對整個(gè)程序進(jìn)行配置
init
settings # 配置文件
url # URL對應(yīng)關(guān)系
wsgi # 遵循WSIG規(guī)范, uwsgi + nginx
manage.py # 管理Django程序
python manage.py
python manage.py startapp xx
python manage.py makemigrations
python manage.py migrate
運(yùn)行Django功能: python manage.py runsever 127.0.0.1:8001
chouti框架
chouti
配置
主站
app
后臺(tái)管理
app
創(chuàng)建app:
python manage.py startapp cmdb
python manage.py openstack
python mange.py startapp xxoo...
app:
- migrations 數(shù)據(jù)修改表結(jié)構(gòu)
- admin Django為我們提供的后臺(tái)管理
- apps 配置當(dāng)前app
- models ORM,寫指定的類,通過命令可以創(chuàng)建數(shù)據(jù)庫結(jié)構(gòu)
- tests 單位測試
- views 業(yè)務(wù)代碼
配置模板的路徑:
TEMPLATES = [
{
'BACKEND': 'django.template.backends.djange.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates'],
'APP_DIRS': True,
'OPTINS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
配置靜態(tài)目錄:
目錄static
STATICFILES_DIRS =(
os.path.join(BASE_DIR, 'static'),
)
<link rel="stylesheet" href="/static/commons.css" />
總結(jié)
- 創(chuàng)建Django工程
django-admin startproject 工程名 - 創(chuàng)建APP
python manage.py startapp cmdb - 靜態(tài)文件
project.settings.py
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
- 模板路徑
DIRS ==> [os.path.join(BASE_DIR, 'templates'),] - settubgs中
middleware # 注釋 csrf - 定義路由規(guī)則
url.py "login" --> 函數(shù)名 - 定義視圖函數(shù):
app下view.py
def func(request):
# request.method GET/POST
# http://127.0.0.1:8009/home?nid=123&name=alex
# 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循環(huán)
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_uesr}}</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>
作業(yè)
xxoo管理:
- MySQL
- SQLAlchemy
- 主機(jī)管理(8列):
- IP
- 端口
- 業(yè)務(wù)線
- ...
- 用戶表:
- 用戶名
- 密碼
- 功能:
- 登錄
- 主機(jī)管理頁面
- 查看所有主機(jī)信息(4列)
- 增加主機(jī)信息(8列) ** 模態(tài)對話框
- 查看詳細(xì)
- url: "detail" -> detail
def detail(request):
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')
