十四、Django2.1 搭建多用户的博客网站——向用户展示文章

2019-02-17 本文已影响142人 27efec53a72d

目录：Django 2.1 从零开始搭建博客网站系列

服务器环境搭建（选学）

在阿里云服务器从零开始上线Django项目：Ubuntu18.04+Python3+Django2，并通过公网IP访问

小试牛刀——简单的博客网站

庖丁解牛——多用户的博客网站之用户模块

庖丁解牛——多用户的博客网站之文章模块

华丽转身——多用户的博客网站之扩展功能

项目源码下载：https://github.com/jt1024/lehehe

正文：

1、展示前台文章列表

1.1 创建 ./article/list_views.py

from django.shortcuts import render
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
from .models import ArticlePost


def article_titles(request):
    articles_title = ArticlePost.objects.all()
    paginator = Paginator(articles_title, 2)
    page = request.GET.get('page')
    try:
        current_page = paginator.page(page)
        articles = current_page.object_list
    except PageNotAnInteger:
        current_page = paginator.page(1)
        articles = current_page.object_list
    except EmptyPage:
        current_page = paginator.page(paginator.num_pages)
        articles = current_page.object_list

    return render(request, "article/list/article_titles.html", {"articles": articles, "page": current_page})

实际上，可以把上述方法写在 ./article/views.py 中，此处这么些主要是让大家理解：视图函数的文件不一定都是 views.py

1.2 创建 ./templates/article/list/article_titles.html

{% extends "base.html" %}
{% block title %} articles {% endblock %}
{% block content %}
<div class="row text-center vertical-middle-sm">
    <h1>阅读，丰富头脑，善化行为</h1>
</div>
<div class="container">
    {% for article in articles %}
    <div class="list-group">
        <a href="#" class="list-group-item active">
            <h4 class="list-group-item-heading">{{article.title}}</h4>
        </a>
        <p class="list-group-item-text">作者:{{article.author.username}}</p>
        <p class="list-group-item-text">概要:{{article.body|slice:'70'| linebreaks}}</p>
    </div>
    {% endfor %}
    {% include "paginator.html" %}
</div>
{% endblock %}

1.3 增加路由

在 ./article/urls.py 中添加新的路由

path('list-article-titles/', list_views.article_titles, name="article_titles"),

1.4 测试效果

访问 http://127.0.0.1:8000/article/list-article-titles/

前台文章列表

2、展示前台文章内容

2.1 修改视图函数

在 ./article/list_views.py 中新增方法

from django.shortcuts import get_object_or_404

def article_detail(request, id, slug):
    article = get_object_or_404(ArticlePost, id=id, slug=slug)
    return render(request, "article/list/article_content.html", {"article": article})

2.2 修改model

在 ./article/models.py 的ArticlePost内部新增以下代码

    def get_url_path(self):
        return reverse("article:article_content", args=[self.id, self.slug])

本来 get_absolute_url 就可以取到文章的url地址，这里我们却新增了
get_url_path 来获取文章的url地址，为什么呢？
我们来看看get_absolute_url方法：

    def get_absolute_url(self):
        return reverse("article:article_detail", args=[self.id, self.slug])

这里面会执行 ./article/views.py 中的 article_detail 方法，这个方法代码如下：

@login_required(login_url='/account/login')
@require_POST
@csrf_exempt
def del_article(request):
    article_id = request.POST['article_id']
    try:
        article = ArticlePost.objects.get(id=article_id)
        article.delete()
        return HttpResponse("1")
    except:
        return HttpResponse("2")

可以看出，执行这个方法时需要先登录，而我们想把前台文章展示给所有用户，包括游客，所以我们需要重新定义一个不需要登录就能查看文章内容的方法。因此定义了这个get_url_path方法。

2.3 创建 ./templates/article/list/article_content.html

{% extends "base.html" %}
{% load staticfiles %}
{% block title %}articles list{% endblock %}
{% block content %}

<div class="container">
    <div class="col-md-9">
        <header>
            <h1>{{ article.title }}</h1>
            <p>{{ article.author.username }}</p>
        </header>

        <link rel="stylesheet" href="{% static 'editor/css/editormd.preview.css' %}"/>
        <div id='editormd-view'>
        <textarea id="append-test" style="display:none;">
{{ article.body }}
        </textarea>
        </div>
    </div>
</div>

<script src='{% static "js/jquery.js" %}'></script>
<script src='{% static "editor/lib/marked.min.js" %}'></script>
<script src='{% static "editor/lib/prettify.min.js" %}'></script>
<script src='{% static "editor/lib/raphael.min.js" %}'></script>
<script src='{% static "editor/lib/underscore.min.js" %}'></script>
<script src='{% static "editor/lib/sequence-diagram.min.js" %}'></script>
<script src='{% static "editor/lib/flowchart.min.js" %}'></script>
<script src='{% static "editor/lib/jquery.flowchart.min.js" %}'></script>
<script src='{% static "editor/editormd.js" %}'></script>
<script type="text/javascript">
$(function(){
    editormd.markdownToHTML("editormd-view", {
        htmlDecode: "style, script, iframe",
        emoji: true,
        taskList:true,
        tex:true,
        flowChart:true,
        sequenceDiagram : true,
    });
});
</script>
{% endblock %}

2.4 增加路由