上午:
作业讲解
div的使用
bootstrap的调用
下午:
扒页面
jinja2模板继承
系统流程
return false的作用(见第九天)
模态框
一、复习
1、一个完整开发项目要素
1.MVC----控制器(逻辑端),视图(前端),模型(数据端)工作流
前端发起GET/POST请求,将数据传给逻辑端
逻辑端接收前端的数据(重点是接收处理表单的数据)
逻辑端通过接收的数据与数据端交互
数据端的工作就是增删改查
逻辑端将数据端处理好的数据传给指定的前端页面
前端页面接收逻辑端的数据,渲染页面展示给用户
2.session----会话保持,保持http状态
3.jQuery----实现异步请求,让MVC工作流更优雅
4.静态资源----渲染页面,让页面更好看,并通过基础模板,让html代码更优雅
2、作业
1.优雅的信息提示,操作成功时,给出提示框;操作失败时,显示失败信息
示例:
$('#updatebtn').click(function(){ var str = $('#updateForm').serialize() $.post('/update',str,function(data){ data=JSON.parse(data) if (data['code']==0){ // code为0表示操作成功 alert(data['result']) // 给出提示框 location.href='/user' // 页面跳转 }else{ $('#intro').text(data['errmsg']).fadeOut(2000) //显示失败信息两秒 setTimeout(function(){location.reload()},2000) //两秒后,刷新页面 } }) return false })
sweetalert:更优雅的显示提示框
学习地址:http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201410/jiaoben2855/
2.数据端数据更优雅的在前端显示
jinja2模板方法
{% if users %}
{%for user in users%}
<form action="/operation">
<tr>
<td class="text-center">`user`.`name`</td>
<td class="text-center">`user`.`name_cn`</td>
<td class="text-center">`user`.`email`</td>
<td class="text-center">`user`.`mobile`</td>
<td class="text-center">`user`.`role`</td>
{% if user.status == 0 %}
<td class="text-center">激活</td>
{% else %}
<td class="text-center">锁定</td>
{% endif %}
<td class="text-center">
<a class="btn btn-xs btn-info" href="/update?uid={{user['id']}}"> 更新 </a>
<a class="btn btn-xs btn-warning email" href="/modpasswd"> 修改密码 </a>
<a class="btn btn-xs btn-danger del" href="/delete?uid={{user['id']}}"> 删除 </a>
</td>
</tr>
</form>
{%endfor%}
{%endif%}
jQuery拼字符串的方法
$(document).ready(function(){ $.getJSON('/userlist',function(data){ if (data['code'] == 0){ var str1 = '' var str2 = '' var status = '' var role = '' data = data['result'] str1 ='<tr>'+ '<td>'+'用户名'+'</td>'+ '<td>'+'中文名'+'</td>'+ '<td>'+'密码'+'</td>'+ '<td>'+'手机号'+'</td>'+ '<td>'+'邮箱'+'</td>'+ '<td>'+'角色'+'</td>'+ '<td>'+'状态'+'</td>'+ '<td>'+'操作'+'</td>'+ '</tr>' $('thead').html(str1) for(var i=0;i<data.length;i++){ if (data[i]['status'] == 0){ status = '正常' }else{ status = '锁定' } if (data[i]['role'] == 'admin'){ role = '管理员' }else{ role = '普通用户' } str2 +='<tr>'+ '<td>'+data[i]['name']+'</td>'+ '<td>'+data[i]['name_cn']+'</td>'+ '<td>'+data[i]['password']+'</td>'+ '<td>'+data[i]['mobile']+'</td>'+ '<td>'+data[i]['email']+'</td>'+ '<td>'+role+'</td>'+ '<td>'+status+'</td>'+ '<td>'+ '<a id="updatebtn" class="btn btn-xs btn-info" href="/update?name='+data[i]['name']+'">更新</a>'+ '<a id="deletebtn" class="btn btn-xs btn-danger" href="/delete?name='+data[i]['name']+'">删除</a>'+ '<a id="modpwdbtn" class="btn btn-xs btn-warning" href="/modpwd?name='+data[i]['name']+'">修改密码</a>'+ '</td>'+'</tr>' $('tbody').html(str2) ......
二、div----层叠样式表单元的位置和层次
DIV元素是用来为HTML文档内大块的内容提供结构和背景的元素。
示例:
1、将两个div处在同一行
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<!--不加特技-->
<h1>不加特技</h1>
<p>
<div>I are ceo</div>
<div>How are you</div>
</p>
<!--使用浮动float,可以再设置宽度、高度-->
<h1>使用浮动</h1>
<p>
<div style="float:left;background:red">I are ceo</div>
<div style="float:left;background:blue">How are you</div>
</p>
</body>
</html>
效果图
2、一个div占固定的宽度;另一个div占剩余的宽度、用来适应窗口大小的变化或适应文本的变化
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.left {
float: left;
width: 210px;
background-color: #ff0;
height: 150px;
}
.right {
background-color: #fc0;
height: 150px;
margin-left: 200px;
}
</style>
</head>
<body>
<!--不加特技-->
<h1>不加特技</h1>
<p>
<div>I are ceo</div>
<div>How are you</div>
</p>
<!--使用浮动float-->
<h1>使用浮动</h1>
<p>
<div class="left">I are ceo</div>
<div class="right">How are you</div>
</p>
</body>
</html>
效果图
参考地址:http://sowsceo.blog.51cto.com/10841772/1843507
三、Bootstrap
Bootstrap是基于HTML5和CSS3开发的,它在jQuery的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件。
简言之,bootstrap就是定义好的css类,我们无需自己编写,直接调用即可。
示例一:
<html>
<head>
<link href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
<table class="table table-striped">
<tr class="active"> <td class="primary">primary</td></tr>
<tr class="success"> <td class="success">success</td></tr>
<tr class="warning"><td class="warning">warning</td></tr>
<tr class="danger"> <td class="danger">danger</td></tr>
</table>
</body>
</html>
效果图
示例二:
<html>
<head>
<link href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="row">
<div class="col-md-8" style="background-color:blue">.col-md-8</div>
<div class="col-md-4"style="background-color:green">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4" style="background-color:red">.col-md-4</div>
<div class="col-md-4" style="background-color:gray">.col-md-4</div>
<div class="col-md-4"style="background-color:yellow">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:black">.col-md-6</div>
<div class="col-md-6" style="background-color:green">.col-md-6</div>
</div>
</body>
</html>
注:每个div都被分为12等份,使用'col-md-#'来占用其中的#等份
效果图
学习地址:http://v3.bootcss.com/css/
四、jinja2模板继承
Jinja中最强大的部分就是模板继承。模板继承允许你构建一个包含你站点共同元素的基本模板“骨架”,并定义子模板可以覆盖的块。
基本模板(base.html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<html xmlns="
<head>
{% block head %}<!--block head-->
<link rel="stylesheet" href="style.css" />
<title>{% block title %}{% endblock %} - My Webpage</title><!--block title-->
{% endblock %}
</head>
<body>
<div id="content">{% block content %}{% endblock %}</div><!--block content-->
<div id="footer">
{% block footer %}<!--block footer-->
© Copyright 2008 by <a href='
{% endblock %}
</div>
</body>
在本例中,{% block %}标签定义了四个字幕版可以填充的块。所有的block标签告诉模板引擎子模板可以覆盖模板中的这些部分。
其中title和content块为空块需要子模板填充,head和footer本身有内容,可以填充也可以继承。
子模板
{% extends "base.html" %}<!--extend标签指定基模板,必须放在第一行-->
{% block title %}Index{% endblock %}
{% block head %}
{{ super() }}<!--调用基模板部分自身内容和其中的子模版内容-->
<style type="text/css">
.important { color: #336699; }
</style>
{% endblock %}
{% block content %}
<h1>Index</h1>
<p class="important">
Welcome on my awesome homepage.
</p>
{% endblock %}
注:成功运行后将把子模板中定义的各个子块填充到基本模板后输出。特别注意的是{{super()}}的意思是不仅用子模板中的内容填充,也要调用基本模板中的部分内容。而该子模板并未定义footer块的内容,因此在输出的结果中footer块将保留基本模板中的内容。
调用子模板时的html代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" />
<title>Index - My Webpage</title>
<style type="text/css">
.important { color: #336699; }
</style>
</head>
<body>
<div id="content">
<h1>Index</h1>
<p class="important">
Welcome on my awesome homepage.
</p>
</div>
<div id="footer">
© Copyright 2008 by <a href='http://domain.invalid/'>you</a>.
</div>
</body>
重复调用相同块
<title>{% block title %}{% endblock %}</title>
<h1>{{ self.title() }}</h1><!--再次调用了block title-->
{% block body %}{% endblock %}
注:如果你想要多次打印一个块,无论如何你可以使用特殊的'self'变量并调用与块同名的函数
学习地址:http://docs.jinkan.org/docs/jinja2/templates.html#template-inheritance
五、模态框
<div class="modal fade" id='updateModel'> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">更新</h4> </div> <div class="modal-body"> <p>test…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary">确认</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <script> $('.update').click(function(){ $('#updateModel').modal('show') }) </script>
效果图
转载于:https://blog.51cto.com/yaoliang83/1846385