前端知识——jQuery、前端插件、web框架、Django
jQuery示例：
表单验证，jQuery扩展
浏览器可以关闭js，所以验证不一定是百分百发生的，所以后端需要有验证，前端也有的话减少服务端的访问
通过DOM绑定进行表单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item{
width: 250px;
height: 60px;
position: relative;
}
.item input{
width: 200px;
}
.item span{
position: absolute;
top: 20px;
left: 0px;
font-size: 8px;
background-color: indianred;
color: white;
display: inline-block;
width: 200px;
}
</style>
</head>
<body>
<div>
<form>
<div class="item">
<input class="c1" type="text" name="username" label="用户名"/>
<!--<span>用户名不能为空</span>-->
</div>
<div class="item">
<input class="c1" type="password" name="pwd" label="密码"/>
<!--<span>密码不能为空</span>-->
</div>
<input type="submit" value="提交" onclick="return CheckValid();" />
</form>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
function CheckValid() {
//通过dom进行绑定
var flag=true;
$('form .item span').remove();
$('form .c1').each(function () {
var val=$(this).val();
if(val.length<=0){
var label=$(this).attr('label');
var tag=document.createElement("span");
tag.innerText=label+"不能为空";
$(this).after(tag);
flag=false;
}
});
return flag;
}
</script>
</body>
</html>
jQuery
滚动菜单事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item{
width: 250px;
height: 60px;
position: relative;
}
.item input{
width: 200px;
}
.item span{
position: absolute;
top: 20px;
left: 0px;
font-size: 8px;
background-color: indianred;
color: white;
display: inline-block;
width: 200px;
}
</style>
</head>
<body>
<div>
<form>
<div class="item">
<input class="c1" type="text" name="username" label="用户名"/>
<!--<span>用户名不能为空</span>-->
</div>
<div class="item">
<input class="c1" type="password" name="pwd" label="密码"/>
<!--<span>密码不能为空</span>-->
</div>
<input type="submit" value="提交"/>
</form>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
Bindcheckvalid();
});
function Bindcheckvalid() {
$('form input[type="submit"]').click(function () {
var flag=true;
$('form .item span').remove();
$('form .c1').each(function () {
var val=$(this).val();
if(val.length<=0){
var label=$(this).attr('label');
var tag=document.createElement("span");
tag.innerText=label+"不能为空";
$(this).after(tag);
flag=false;
}
});
return flag;
});
}
</script>
</body>
</html>
在jQuery里面使用each的时候，如果要返回return fales的话就是表示为break，不在继续执行了，但是如果使用return的话，相当于continue。
这样这个页面里面先判断第一个，如果第一个判断成功才会判断第二个。
滚动菜单
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0px;
}
img {
border: 0;
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.wrap{
width: 980px;
margin: 0 auto;
}
.pg-header{
background-color: #303a40;
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
-moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
box-shadow: 0 2px 5px rgba(0,0,0,.2);
}
.pg-header .logo{
float: left;
padding:5px 10px 5px 0px;
}
.pg-header .logo img{
vertical-align: middle;
width: 110px;
height: 40px;
}
.pg-header .nav{
line-height: 50px;
}
.pg-header .nav ul li{
float: left;
}
.pg-header .nav ul li a{
display: block;
color: #ccc;
padding: 0 20px;
text-decoration: none;
font-size: 14px;
}
.pg-header .nav ul li a:hover{
color: #fff;
background-color: #425a66;
}
.pg-body{
}
.pg-body .catalog{
position: absolute;
top:60px;
width: 200px;
background-color: #fafafa;
bottom: 0px;
}
.pg-body .catalog.fixed{
position: fixed;
top:10px;
}
.pg-body .catalog .catalog-item.active{
color: #fff;
background-color: #425a66;
}
.pg-body .content{
position: absolute;
top:60px;
width: 700px;
margin-left: 210px;
background-color: #fafafa;
overflow: auto;
}
.pg-body .content .section{
height: 500px;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="wrap clearfix">
<div class="logo">
<a href="#">
<img src="">
</a>
</div>
<div class="nav">
<ul>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">功能一</a>
</li>
<li>
<a href="#">功能二</a>
</li>
</ul>
</div>
</div>
</div>
<div class="pg-body">
<div class="wrap">
<div class="catalog">
<div class="catalog-item" auto-to="function1"><a>第1张</a></div>
<div class="catalog-item" auto-to="function2"><a>第2张</a></div>
<div class="catalog-item" auto-to="function3"><a>第3张</a></div>
</div>
<div class="content">
<div menu="function1" class="section" style='background-color:green;'>
<h1>第一章</h1>
</div>
<div menu="function2" class="section" style='background-color:yellow;'>
<h1>第二章</h1>
</div>
<div menu="function3" class="section" style='background-color:red;'>
<h1>第三章</h1>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function(){
// 自动执行
Init();
});
function Init(){
$(window).scroll(function() {
// 监听窗口滚动事件
// 获取滚动条高度
var scrollTop = $(window).scrollTop();
// 当滚动到50像素时，左侧带菜单固定
if(scrollTop > 50){
$('.catalog').addClass('fixed');
}else{
//$('.catalog').children().removeClass('active');
$('.catalog').removeClass('fixed');
}
// 循环所有的内容
$('.content').children().each(function(){
// 当前标签距离顶部高度
var offSet = $(this).offset(); // 高度，左边有多远
offSet.top
offSet.left
// 自身高度
var height = $(this).height();
//offSet<滚动高度<offSet+height
// 当前内容高度 - 滚动高度，如果滚动到内容一时，此值为0；
var offTop = offSet.top - scrollTop;
// 当前内容位于用户阅览区
if(scrollTop>offSet.top && scrollTop< offSet.top + height){
// $(this) 当前内容标签
var target = $(this).attr('menu');
$('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active');
/*
var docHeight = $(document).height();
var winHeight = $(window).height();
// 如果，滚轮到达底部，则显示最后一个菜单
if(docHeight == winHeight+scrollTop)
{
$('.catalog').find('div:last-child').addClass('active').siblings().removeClass('active');
}else{
var target = $(this).attr('menu');
$('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active');
}
return false;
*/
}
});
});
}
</script>
</body>
</html>
前端插件
fontawsome
easyui
jQueryUI
Bxslider
bootstrap
需要注意这个在引入jQuery是有版本要求的
jquery.lazyloiad
$(function(){
$('img.lazy').lazyload({
//container: $('.product-list'), // 对指定标签对象内的图片实现效果，表示在此标签中滚动时，触发加载（注意：如果容器未设置height和overfload:auto，那么会默认加载所有图片）
threshold: 120, //当图片顶部距离显示区域还有100像素时，就开始加载
placeholder : "www/grey.gif", // 图片未加载时，占位
effect: "slideDown", // 图片出现的效果，值有show(直接显示),fadeIn(淡入),slideDown(下拉)
effect_speed: 1500, // 效果出现的时间
event: 'scroll', // 滚动滚轮时触发，可以是：click、mouseover等
data_attribute: 'original', // img标签中保存url的自定义属性，默认：data-original
skip_invisible: true, // 是否跳过已经隐藏的图片（display:none）
failure_limit: 3, // 由于延迟加载是根据Dom从上到下执行
// 如果遇到Dom位置在上，但是图片定位在下导致看不到，那么会以为之后的图片不在应用延迟加载
// 此处的failure_limit用于限制如果出现N个【Dom位置在上，但是图片定位在下】才终止
appear: function(){ // 当图片位置刚出现在视图时，触发此事件
$(this).attr('src');
},
load: function(){ // 当图片路径加载之后，触发此事件
$(this).attr('src');
}
});
})
web框架
自己实现socket
Tornado
基于wsgi
Django
MVC/MTV
mvc框架：
controllers:处理用户请求
views：放置html模板
modals：操作数据库
mtv框架：
views：处理用户请求
template：放置html模板
modals：操作数据库
Django：
基于wsgi框架来实现的
安装：
使用pip来进行安装
创建：
可以通过软件直接进行启动，也可以使用命令行进行安装
django-admin startproject 项目名称
创建完以后
项目名
项目名
-settings.py 配置文件
-urls.py 路由映射
-wsgi.py
manage.py django程序的启动文件
创建app：
监控
cmdb等等，都可以进行创建
python manage.py startapp cmdb
使用模板
settings配置
render（request,'路径'）
静态文件配置
static_url='/wzc/'
staticfiles_dir=(os.path.join(BASE_DIR,'statices'),) 这里面需要添加逗号
statics目录放置静态文件
<script src="/fff/jquery-1.12.4.js"></script>
连接数据库、操作数据
ORM是可以通过Django里面提供的功能
执行命令：
python manage.py makemigrations
python manage.py migrate
数据库和相应的表已经创建完毕
操作数据库
检测：
models.类.objects.filter(user="wzc")
models.类.objects.filter(user="wzc").count()
wzc这个用户是否存在
通过return redirect来进行跳转
生产数据
models.类.objects.create(user='数据',passwd='数据')
获取数据：
models.类.objects.all()
浙公网安备 33010602011771号