django1.10开发博客(7)——文章的添加、发布、编辑、删除

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

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

定制表单


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


django1.10开发博客(7)——文章的添加、发布、编辑、删除_第1张图片
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的...内增加两条CSS,注意他们的位置:


    
    
    
    
    
    Django Simple Blog
    
    
    Simple Django Blog
    

然后page-header的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 %}
    

New post

{% csrf_token %} {{ form.as_p }}
{% endblock %}

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

刷新页面按照上面的操作,新建:


django1.10开发博客(7)——文章的添加、发布、编辑、删除_第2张图片
19.jpg

保存:


django1.10开发博客(7)——文章的添加、发布、编辑、删除_第3张图片
20.jpg

成功!

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

草稿箱


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

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


接着在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 %}
        

created: {{ post.created_date|date:'m d, Y' }}

{{ post.title }}

{{ post.text|truncatechars:200 }}

{% endfor %} {% endblock %}

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


django1.10开发博客(7)——文章的添加、发布、编辑、删除_第4张图片
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 %}
    Publish
{% endif %}

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

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

url(r'^post/(?P[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详情页。

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

刷新后发布看看,有发布日期了:


django1.10开发博客(7)——文章的添加、发布、编辑、删除_第5张图片
22.jpg

主页面也看到它了:

django1.10开发博客(7)——文章的添加、发布、编辑、删除_第6张图片
23.jpg


文章编辑与删除


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

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

{% extends 'blog/base.html' %}
{% block content %}
    
{% if post.published_date %} {{ post.published_date|date:'M d, Y' }} {% else %} Publish {% endif %}

{{ post.title }}

{{ post.text|linebreaks }}

{% 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[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[0-9]+)/publish/$', views.post_publish, name='post_publish'),
    url(r'^post/(?P[0-9]+)/edit/$', views.post_edit, name='post_edit'),
    url(r'^post/(?P[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)——文章的添加、发布、编辑、删除)