Django博客系统开发05

文章的增删改发布

通过之前的步骤,我们已经有了一个初步的网站页面(首页+Django Admin),其实我们已经可以通过admin页面来对文章进行操作了,但是为了更像是一个真正的博客,我们应该能够从前端进行对文章的增删改查。

查看文章(post_view)

我们现在只有一个页面–首页。在首页中,我们获取到的是全部已经发布的文章列表。现在,我们创建一个文章详情页,当用户点击首页的文章标题时,将跳转到这个页面。

首先,我们为这个页面添加路由,在hzblog/urls.py中加入一行

url(r'^post/(?P<pk>[0-9]+)/$', views.post_view, name='post_view'),

然后,我们修改模板文件,增加跳转链接。在index.html中修改标题的href属性:

<h1><a href="{% url 'hzblog:post_view' pk=post.pk %}">{{ post.title }}</a></h1>

这里使用了url方法来获得post_view的真实url。hzblog:post_view(即AppName:RouterName)这种写法时因为我们之前在hzblog/urls.py中进行了如下定义:

...
app_name = 'hzblog'

urlpatterns = [
    ...
    url(r'^post/(?P<pk>[0-9]+)/$', views.post_view, name='post_view'),
    ...
]

如果是在hzsite/urls.py中定义的url,则不需要添加app前缀,直接使用’post_views’。

下面,创建列表页对应的view。修改views.py,加入post_view方法:

from django.shortcuts import render, get_object_or_404

def post_view(request, pk):
    post = get_object_or_404(Post, pk=pk)
    return render(request, 'blog/post_view.html', {'post': post})

通过view,请求将会被render到post_view.html这个模板。现在我们创建这个模板(hzblog/templates/blog/post_view.html):

{% extends 'blog/base.html' %}

{% block content %}
    <div class="date">
        {% if post.published_date %}
            {{ post.published_date }}
        {% endif %}
    </div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.text|linebreaks }}</p>
{% endblock %}

这时候,我们访问

http://localhost:8080/post/2/

20161127145736

我们就能够看到文章详情页了。

Django小结

这里可以对创建一个页面/功能的流程进行一个小结。

  1. 在urls.py中添加新页面/功能的路由
  2. 在views.py中添加对应的方法来处理路由发送过来的请求,将数据渲染到对应模板
  3. 在templates文件夹下创建新页面/功能的模板,将views发送过来的数据进行展现

创建文章(post_create)

所谓的创建文章,我们可以理解成向服务器提交一个表单,表单中包含了文章的信息和内容。所以,我们先引入Django的Form来完成我们的功能。首先创建hzblog/forms.py

from django import forms
from .models import Post

class PostForm(forms.ModelForm):

    class Meta:
        model = Post
        fields = ('title', 'text',)

所以接下来,我们按照上面做的小结,开始增加创建文章功能的流程。首先,添加路由

url(r'^post/create/$', views.post_create, name='post_create'),

然后增加views

from django.shortcuts import redirect

def post_create(request):
    if request.method == "POST":
        form = PostForm(request.POST)
        if form.is_valid():
            post = form.save(commit=False)
            post.author = request.user
            post.save()
            return redirect('hzblog:post_view', pk=post.pk)
    else:
        form = PostForm()
    return render(request, 'blog/post_edit.html', {'form': form})

这里使用了一个redirect方法,即创建完文章之后跳转到post_view页面。而在返回中,我们将请求发送到了post_edit模板。这个模板现在还没有创建,因为我们的新增文章和编辑文章都将使用这个模板,所以会在接下来的编辑文章功能部分创建。

最后我们修改模板base.html,在page-header这个div中,增加创建文章按钮:

...
    <div class="page-header">
        <a href="{% url 'hzblog:post_create' %}" class="top-menu"><span class="glyphicon glyphicon-plus"></span></a>
        <h1><a href="/">ZIVER'S</a></h1>
    </div>
...

编辑文章(post_edit)

在创建文章功能中,我们遗留了post_edit这个模板没有添加。在编辑文章功能中,我们将实现这个模板。还是之前的流程,我们先创建路由

url(r'^post/(?P<pk>[0-9]+)/edit/$', views.post_edit, name='post_edit'),

然后增加view方法

def post_edit(request, pk):
    post = get_object_or_404(Post, pk=pk)
    if request.method == "POST":
        form = PostForm(request.POST, instance=post)
        if form.is_valid():
            post = form.save(commit=False)
            post.author = request.user
            post.save()
            return redirect('hzblog:post_view', pk=post.pk)
    else:
        form = PostForm(instance=post)
    return render(request, 'blog/post_edit.html', {'form': form})

最后增加post_edit.html模板

{% extends 'blog/base.html' %}

{% block content %}
    <h1>New post</h1>
    <form method="POST" class="post-form">{% csrf_token %}
        {{ form.as_p }}
        <button type="submit" class="save btn btn-default">Save</button>
    </form>
{% endblock %}

最后,在post_view.html中增加编辑文章的按钮

<a class="btn btn-default" href="{% url 'hzblog:post_edit' pk=post.pk %}"><span class="glyphicon glyphicon-pencil"></span></a>

修改完成后,post_views.html内容如下:

{% extends 'blog/base.html' %}

{% block content %}
    <div class="date">
        {% if post.published_date %}
            {{ post.published_date }}
        {% endif %}
        <a class="btn btn-default" href="{% url 'hzblog:post_edit' pk=post.pk %}"><span class="glyphicon glyphicon-pencil"></span></a>
    </div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.text|linebreaks }}</p>
{% endblock %}

测试

在完成以上功能后,我们可以稍微测试一下效果。因为增加和修改文章都是需要以用户身份执行的,而我们的前端登陆功能还没有实现,所以我们首先用django自带的amin登陆到我们的博客:

http://localhost:8080/admin

然后访问首页

20161127152833

由于没有新文章的发布,首页依然只有一篇文章。右上角有了创建文章的按钮,点击按钮创建文章

20161127152939

这里就有一个可以填写的表单,填写后点击save

20161127153004

保存后,跳转到了文章的详情页。此时的文章还没有发布,所以不会在首页显示,发布后文章右上角将显示发布时间。现在右上角有编辑按钮,点击按钮将回到文章编辑页(和新建文章是同一个模板)。接下来,我们将实现发布功能。

草稿列表(post_drafts)

未发布的文章称为草稿,为了实现发布功能,我们先实现草稿列表页,将未发布的文章列出来。

首先添加路由

url(r'^drafts/$', views.post_drafts, name='post_drafts'),

然后增加view方法

def post_drafts(request):
    posts = Post.objects.filter(published_date__isnull=True).order_by('-created_date')
    return render(request, 'blog/post_drafts.html', {'posts': posts})

之后增加post_drafts.html模板

{% extends 'blog/base.html' %}
{% block content %}
    {% for post in posts %}
        <div class="post">
            <p class="date">created: {{ post.created_date|date:'d-m-Y' }}</p>
            <h1><a href="{% url 'hzblog:post_view' pk=post.pk %}">{{ post.title }}</a></h1>
            <p>{{ post.text|truncatechars:200 }}</p>
        </div>
    {% endfor %}
{% endblock %}

最后在base.html中增加草稿列表页入口按钮

...
    <div class="page-header">
        <a href="{% url 'hzblog:post_create' %}" class="top-menu"><span class="glyphicon glyphicon-plus"></span></a>
        <a href="{% url 'hzblog:post_drafts' %}" class="top-menu"><span class="glyphicon glyphicon-list-alt"></span></a>
        <h1><a href="/">ZIVER'S</a></h1>
    </div>
...

发布文章(post_publish)

增加路由

url(r'^post/(?P<pk>[0-9]+)/publish/$',views.post_publish, name='post_publish'),

增加view方法

def post_publish(request, pk):
    post = get_object_or_404(Post, pk=pk)
    post.publish()
    return redirect('hzblog:post_view', pk=pk)

在post_view页面中增加发布按钮

将下面内容

{% if post.published_date %}
    {{ post.published_date }}
{% endif %}

修改为

{% if post.published_date %}
    {{ post.published_date }}
{% else %}
    <a class="btn btn-default" href="{% url 'blog.views.post_publish' pk=post.pk %}">Publish</a>
{% endif %}

删除文章(post_delete)

增加路由

url(r'^post/(?P<pk>[0-9]+)/delete/$', views.post_delete, name='post_delete'),

增加view方法

def post_delete(request, pk):
    post = get_object_or_404(Post, pk=pk)
    post.delete()
    return redirect('hzblog:index')

在post_view页面中增加发布按钮

 ...  
    <div class="date">
    ...
    {% endif %}
        ...
        <a class="btn btn-default" href="{% url 'hzblog:post_delete' pk=post.pk %}"><span class="glyphicon glyphicon-remove"></span></a>
    </div>
...

至此,博客的基本功能:查看文章,创建文章,编辑文章,删除文章,发布文章功能完成。

暂无评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注