目录：抽屉项目之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))
来源：oschina
链接：https://my.oschina.net/u/4390921/blog/4195454