目录：抽屉项目之js最佳实践
目录：
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>
<script> /* 初始化函数 */ $(function () { /* 显示首页 */ view_posts($(".nav:first-child")[0],0,1); // ".nav:first-child" 默认选中的是展示帖子分类中“全部”那个a标签 //0 代表“全部”那个分类对应的分类id //1 默认显示第1页 }); </script>
/* * 功能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中分好类的帖子展示到页面 */ 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); } }
/* 分页 */ 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); } } }
# 根据用户提交的类别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))
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); } } }); }
# 点赞功能，如果用户未赞过，则点赞；否则，取消赞 @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))