03: 将帖子展示到页面点赞

Posted 2020-10-20 不做大哥好多年

目录：抽屉项目之js最佳实践

01: 实现注册登录功能

02: 实现发布帖子功能

03: 将帖子展示到页面、点赞

04: 层级评论

目录：

• 1.1 将帖子展示到页面效果图
• 1.2 各功能点code

1.1 将帖子展示到页面效果图     返回顶部

　　　　功能1：从后台获取指定页数的帖子，根据是否置顶推送到对应的列表
　　　　功能2：调用create_post_list，将已分类的帖子展示到页面
　　　　功能3：调用create_paginator生成分页标签
　　　　功能4：点赞
　　　　功能5：生成分页标签

         

1.2 各功能点code     返回顶部

　　1、功能1：初始化函数调用view_posts函数，展示帖子

<div class="left_container fl">
    <div class="post_list">
        <div class="normal_posts">
            <!-- 生成一个完整帖子：开头 -->
            <div class="post_container clearfix" post_id="18">
                <div class="row_container clearfix">
                    <div class="left_container fl">
                        <div class="post_content">文能一剪梅，武能嘿嘿嘿</div>
                        <div class="post_bar">
                            <a href="javascript:void(0);" class="like_btn" onclick="like(this,18)" like_count="1">已赞(1)</a>
                            <a href="javascript:void(0);" class="show_comments_btn" onclick="show_comments(this,18)">评(0)</a>
                            <span>tom</span>
                            <i>在 2018-01-07 09:51:29 发布</i>
                        </div>
                    </div>
                    <div class="right_container fl"><img src=""></div>
                </div>
                <div class="comment_container hide"><div class="comment_text_container">
                        <!-- 生成一个textarea发布框放到这里 -->
                </div>
                    <div class="comment_content_container">
                        <!-- 用户评论会放到这个div中 -->
                    </div>
                </div>
            </div>
            <!-- 生成一个完整帖子：结尾 -->


            <div class="post_container clearfix" post_id="17">
                <div class="row_container clearfix">
                    <div class="left_container fl">
                        <div class="post_content">段子手祖师爷</div>
                        <div class="post_bar">
                            <a href="javascript:void(0);" class="like_btn" onclick="like(this,17)" like_count="1">已赞(1)</a>
                            <a href="javascript:void(0);" class="show_comments_btn" onclick="show_comments(this,17)">评(0)</a>
                            <span>tom</span>
                            <i>在 2018-01-07 09:50:20 发布</i>
                        </div>
                    </div>
                    <div class="right_container fl">
                        <img src="/static/img/upload/94b6296a408cf6a270d1a873ee877763.jpg">
                    </div>
                </div>
                <div class="comment_container hide">
                    <div class="comment_text_container">

                    </div>
                    <div class="comment_content_container">

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="paginator"><a class="current" href="javascript:void(0);" onclick="view_posts(this,1,1)">1</a></div>
</div>

生成展示帖子的html文件

<script>
    /* 初始化函数 */
    $(function () {
        /* 显示首页 */
        view_posts($(".nav:first-child")[0],0,1);
        // ".nav:first-child" 默认选中的是展示帖子分类中“全部”那个a标签
        //0 代表“全部”那个分类对应的分类id
        //1 默认显示第1页
    });
</script>

index.html 中js初始化函数

/*
 * 功能1：从后台获取指定页数的帖子，根据是否置顶推送到对应的列表
 * 功能2：调用create_post_list，将已分类的帖子展示到页面
 * 功能3：调用create_paginator生成分页标签
 */
function view_posts(ele, catalog, page) {
    $(ele).siblings(\'a\').removeClass("current");
    $(ele).addClass("current");
    $("div.paginator").children().remove();
    $.get({
        url:"/app01/posts/",
        data:{"catalog":catalog, "page":page},
        dataType:"json",
        success:function (response) {
            if(response.status==\'ok\'){
                // 服务器返回数据
                // console.log(response);
                var posts = response[\'data\'][\'posts\'];
                var current_page = response[\'data\'][\'current_page\'];
                var page_count = response[\'data\'][\'page_count\'];

                if(posts.length>0){
                    // 有帖子数据
                    // 区分置顶和普通帖子
                    var top_post_list = [];
                    var normal_post_list = [];
                    for(var key in posts){
                        var post = posts[key];
                        if(post.top){
                            // 帖子有置顶属性
                            if(post.catalog_id==response[\'data\'][\'current_catalog\']){
                                // 帖子是当前类别
                                post.content = \'【置顶】\'+ post.content;
                                top_post_list.push(post);
                            }else{
                                // 推入非置顶帖子
                                normal_post_list.push(post);
                            }
                        }else{
                            // 非置顶帖子
                            normal_post_list.push(post);
                        }
                    }

                    // 分好之后交给对应的函数处理
                    $("div.post_list").html("");
                    create_post_list(top_post_list,"top_posts");
                    create_post_list(normal_post_list,"normal_posts");
                    create_paginator(page_count, current_page);
                }else {
                    // 没有帖子
                    $("div.post_list").text("还没有帖子喲，要不你发一个:)");
                }
            }
        }
    });
}

view_posts(js) 函数获取帖子、并根据指定与否分类到列表中，调用下面两个函数

/* 将view_posts中分好类的帖子展示到页面 */
function create_post_list(posts, cls) {
    if(posts.length>0){
        var big_div = document.createElement(\'div\');
        big_div.className = cls;
        for(var i=0;i<posts.length;i++){
            var post_div = document.createElement(\'div\'); // 包裹着整个帖子的div
            post_div.className="post_container clearfix";
            post_div.setAttribute("post_id", posts[i].id);
            var left_div = document.createElement(\'div\');
            left_div.className="left_container fl";
            var right_div = document.createElement(\'div\');
            right_div.className="right_container fl";
            var content_div = document.createElement(\'div\');
            content_div.className="post_content";
            var bar_div = document.createElement(\'div\');
            bar_div.className="post_bar";
            var comment_div = document.createElement(\'div\');
            comment_div.className="comment_container hide";

            content_div.innerText = posts[i].content;
            var like = posts[i].like?"已赞":"赞";
            var like_a = document.createElement(\'a\');
            var comment_a = document.createElement(\'a\');
            var displayname_span = document.createElement("span");
            var create_i = document.createElement(\'i\');
            like_a.href = comment_a.href = "javascript:void(0);";
            like_a.className="like_btn";
            like_a.setAttribute("onclick", "like(this," + posts[i].id + ")");
            like_a.setAttribute("like_count", posts[i].like_count);
            like_a.innerText = like+ \'(\' + posts[i].like_count + \')\';
            comment_a.className="show_comments_btn";
            comment_a.setAttribute("onclick", "show_comments(this,"+ posts[i].id +")");
            comment_a.innerText = \'评(\'+posts[i].comment_count+\')\';
            displayname_span.innerText = posts[i].user__display_name;
            create_i.innerText=\'在 \'+posts[i].create_on+\' 发布\';
            bar_div.appendChild(like_a);
            bar_div.appendChild(comment_a);
            bar_div.appendChild(displayname_span);
            bar_div.appendChild(create_i);

            // comment_div.innerText = "这里是评论";
            var comment_text_container = document.createElement(\'div\');
            var comment_content_container = document.createElement(\'div\');
            comment_text_container.className="comment_text_container";
            comment_content_container.className="comment_content_container";
            comment_div.appendChild(comment_text_container);
            comment_div.appendChild(comment_content_container);


            left_div.appendChild(content_div);
            left_div.appendChild(bar_div);

            if(posts[i].hasOwnProperty("img_link")){
                var img = document.createElement(\'img\');
                img.src = posts[i].img_link;
                right_div.appendChild(img);
            }

            var row_container = document.createElement(\'div\');
            row_container.className="row_container clearfix";
            row_container.appendChild(left_div);
            row_container.appendChild(right_div);

            post_div.appendChild(row_container);
            post_div.appendChild(comment_div);

            big_div.appendChild(post_div);
        }
        $("div.post_list").append(big_div);
    }
}

create_post_list(js) 函数将view_posts中分好类的帖子展示到页面

/* 分页 */
function create_paginator(total, current) {
    if(total>0){
        var paginator_container = $("div.paginator");
        paginator_container.children().remove();
        for(var i=1;i<=total;i++){
            var a = document.createElement(\'a\');
            a.innerText=i;
            if(i==current) a.className="current";
            a.href="javascript:void(0);";
            var cid = $("div.nav a.current").attr("cid");
            a.setAttribute("onclick", "view_posts(this,"+cid+","+i+")");
            paginator_container.append(a);
        }
    }
}

create_paginator(js) 函数生成分页标签

# 根据用户提交的类别catalog来读取帖子
def posts(request):
    if request.method == \'GET\':
        is_login = request.session.get("is_login", False)
        catalog_id = int(request.GET.get("catalog", 0))  # 如果URL参数中没有catalog，则为0，代表全部的意思
        page = int(request.GET.get("page", 1))  # 如果URL参数中没有page，视为从第一页开始取
        if page <= 0:
            # 如果page是0或者负数，则视为第一页
            page = 1
        start = (page - 1) * settings.POSTS_PARAMETERS.get(\'LIMIT\', 10)  # 根据page和LIMIT获得起始位
        end = page * settings.POSTS_PARAMETERS.get(\'LIMIT\', 10)  # 获得终结位
        if catalog_id == 0:
            post_list = Post.objects.all().order_by("-id")[start:end]  # 获取全部帖子，并逆序排序
            posts_count = Post.objects.all().count()
        else:
            # post_list = Post.objects.filter(catalog_id=catalog_id).all().order_by("-id")[start:end]
            post_list = Catalog.objects.filter(id=catalog_id, visible=True).first() \\
                            .posts.all().order_by("-id")[start:end]
            posts_count = Catalog.objects.filter(id=catalog_id, visible=True).first() \\
                .posts.all().count()
        page_count, mod = divmod(posts_count, 5)
        if mod > 0:
            page_count += 1
        ret = {}
        ret[\'status\'] = \'ok\'
        ret[\'data\'] = {}
        ret[\'data\'][\'page_count\'] = page_count
        ret[\'data\'][\'current_page\'] = page if page <= page_count else "超出范围了！"
        ret[\'data\'][\'current_catalog\'] = catalog_id
        ret[\'data\'][\'posts\'] = list(post_list.values("id",
                                                     "user__display_name",
                                                     "catalog_id",
                                                     "catalog__name",
                                                     "create_on",
                                                     "content",
                                                     "top",
                                                     "top_time",
                                                     "like_count",
                                                     "comment_count",
                                                     "img_link"))

        # 判断当前用户是否赞
        if is_login:
            current_user = request.session.get("current_user")
            current_user_likes = Like.objects.filter(user_id=current_user[\'id\']).values_list("post_id", flat=True)
        else:
            current_user_likes = []
        for post in ret[\'data\'][\'posts\']:
            post[\'like\'] = post[\'id\'] in current_user_likes

        return HttpResponse(json.dumps(ret, cls=DateTimeJSONEncoder))

views.py 根据用户提交的类别catalog来读取帖子

　　2、功能2：点赞

/* 点赞 */
function like(ele, post_id) {
    if(!is_login()){
        show_login_reg_frm();
        return false;
    }
    $.get({
        url:"/app01/like_post/",
        data:{\'post\':post_id},
        dataType:"json",
        success: function (response) {
            console.log(response);
            if(response.status="ok"){
                var like_count = parseInt($(ele).attr("like_count"));
                if(response.msg==\'liked\'){
                    // 已赞
                    alert("已赞");
                    like_count++;
                    $(ele).text("已赞("+like_count+")");
                }else if(response.msg==\'unliked\'){
                    // 已取消赞
                    alert("已取消赞");
                    like_count--;
                    $(ele).text("赞("+like_count+")");
                }
                $(ele).attr("like_count", like_count);
            }
        }
    });
}

like(js) 点赞

# 点赞功能，如果用户未赞过，则点赞；否则，取消赞
@check_login
def like_post(request):
    ret = {\'status\': \'ok\'}
    if request.method == \'GET\':
        post_id = request.GET.get("post")
        user_id = request.session.get("current_user")[\'id\']
        like_record = Like.objects.filter(user_id=user_id, post_id=post_id).all()
        if like_record:
            # 已赞过,取消赞
            like_record.delete()
            ret[\'msg\'] = \'unliked\'
            Post.objects.filter(id=post_id).update(like_count=F("like_count") - 1)
        else:
            # 未赞过，赞一下
            Like.objects.create(user_id=user_id, post_id=post_id)
            Post.objects.filter(id=post_id).update(like_count=F("like_count") + 1)
            ret[\'msg\'] = \'liked\'

        return HttpResponse(json.dumps(ret))

views.py 点赞