上一篇博客中介绍了Blogs App的部分后端功能的实现,在这篇博客中,将继续为大家介绍Blogs App中前端功能的实现。
首先来看发布博客功能的前端页面。在blogs/templates/blogs目录下建立名为addBlog.html的文件,作为我们的发布博客页面。addBlog.html内容如下:
<!-- addBlog.html -->
{% extends "blogTemplate.html" %}
{% block content %}
<div class="content">
<form action="{% url 'blogs:addblog' %}" method="post">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="保存并提交">
<input type="button" id="saveDraft" value="保存到草稿">
<div id="tip" >
</div>
</form>
</div>
<script>
CKEDITOR.replace('blogcontent',{uiColor:'#9AB8F3'});
</script>
<script>
$("#saveDraft").click(function(){
var blogContent = "";
try
{
blogContent = CKEDITOR.instances.id_content.getData();
}
catch(ex){}
$.post("{% url 'blogs:saveDraft' %}",
{
title:$("#id_title").val(),
category:$("#id_category").val(),
content:blogContent,
csrfmiddlewaretoken:'{{ csrf_token }}'
},
function(data,status)
{
var mydate = new Date();
$("#tip").html("<p>文章已存为草稿于"+mydate.toLocaleString()+"</p>");
$("#tip").show();
$("#tip").delay(5000).hide(0);
});
});
</script>
<script>
function saveDraft(){
var blogContent = "";
try
{
blogContent = CKEDITOR.instances.id_content.getData();
}
catch(ex){}
$.post("{% url 'blogs:saveDraft' %}",
{
title:$("#id_title").val(),
category:$("#id_category").val(),
content:blogContent,
csrfmiddlewaretoken:'{{ csrf_token }}'
},
function(data,status)
{
var mydate = new Date();
$("#tip").html("<p>文章已存为草稿于"+mydate.toLocaleString()+"</p>");
});
}
setInterval(saveDraft,60000);
</script>
</div>
{% endblock %}
这个页面在显示的方面比较简单,就是将我们在上一篇博客中建立好的BlogForm表单显示在页面上。注意,为了使用CKeditor,我们需要使用以下的javascript语句对我们的文本域进行替换:
<script>
CKEDITOR.replace('blogcontent',{uiColor:'#9AB8F3'});
</script>
其中,blogcontent是我们文本域的id,而uiColor意味着我们可以为这个文本框指定颜色。
在该页面中,另外一个功能是将正在编辑的文章存储为草稿。由于保存草稿的操作不允许提交表单后跳转页面,因此我们需要使用jquery ajax的方式提交表单。在这里,我们提供了两种方式将文章保存草稿:1、通过用户手动点击保存按钮来存为草稿;2、每隔1分钟自动保存草稿。首先来看通过按钮来保存的javascript代码:
<script>
$("#saveDraft").click(function(){
var blogContent = "";
try
{
blogContent = CKEDITOR.instances.id_content.getData();
}
catch(ex){}
$.post("{% url 'blogs:saveDraft' %}",
{
title:$("#id_title").val(),
category:$("#id_category").val(),
content:blogContent,
csrfmiddlewaretoken:'{{ csrf_token }}'
},
function(data,status)
{
var mydate = new Date();
$("#tip").html("<p>文章已存为草稿于"+mydate.toLocaleString()+"</p>");
$("#tip").show();
$("#tip").delay(5000).hide(0);
});
});
</script>
这段代码的主体可以抽象成如下形式:
<script>
$("#saveDraft").click(function(){});
</script>
在上面的表单中,可以看到我们创建了一个id为saveDraft的按钮,因此这里可以通过$("#saveDraft")来访问此按钮,并且指定当单击该按钮时执行这个匿名function。
在这个匿名function中,我们可以通过blogContent = CKEDITOR.instances.id_content.getData();来取得当前CKeditor编辑器中的内容,并通过POST的方式将表单内容发送给服务器。在这里,我们使用jquery ajax的$.post方法来提交表单。该方法包括三个参数:url,data和callback函数。url即为表单要提交到的地址,这里我们依然可以使用Django提供的{% url %}标记作为url;而data是我们要提交的数据。与一般的提交表单相比,这里的数据需要以json的格式发送给服务器;而callback是回调函数,即当表单内容被发送给服务器后要执行的程序,这里我们会显示存为草稿的时间,并且显示5秒后消失。
定时存储为草稿的功能与这段代码基本完全一样,只是把这个匿名函数加了个saveDraft的名称,然后加上了setInterval(saveDraft,60000);这句,以便每隔60s便调用一次此函数,将文章存为草稿,如下所示:
在成功发布博客后,页面会跳转到addblogResult.html页面中,该页面比较简单,代码如下所示:
{% extends "blogTemplate.html" %}
{% block content %}
<div class="content">
{{ info }}
</div>
<p><a href="{% url 'index' %}">返回首页</a></p>
{% endblock %}
现在,我们已经可以发布自己的博客了。下面让我们看看如何发布评论。首先还是先来看后端部分,我们编写了saveComment函数用于发布评论,如下所示:
# blogs/views.py
# ...
def saveComment(request):
comment_content = request.POST['blogcomment']
blog = Blog.objects.get(pk=request.session['currblogId'])
result_info = ''
try:
auther = Users.objects.get(username=request.session['username'])
except KeyError:
auther = Users.objects.get(username='anony')
try:
mycomment = Comment.create(blog,comment_content,auther,datetime.datetime.now())
blog.commentcount = blog.commentcount + 1
blog.save()
mycomment.save()
result_info = 'Success'
except ValidationError as e:
result_info = 'Fail'
return HttpResponseRedirect(reverse('blogs:content',kwargs={'blogId':request.session['currblogId']}))
# ...
这段程序和Users App中的登录程序有相似的地方,都是通过request.POST的方式取得表单的数据,然后进行后续操作。与发布博客不同的是,这里使用了Comment Model中建立的create函数来建立新的Comment数据,通过create函数,我们可以更加灵活地决定Model中每个字段的值。还需注意的一点是,在成功发布评论后,我们并没有跳转到一个新的页面,而是仍然跳转到当前浏览的博客的页面,因此我们可以立刻看到我们发布的评论:
而发布评论的前端部分在上一篇博客中介绍content页面的部分中已经包括了,这里再搬运一下:
<!-- blogs/templates/blogs/content.html -->
{% extends "blogTemplate.html" %}
{% block content %}
<div class="content">
<h2>{{ blog_title }}</h2>
{{ content|safe }}
</div>
<p><a href="{% url 'index' %}">返回首页</a></p>
{% endblock %}
{% block comment %}
{% if comment_list %}
{% for comment in comment_list %}
<ul class="comment">
<li>
{% if comment.auther.username == "anony" %}
<h4>匿名用户 {{ comment.createtime|date:"Y-m-d H:i:s" }}</h4>
{% else %}
<img src="{{ comment.auther.logoimage.url }}" width="64" height="64" />
<h4>{{ comment.auther }} {{ comment.createtime|date:"Y-m-d H:i:s" }}</h4>
{% endif %}
</li>
<li>{{ comment.content|safe }}</li>
</ul>
<hr/>
{% endfor %}
{% else %}
<ul class="comment">
<p>还没有人发表评论</p>
</ul>
{% endif %}
<span>评论 </span>
<form action="{% url 'blogs:saveComment' %}" method="post">
{% csrf_token %}
<ul class="comment">
<li><textarea name="blogcomment"></textarea></li>
<li><input type="submit" value="提交"></li>
</ul>
</form>
{% endblock %}
这段代码中最下方的表单就是我们发布评论所用到的。由于Comment Model没有涉及文件的上传操作,因此我们没有采用ModelForm的形式,而是自己在前端组织表单,并将对应的值发送给后端。对于一些不太复杂的Model,采用自己设计的表单可能会更方便。 截止到这篇博客,Users App和Blogs App的核心功能已经完成了,我们现在实现的功能有:用户注册、用户登录、退出登录、查看用户资料、发布博客、将博客存为草稿、发布评论以及浏览博客等。从下篇博客开始,将会继续开发与Users App和Blogs App相关的管理功能,包括编辑博客、删除博客、修改用户信息等功能,希望大家继续关注~