django1.10开发博客（7）——文章的添加、发布、编辑、删

2016-12-28 本文已影响506人暗夜望月

前几节我们实现了在admin界面对博客文章进行添加、发布、编辑和删除，但是每次我们都要进入admin才能进行这些操作实在太麻烦，而且admin界面也难以定制和美化。这一节我们要实现在正常博客界面进行这些操作。

django可以定制一个表单，并创建一个ModelForm来将表单结果保存为一个模型。我们可以创建一个ModelForm来将表单转换为一个Article模型。语言说明太难懂了，边做边理解吧！

定制表单

mysite\blog里面创建forms.py，PyCharm里面看现在的工程结构应该是：

17.jpg

在forms.py里面写下：

from django import forms
from .models import Article

class ArticleForm(forms.ModelForm):
    class Meta:
        model = Article
        fields = ('title', 'text', 'category')

ArticleForm需要继承自forms.ModelForm，这样django就能实现某些神奇的效果。在里面我们定义了元类Meta，然后指定model为Article，还有字段为title、text和category。因为我们只需要对外暴露标题、内容和标签分类，至于作者就是登陆用户了，而发布日期和创建日期就是提交时间。

更多django 表单的学习：Working with forms

文章添加

在base.html的<head>...</head>内增加两条CSS，注意他们的位置：

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="{% static 'css/blog.css' %}">
    <title>Django Simple Blog</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="This is a simple django blog!">
    <title>Simple Django Blog</title>
    <link rel="shortcut icon" href="{% static 'img/favicon.ico' %}">
</head>

然后page-header的div做如下修改：

<div class="page-header">
    <div class="row">
        <div style="float: left" > <h1><a href="/">Django Simple Blog</a></h1></div>
        <div style="float: right">
            <ul class="nav nav-pills">
                <li class="active"><a href="{% url 'post_new' %}"><span class="glyphicon glyphicon-pencil"></span> 新建</a></li>
            </ul>
        </div>
    </div>
</div>

也就是用style将标题和按钮设定为浮动，标题靠左，按钮靠右，这样标题和按钮就会在同一行的两侧，更美观。新建按钮使用了bootstrap字体图标，使用方法可以参考：Bootstrap按钮图标

新建按钮指向了名为post_new的url，因此在mysite\mysite\urls.py中增加一条url：

url(r'^post/new/$', views.post_new, name='post_new'),

views.post_new视图无效，那就去views.py里面添加post_new：

from .forms import ArticleForm
from django.shortcuts import redirect

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

在mysite\templates\blog下建立post_edit.html：

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

把视图和模板接合起来理解，post_new视图先按照ArticleForm（else部分）和post_edit.html组成编辑页面，用户写完文章后点击submit按钮POST提交，再次回到post_new视图（if部分），保存文章，转到post_detail视图，也就是显示当前写好的文章详情页面。

刷新页面按照上面的操作，新建：

19.jpg

保存：

20.jpg

成功！

还可以在blog.css里调整导航栏高度、标题大小、标题和按键与两侧、上下的距离等，请自行探索。。。

草稿箱

回到主页面，发现并没有我们刚刚新建的文章，但是admin页面里面有。在admin页面中，我们可以看到新建的文章只有Created date而没有Publish date，也就是说这篇文章还没有正式发布，而主页面只会显示有发布时间即已发布的文章（看视图post_list）。要想看到没有已创建但未发布的文章，我们还需要一个草稿箱功能。

首先添加一个链接。就像刚才的添加文章按钮一样，在base.html的page-header内新增一个草稿箱按钮，按钮区就变成了这样：

<div style="float: right">
    <ul class="nav nav-pills">
        <li class="active"><a href="{% url 'post_new' %}"><span class="glyphicon glyphicon-pencil"></span> 新建</a></li>
        <li class="active"><a href="{% url 'post_draft_list' %}"><span class="glyphicon glyphicon-th-list"></span> 草稿箱</a></li>
    </ul>
</div>

接着在mysite\mysite\urls.py增加一条url：

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

然后在mysite\blog\views.py添加一个视图，这个视图和post_list视图只有一个是否有发布时间的不同：

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

最后在mysite\templates\blog下新建一个post_draft_list.html模板，和post_list.html也很像：

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

刷新页面点击按钮打开草稿箱，就可以看到我们刚才新建的文章了。

21.jpg

这里有一点要说明的是，对照post_draft_list.html和草稿箱列表的实际显示界面，我们可以看到文章的创建时间是显示出来的。点击文章标题进入文章详情页，实际用的是post_detail的视图和模板，post_detail.html里面通过if判断是否显示发布时间，这使得这个模板可以被post_draft_list和post_list公用，如果没有这个判断而是直接显示的话，对于未发布文章的详情页就会因缺少参数publish_date而出错。可见这个if的重要性。

文章发布

在文章详情页面添加一个发布的按钮，如果觉得合适的时候就能发布文章了。仍然是四步，很简单。

第一步，添加链接。
打开post_detail.html，把我们刚才说的if判断，也就是：

{% if post.published_date %}
    {{ post.published_date |date:'M d, Y'}}
{% endif %}

替换成下面的：

{% if post.published_date %}
    {{ post.published_date|date:'M d, Y' }}
{% else %}
    <a class="btn btn-default" href="{% url 'post_publish' pk=post.pk %}">Publish</a>
{% endif %}

也就是说，如果有发布时间就显示发布时间，否则就显示发布按钮。这里要链接名为post_publish的url。

第二步，在mysite\mysite\urls.py添加一条url，指向视图post_publish：

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

第三步，在mysite\blog\views.py添加：

def post_publish(request, pk):
    post = get_object_or_404(Article, pk=pk)
    post.publish()
    return redirect('post_detail', pk=pk)

通过model里面定义的publish方法创建发布时间，发布后重定向到post_detail详情页。

第四步，不需要创建新的模板，所以这一步省略。

刷新后发布看看，有发布日期了：

22.jpg

主页面也看到它了：

23.jpg

文章编辑与删除

文章编辑和删除功能就一起说吧，毕竟都是那几步。

第一步，mysite\templates\blog\post_detail.html添加按钮链接，跟发布按钮差不多，最终变成这样：

{% extends 'blog/base.html' %}
{% block content %}
    <div class="date">
        {% if post.published_date %}
            {{ post.published_date|date:'M d, Y' }}
        {% else %}
            <a class="btn btn-default" href="{% url 'post_publish' pk=post.pk %}">Publish</a>
        {% endif %}
        <a class="btn btn-default" href="{% url 'post_edit' pk=post.pk %}"><span class="glyphicon glyphicon-pencil"></span></a>
        <a class="btn btn-default" href="{% url 'post_remove' pk=post.pk %}"><span class="glyphicon glyphicon-remove"></span></a>
    </div>
    <h3>{{ post.title }}</h3>
    <a class="post-category post-category-js" href="#">{{ post.category }}</a>
    <p>{{ post.text|linebreaks }}</p>
{% endblock %}

第二步，mysite\mysite\urls.py添加url，最终变成这样：

from django.conf.urls import url
from django.contrib import admin
from blog import views

urlpatterns = [
    url(r'admin/', admin.site.urls),
    url(r'^$', views.post_list, , name='post_list'),
    url(r'^post/(?P<pk>[0-9]+)/$', views.post_detail, name='post_detail'),
    url(r'^post/new/$', views.post_new, name='post_new'),
    url(r'^drafts/$', views.post_draft_list, name='post_draft_list'),
    url(r'^post/(?P<pk>[0-9]+)/publish/$', views.post_publish, name='post_publish'),
    url(r'^post/(?P<pk>[0-9]+)/edit/$', views.post_edit, name='post_edit'),
    url(r'^post/(?P<pk>[0-9]+)/remove/$', views.post_remove, name='post_remove'),
]

注意这里给post_list的url命名了，方便以后映射。

第三步，mysite\blog\views.py增加视图逻辑：

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

def post_remove(request, pk):
    post = get_object_or_404(Article, pk=pk)
    post.delete()
    return redirect('post_list')

第四步，post_edit重用post_edit.html模板，post_remove没有模板，所以这一步又省略了。

效果自己看吧，多试试，编辑和删除功能对已发布和草稿箱文章都适用，这里不截图了。

2016.10.24

django1.10开发博客（7）——文章的添加、发布、编辑、删

定制表单

文章添加

草稿箱

文章发布

文章编辑与删除

猜你喜欢

热点阅读