上午：

  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%}

    
        `user`.`name`
        `user`.`name_cn`
        `user`.`email`
        `user`.`mobile`
        `user`.`role`
        {% if user.status == 0 %}
        激活
        {% else %}
        锁定
        {% endif %}
        
         更新 
         修改密码 
         删除 
        
    

{%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 =''+
                ''+'用户名'+''+
                ''+'中文名'+''+
                ''+'密码'+''+
                ''+'手机号'+''+
                ''+'邮箱'+''+
                ''+'角色'+''+
                ''+'状态'+''+
                ''+'操作'+''+
                ''
            $('thead').html(str1)
            for(var i=0;i'+data[i]['name']+''+
                    ''+data[i]['name_cn']+''+
                    ''+data[i]['password']+''+
                    ''+data[i]['mobile']+''+
                    ''+data[i]['email']+''+
                    ''+role+''+
                    ''+status+''+
                    ''+
                    '更新'+
                    '删除'+
                    '修改密码'+
                    ''+''
                $('tbody').html(str2)
......


二、div----层叠样式表单元的位置和层次

DIV元素是用来为HTML文档内大块的内容提供结构和背景的元素。


示例：

1、将两个div处在同一行







 

    
    
不加特技

    

        
I are ceo

        
How are you

    

 
    
    
使用浮动

    

        I are ceo
        How are you