【Django2.0学习笔记】29.完善点赞功能

29、完善点赞功能

1、完善点赞功能

• 1、新增评论和回复无法点赞
• 2、未登录情况下点赞
  

2、新增评论和回复无法点赞

• 新增评论和回复没有onclick事件
• 字符串拼接问题
  

完善问题一：新增评论和回复无法点赞

在blog_detail.html页面，在新增评论这部分（在{% block script_extends %}里的插入评论和插入回复的部分），只有评论，没有点赞，这里我们要改成和评论列表部分的评论和回复处的代码一样，有点赞的onclick事件。但我们看到新增评论这里，这一串html代码维护起来特别麻烦，再加入内容不是很好加，这就涉及到字符串拼接的问题，而js并没有python那样像%s的占位符或者format参数，这里我们准备定义一个format参数，让它可以通过占位符加进去。
例如：'{0}+{1}'.format('a','b')，最终会返回'a+b'这样子的字符串

在blog_detail.html里面的{% block script_extends %}这块里面定义format如下：

我们可以测试下这段代码，随便打开一个网页，按F12，进入Console，复制粘贴这段代码，回车，输入几个测试用例，回车，测试结果如下：

那现在我们这个占位符这种字符串拼接方式就实现了，它有利于我们把代码写的更加清楚，看得更加清晰点

然后修改 block script_extends 里面 新增评论 这部分的 var comment_html 这段字符串（下图二，这段字符串之前是复制 评论列表 里面的html代码， 稍作修改每个字段而得到的），同样的，我们需要把前面 评论列表 对应的html代码（有onclick事件，下图一）复制过来


修改如下：

注意，上面'{% get_content_type comment %}'模板标签这里，是返回comment的ContentType的字符串，这里上下没有comment变量，那么我们就要有另外一个方法编写它，因为我们这里是一个ajax异步提交请求，会返回一个json数据，那么我们也可以把上面这个数据返回回来。返回数据是在评论的处理方法comment/views.py这个位置，我们打开comment/views.py，加多一个content_type如下：

接着继续blog_detail.html里面的修改：
step2：修改评论的html字符串，并调用format进行并替换。
新增评论肯定是没有点赞过的，所以这里删除掉{% get_like_status comment %}。点赞数量为0，所以这里{% get_like_count commnet %}直接改为0
{0}-{3}分别对应下面format里的data的4个字段；{4}对应comment/views.py里面新加的data['content_type']

if($('#reply_comment_id').val()=='0'){
	//插入评论
	var comment_html = '<div id="root_{0}" class="comment"> \
							<span>{1}</span> \
							<span>({2}):</span> \
							<div id="comment_{0}"> \
								{3} \
							</div> \
							<div class="like" onclick="likeChange(this, \'{4}\', {0})"> \
								<span class="glyphicon glyphicon-thumbs-up"></span> \
								<span class="liked-num">0</span> \
							</div> \
							<a href="javascript:reply({0});">回复</a> \
						</div>';
	// format 替换
	comment_html = comment_html.format(data['pk'], data['username'], timeFormat(data['comment_time']), data['text'], data['content_type']);

	$("#comment_list").prepend(comment_html);
}

同理，下面的回复评论也是如此，我们也做相应的修改

保存，启动本地服务，然后刷新页面

3、未登录情况下点赞

• 弹出一个登录框
  

完善问题二：未登录状态下的点赞

针对这种情况，我们可以做一个处理，我们可以让它跳到登录页面，但是像点赞这种轻轻松松的操作，让跳转到登陆页面 登录后又跳转回来，这就会显得过于麻烦了。那么像这种情况，我们需要换一种设计，我们点击点赞，弹出登录框，直接在弹框里填入用户名和密码进行登录就可以了。这里我们用到Bootstrap css框架 写登录框，查看Bootstrap官方文档（https://v3.bootcss.com/javascript/#modals），点击“JavaScript插件”——“模态框”，

复制Modal的代码，修改blog_detail.html


刷新页面

然后我们回头完善Modal里面的modal-body内容如下（参考login.html里面登录部分form表单的代码）：

修改blog_detail.html如下：

这里面的 login_form 还没有传给模板页面，这是在blog/views.py里的blog_detail这个地方渲染出来的，修改如下：

刷新页面

这里输入用户名和密码后点击“登录”，这个处理方法我们还没处理
继续修改blog_detail.html：
在modal-content下面的form表单，添加一个idid="login_modal_form"

<div class="modal-content">
	<form id="login_modal_form" action="" method="POST">

然后编写处理这个form提交的方法：

首先，这个url，我们还没有定义，我们在全局的url里mysite/urls.py有个login 对应views.py里面的login方法， 这个登录是给登录页面使用的，返回一个登录的页面，这里我们需要加上一个登录modal的方法
修改mysite/views.py：

然后给url加上一个路由
修改mysite/urls.py：

然后我们回到blog_detail.html，修改如下：

保存，刷新页面，点击点赞，在弹出的登录框里输入用户名和密码 登录