【9】添加主页日志列表展示

分支：home_page

预览图：

 

index.htm

{% extends "base.htm" %}

{%block header%}
    {%include 'header.htm'%}
{%end%} 

{%block content%}
<script src="{{ static_url('js/knockout/knockout-2.1.0.js') }}"></script> 
<script src="{{ static_url('js/knockout/knockout.mapping-2.4.1.js') }}"></script>
<script src="{{ static_url('js/components/jquery.twbsPagination.min.js') }}"></script>
<script src="{{ static_url('js/index.js') }}"></script>

<div class="bs-docs-container">
    <div class="container">
        <div class="row">
            <div class="col-md-9 blog-main">
                <div style="min-height: 650px">
                    <!-- ko foreach: $data -->
                    <div class="blog-post">
                        <button style="margin-left: -15px;font-size: 30px" class="btn btn-link" id="blogTitleBtn" data-bind="text: blog_title, click:function(name){show_blog(name)}"></span></button>

                        <p style="font-size: 20px" data-bind="text: blog_summary"></p>

                        <p class="blog-post-meta" data-bind="text: show_author_info(user_name, created_at)" style="font-size: 15px;"></p>

                        <hr>
                    </div>
                    <!-- /ko -->
                </div>

                <div id="pagination_box" class="pull-right">  
                   <ul id="pagination_zc" class="pagination-sm"></ul>
                </div>
            </div>

            <div class="col-md-3">
                <div class="blog-header">
                    <h1 class="blog-title">Jakey's Blog</h1>
                    <p class="lead blog-description">Test</p>
                </div>   
                <hr>
                <div class="list-group">
                    <a href="#" class="list-group-item active">列 表 A</a>
                    <a href="#" class="list-group-item">子列表1</a>
                    <a href="#" class="list-group-item">子列表2</a>
                    <a href="#" class="list-group-item">子列表3</a>
                    <a href="#" class="list-group-item">子列表4</a>
                </div>   
                <hr>
                <div class="list-group">
                    <a href="#" class="list-group-item active">列 表 B</a>
                    <a href="#" class="list-group-item">子列表1</a>
                    <a href="#" class="list-group-item">子列表2</a>
                    <a href="#" class="list-group-item">子列表3</a>
                    <a href="#" class="list-group-item">子列表4</a>
                    <a href="#" class="list-group-item">子列表5</a>
                    <a href="#" class="list-group-item">子列表6</a>
                    <a href="#" class="list-group-item">子列表7</a>
                    <a href="#" class="list-group-item">子列表8</a>
                </div>
            </div>
        </div>
    </div>
</div>
{%end%} 

{%block footer%}
    {%include 'footer.htm'%}
{%end%} 

index.js

/** 
* 初始化时加载 
*/ 
// ko数据绑定
var model;
var viewModel;

// 分页
var page_size = 1
var total_pages = 1;
var visiblePages = 8;

$(document).ready(function () {
    get_all_blogs(1);
});

/** 
* 分页 
*/ 
function twbsPagination() {
    $('#pagination_zc').twbsPagination({  
        totalPages: total_pages,  
        visiblePages: visiblePages > 8 ? 8 : visiblePages,  
        startPage: 1,
        first: "首页",  
        prev: "上一页",  
        next: "下一页",  
        last: "未页",  
        onPageClick: function (event, page) {
            get_all_blogs(page);
        }
    });  
}

/** 
* 获取所有日志信息 
*/ 
function get_all_blogs(current_page) {
    $.ajax({
        type: "POST",
        url: "/manage/blogs/query_all_blogs",
        data: { 
            "_xsrf": getCookie("_xsrf"),
            "current_page": current_page
        },
        success: function (data) {
            if(data["status"] == "success"){
                total_pages = parseInt(data["info"].total_pages);
                if(total_pages == 0)
                {
                    total_pages = 1;
                }

                if(viewModel == undefined){
                    viewModel = ko.mapping.fromJS(data["info"].current_data);
                    model = ko.toJS(viewModel);
                    ko.applyBindings(viewModel);
                    twbsPagination();
                }
                else{
                    if(page_size != total_pages){
                        $('#pagination_zc').remove();  
                        $("#pagination_box").append('<ul id="pagination_zc" class="pagination-sm"></ul>');
                        twbsPagination();
                    }
                    ko.mapping.fromJS(data["info"].current_data, viewModel);
                    model = ko.toJS(viewModel);
                }
                $("#table_title").html("日 志 列 表 (" + data["info"].total_count + ")");
                page_size = total_pages;
            }
        },
        error : function() {       
            errNotify("可能为网络异常，请检查您的网络！");
        } 
    });
}

/** 
* 显示博客信息
*/ 
function show_blog(name) {
    console.log("待完成");
    console.log(name.id());
    console.log(name.blog_title());
}

/** 
* 编辑博客
*/ 
function edit_blog(name) {
    window.location.href = "/blog/edit/info?id=" + name.id();
}

/** 
* 删除博客
*/ 
function delete_blog(name) {
    $.messager.model = { 
        ok:{ text: "残忍删除", classed: 'btn-info' },
        cancel: { text: "勉强挽留", classed: 'btn-default' }
    };

    $.messager.confirm("删除日志", "确定删除此日志吗？", function() {
        var blog_id = name.id();
        $.ajax({
            type: "POST",
            url: "/manage/blogs/delete_blog",
            data: { 
                "_xsrf": getCookie("_xsrf"),
                "blog_id": blog_id
            },
            success: function (data) {
                if(data["status"] == "error"){
                    errNotify("删除错误！\r\n 请检查网络状态是否正常！");
                }
                else{
                    viewModel.remove(name);
                    model = ko.toJS(viewModel);
                    successNotify("删除成功！");
                }
            },
            error : function() {       
                errNotify("error!");
            } 
        });
    });
}

/** 
* 显示作者信息
*/ 
function show_author(name) {
    console.log("待完成");
}


/** 
* 显示日志简介信息
*/ 
function show_author_info(user_name, created_at) {
    var author_lst = new Array("作者 ", user_name(), " | 发布于 ", created_at());
    return author_lst.join("");
}

manage.py注释掉 BlogsHandler post 的 @tornado.web.authenticated，希望没有登陆的用户也能看到日志信息。