我的python学习--第十天

上午:

  1. 作业讲解
  2. div的使用
  3. bootstrap的调用

下午:

  1. 扒页面
  • 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://baike.baidu.com/link?url=6BG9Bn0hZ7QR3PhMe0_DyKV2ASnGkN29RCfegvwwDlPThoMi7Be8c3DBYCsLx3maqdppUzoo3d_QJMuNM3cIKJqRfJJcNuTLq-YVstcz78m

参考地址: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-->
        &copy; 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">
        &copy; 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">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">更新</h4>
      </div>
      <div class="modal-body">
        <p>test&hellip;</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>

效果图

学习地址:http://v3.bootcss.com/javascript/#modals

时间: 2024-08-06 15:45:52

我的python学习--第十天的相关文章

python学习笔记十——异常处理

1.try: command except 错误类型,记录错误信息变量: command finally: command try...finally的用处是无论是否发生异常都要确保资源释放代码的执行.一般来说,如果没有发生错误,执行过try语句块之后执行finally语句块,完成整个流程.如果try语句块发生了异常,抛出了这个异常,此时就马上进入finally语句块进行资源释放处理.如下从几个细节讨论finally的特性. 1).try中的return: 当在try语句块中含有return语句

python学习[第十二篇] 数据类型之 集合

python学习[第十二篇] 数据类型之 集合 集合概念 python中集合是一组无序排列的哈希值.集合分为两种可变集合(set)和不可变集合(frozenset) 对可变集合可以修改和删除元素,对于不可变集合不允许.可变集合是不可以哈希的,因此既不能用作字典的键,也不能做其他集合的元素. 集合的增删改查 集合的创建于赋值 集合与列表([]) 和字典({})不同,集合没有特别的语法格式.列表和字典可以通过他们自己的工厂方法创建,这也是集合的唯一的创建方式.set()和frozenset() #创

python学习第十课 多路复用、ThreadingTCPServer、线程与进程

python 第十课 多路复用 I/O多路复用指:通过一种机制,可以监视多个描述符,一旦某个描述符就绪(一般是读就绪或者写就绪),能够通知程序进行相应的读写操作 select    poll          epoll 网络操作.文件操作.终端操作等均属于IO操作,对于windows只支持Socket操作,其他系统支持其他IO操作,但是无法检测.如普通文件操作自动上次读取是否已经变化.所以主要用来网络操作 windows 和 mac的python 只提供select,linux上的python

我的python学习--第十四天(二)

一.ansible api 在了解python的ansible api之前,先简单了解一下ansible. ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.cfengine.chef.func.fabric)的优点,实现了批量系统配置.批量程序部署.批量运行命令等功能. ansible是基于模块工作的,本身没有批量部署的能力.真正具有批量部署的是ansible所运行的模块,ansible只是提供一种框架.主要包括: 连接插件connection p

python学习八十四天:爬虫基础

爬虫基础 爬虫相关概念简介 什么是爬虫 爬虫就是通过编写程序模拟浏览器上网,然后让其去互联网上抓取数据的过程. 哪些语言可以实现爬虫 1.php:可以实现爬虫.php被号称是全世界最优美的语言(当然是其自己号称的,就是王婆卖瓜的意思),但是php在实现爬虫中支持多线程和多进程方面做的不好. 2.java:可以实现爬虫.java可以非常好的处理和实现爬虫,是唯一可以与python并驾齐驱且是python的头号劲敌.但是java实现爬虫代码较为臃肿,重构成本较大. 3.c.c++:可以实现爬虫.但是

Python学习未来十年编程语言的主流

为什么说Python是高逼格的编程语言,因为完成同一个任务,C语言要写1000行代码,Java只需要写100行,而Python可能只要20行.如果形容C是高,C++是富,Java是帅,那么毫无疑问Python就是编程语言中的高富帅.它的优点:简单,易学,速度快,免费.开源,高层语言,可移植性,解释性,可扩展性,可嵌入性,丰富的库,独特的语法,从云端.客户端,到物联网终端,python应用无处不在,从原型设计到快速开发,从Web 应用到云计算框架,处处可见其身影,将成为编程语言里的最主流 曾经用C

python学习笔记十六 django深入学习一

django 请求流程图 django 路由系统 在django中我们可以通过定义urls,让不同的url路由到不同的处理函数 from . import views urlpatterns = [ url(r'^articles/2003/$', views.special_case_2003), #精确匹配 url(r'^articles/([0-9]{4})/$', views.year_archive), #动态路由 url(r'^articles/([0-9]{4})/([0-9]{2

python学习第十四节(正则)

python2和python3都有两种字符串类型strbytes re模块find一类的函数都是精确查找.字符串是模糊匹配 findall(pattern,string,flags) replace函数'hello python'.replace('p','P')'hello Python' a='sadfadf232wwewfr323rwef34534trwef'import rew=re.findall('\d','sadfadf232wwewfr323rwef34534trwef')w=r

python学习第十三节(sys,logging,logger,json)

sys模块sys模块是python和解释器之间交流的模块 sys.argv 在cmd中将可以输入内容后 自动形成为列表,可以在程序中先切片,验证登录的作用. sys.exit() 程序立刻结束,无论后面有什么程序.sys.path 显示当前搜索模块的路径优先搜索当前脚本所在目录的路径查找所需模块,没有就去python环境变量去找可以用下面这种方式在sys.path的列表中添加一个搜索的路径,叫他去另一个路径去搜索模块 log的错误日志配置文件,blog地址 http://www.cnblogs.

Python 学习第十九天 django知识

一,django 知识总结 1,同一个name属性的标签,多个值获取 <form action="/login/" method="POST" enctype="multipart/form-data"> <p> <input type="text" name="user" placeholder="用户名" /> </p> <p&g