前端基础知识补遗
JS正则
test: 判断字符串是否符合规定;
rep = /\d+/;
rep.test("sdfasdfasdfs");
# true
rep = /^d+$/;
rep.test("sdfasdfa");
# 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, checkbox
JS: 验证
$(":submit").click(function(){
$(":text, :password").each(function()
{
...
return false;
})
return false;
})
后端: python实现
业务处理
常用组件
- BootStrap
- css
- js
学习BootStrap规则:
- 响应式布局
@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>
- 基于字体存放图片,图标以\uuid形式出现
@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默认所有园角,强制无圆角样式代码:
<style>
.no-radus{
border-radius:0 !important;
}
</style>
后台管理
-
jQueryUI *
- css
- js
学习jQueryUI规则
-
EasyUI
- css
- js
- Ajax操作
学习jQueryUI规则
其他插件示例
利用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
数据库 模板文件 业务处理
Model Template View
数据库 模板文件 业务处理
Django
安装django模块
pip3 install django
创建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 runsever 127.0.0.1:8001
chouti框架
chouti
配置
主站
app
后台管理
app
创建app:
python manage.py startapp cmdb
python manage.py openstack
python mange.py startapp xxoo...
app:
- migrations 数据修改表结构
- admin Django为我们提供的后台管理
- apps 配置当前app
- models ORM,写指定的类,通过命令可以创建数据库结构
- tests 单位测试
- views 业务代码
配置模板的路径:
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',
],
},
},
]
配置静态目录:
目录static
STATICFILES_DIRS =(
os.path.join(BASE_DIR, 'static'),
)
<link rel="stylesheet" href="/static/commons.css" />
总结
- 创建Django工程
django-admin startproject 工程名 - 创建APP
python manage.py startapp cmdb - 静态文件
project.settings.py
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
- 模板路径
DIRS ==> [os.path.join(BASE_DIR, 'templates'),] - settubgs中
middleware # 注释 csrf - 定义路由规则
url.py "login" --> 函数名 - 定义视图函数:
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循环
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>
作业
xxoo管理:
- MySQL
- SQLAlchemy
- 主机管理(8列):
- IP
- 端口
- 业务线
- ...
- 用户表:
- 用户名
- 密码
- 功能:
- 登录
- 主机管理页面
- 查看所有主机信息(4列)
- 增加主机信息(8列) ** 模态对话框
- 查看详细
- 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')
