技术笔记——Django+Nginx+uwsgi搭建自己的博客（七）

上一篇博客中介绍了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相关的管理功能，包括编辑博客、删除博客、修改用户信息等功能，希望大家继续关注～