用Django全栈开发——17. 文章前端页面展示

大家好，这是皮爷给大家带来的最新的学习Python能干啥？之Django教程，从零开始，到最后成功部署上线的项目。这一节，我们将后端的数据在前端展示出来。

Peekpa.com的官方地址：http://peekpa.com

上两节，我们主要是针对后台的文章功能的开发，这一节，我们需要对前端文章的展示来做修改了。

前端文章页面回顾

在第12讲的时候，我们当时写了文章详情页的样子，张这个样子：

我们这一节的任务，就是讲文章的内容详细的在这个文章详情页里面展示出来。

后台数据填充

如果要展示文章，那么我们就先得有文章。所以我们现在后台数据库填充一篇文章：

我们把第12节的内容文章添加进来。看到文章ID为3，那么我们就要把这个文章的显示到前端detail页面里面。我们的URL初步设计为：http://localhost:8000/detail/<time_id>，文章time_id是20200517。

配置视图函数

既然我们知道的URL的规则，那么我们接下来就要写视图函数了。

我们之前在Poster下面的url里，配置了：

path("detail/", views.detail, name="detail"),

但是这个当中并没有带time_id，所以，我们应该把time_id加进来，

path("detail/<int:time_id>/", views.detail, name="detail"),

同时还应该修改一下视图函数：

def detail(request, time_id):
    post = Post.objects.select_related('category', 'author').get(time_id=time_id)
    context = {
        'post_data': post,
    }
    return render(request, 'post/detail.html', context=context)

这样，我们就将文章放到了一个名为post_data的变量中，传递给了前端，接下来，我们要在前端页面来集成我们的文章：

<div class="col-md-8">
    <!-- 标题和文章基本信息 -->
    <div class="row" style="background-color: white">
        <div class="col-md-12 mt-4 mb-2">
            <p class="h3">{{ post_data.title }}</p>
            <hr>
        </div>

        <div class="col-md-12">
            <div class="d-flex flex-row">
                <p class="font-weight-light small mr-4">{{ post_data.author.username }}</p>
                <p class="font-weight-light small mr-4"><a href="#" class="text-decoration-none text-dark"><i class="fas fa-list mr-1"></i>{{ post_data.category.name }}</a></p>
                <p class="font-weight-light small mr-4"><i class="far fa-clock mr-1"></i>{{ post_data.publish_time_show | datapicker_format }}</p>
                <p class="font-weight-light small"><i class="fas fa-eye mr-1"></i>阅读({{ post_data.read_num }})</p>
            </div>
        </div>
    </div>
    <!-- 文章内容 -->
    <div class="row" style="background-color: white">
        <div class="col-md-12 pb-4">
            {% if post_data.is_md %}
                {% autoescape off%}
                {{ post_data.content_html}}
                {% endautoescape %}
            {% else %}
                {{ post_data.content }}
            {% endif %}
        </div>
    </div>
</div>

这个时候，我们看一下前端，发现内容完美显示出来，但是有个问题，就是图片大小有问题，还有代码也有问题，所以接下来我们要调整这些内容。

首先我们要front/src/css/post下面，创建一个scss文件：

接下来，我们要在detail.html页面中，找到展示文章页面的那个div，加入一个id，叫做post-content：

<!-- 文章内容 -->
            <div class="row" style="background-color: white">
                <div class="col-md-12 pb-4" id="post-content">
                    {% if post_data.is_md %}
                        {% autoescape off%}
                        {{ post_data.content_html}}
                        {% endautoescape %}
                    {% else %}
                        {{ post_data.content }}
                    {% endif %}
                </div>
            </div>

接下来，我们在那个scss文件中写入一下代码：

#post-content{
    p {
        line-height: 28px;
        img{
            width: 100%!important;
        }
    }

    pre {
        background-color: rgb(45,45,45);
        color: #ccc;
        padding: 1.5rem!important;
    }
}

这些代码的意思是，在id为post-content模块中，所以p元素底下的image元素，调整宽度为100%；pre元素则设置背景颜色和字体颜色。

最后，在front目录下，终端里面运行gulp css命令，来生成min.css文件：

然后，我们要在detail.html文件的head block中，引入我们的css文件：

<link rel="stylesheet" href="{% static 'css/post/post_detail.min.css' %}">

小知识
有同学会发现head里面有两行代码：还有，他们俩的作用是为了避免图片403错误。

这个时候，我们再来看前端页面：

发现页面展示的很完美。奈斯，今天的任务完成了。

技术总结

最后总结一下，

文章详情页展示：

1. 修改文章详情页视图函数，将id配置到url中；
2. 视图函数通过id来找到响应的文章，然后传送到前端；
3. 前端通过Django的DLT模板，来显示Post的各个内容；
4. 完毕。

获取代码的唯一途径：关注『皮爷撸码』，回复『代码』即可获得。

长按下图二维码关注，如文章对你有启发，欢迎在看与转发。