用Django全栈开发——12. 重构前端页面编写文章详情页
大家好，这是皮爷给大家带来的最新的学习Python能干啥？之Django教程，从零开始，到最后成功部署上线的项目。这一节，是最后一节关于前端的教程。
Peekpa.com的官方地址：http://peekpa.com
上一节我们把Login的逻辑打通完毕，其中涉及到了一点内容，就是把之前gulp写的页面的相对资源路径，改为了Django模板的路径，这一节我们需要对我们的前端页面进行重构，还有文章详情页的编写。
重构分析
首先，要知道为什么我们要重构页面？是因为Django有一个叫做template的东西：https://docs.djangoproject.com/en/3.0/ref/templates/language/
这个东西可以很方便的编写我们的HTML页面和前端与后端的交互。
那么我们的页面，长这个样子：
当时在编写的时候，我就简单的分析过，整个页面有四个部分，上面的导航栏，下面的footer，左边的文章列表以及右边的功能列表栏，那么，首页是长上面那个样子，我们能不能把整个部分进行一下重组利用，将上面的导航栏，下面的Footer抽象出来，右边的功能列表也可放出来，剩下的就是把左半边的文章内容部分可以动态的替换成首页的列表格式或者文章详情页的模式。
重构开始
首先我们要在front/template文件夹下创建一个base目录，然后把我们之前写的index.html文件拷贝进去，进行一些修改。
这里我们把index.html拆开成了footer.html, index_base.html, navbar.html 和 right_section.html四部分，主要结构就是在index_base.html里面：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}
{% endblock %}title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous">script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous">script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
{% block head %}
{% endblock %}
head>
<body style="background-color: #f5f6f9">
{% include 'base/navbar.html' %}
{% block main %}
{% endblock %}
{% include 'base/footer.html'%}
body>
html>
这里可以看到，我们使用了
{% block xxxx %}
{% endblock %}
结构来做模块化区分，我们把base里面的title，head，main抽成三个模块，顶部的Navbar和底部的Footer分别使用
{% include 'base/navbar.html' %}
{% include 'base/footer.html'%}
这两个include来导入文件片段。
我们就以Footer的代码片段看一下：
<footer class="page-footer font-small" style="background-color: #33333333">
<div class="footer-copyright text-center py-3 bg-dark" style="color: #ffffff88;">© 2020 Copyright:
<a href="https://www.peekpa.com/" class="pl-2"> Peekpa.coma>
div>
footer>
接着，我们在templates目录下，创建post目录，然后把之前的index.html移动到里面，这个post目录下的index.html就是我们首页的index。
{% extends 'base/index_base.html' %}
{% block title %}
Peekpa
{% endblock %}
{% block head %}
{% endblock %}
{% block main %}
<div class="container mt-4 mb-4">
<div class="row">
<div class="col-md-8">
div>
{% include 'base/right_section.html' %}
div>
div>
{% endblock %}
这里我们看到，首先使用：
{% extends 'base/index_base.html' %}
表明当前页面是继承自index_base.html文件，然后就用了三个block标签，分别代表填充index_base.html页面的title，head和main内容。
同样，这里我们还是使用了include标签，将右半部分的内容引入。
至此，我们还差一步就完成了重构。
之前我们的首页index.html是直接放在template目录下，现在我们移动到了post目录下，所以，在之前写首页映射函数的地方，就要把最新的地址改为post/idnex.html
def index(request):
return render(request, 'post/index.html')
此时，我们重启服务器，再次打开我们的首页：http://localhost:8000/
发现样子和之前文章里面提到的样子没有什么变化，这说明重构成功了。
文章详情页
我们在首页有文章列表，针对列表的每一项，点开之后应该跳转到文章详情页，那么我们就用重构之后的代码来写文章详情页。
我们的目的就是要把左边的列表页面换成文章详情页，所以我们就在post底下创建一个detail.html，然后继承index_base.html文件即可：
{% extends 'base/index_base.html' %}
{% block title %}
Peekpa
{% endblock %}
{% block head %}
{% endblock %}
{% block main %}
<div class="container mt-4 mb-4">
<div class="row">
<div class="col-md-8">
<div class="row" style="background-color: white">
<div class="col-md-12 mt-4 mb-2">
<p class="h3">如何让Python爬虫一天抓取100万张网页p>
<hr>
div>
<div class="col-md-12">
<div class="d-flex flex-row">
<p class="font-weight-light small mr-4">皮爷撸码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>Python开发a>p>
<p class="font-weight-light small mr-4"><i class="far fa-clock mr-1">i>2019-12-02p>
<p class="font-weight-light small"><i class="fas fa-eye mr-1">i>阅读(1989)p>
div>
div>
div>
<div class="row" style="background-color: white">
<div class="col-md-12 pb-4">
div>
div>
div>
{% include 'base/right_section.html' %}
div>
div>
{% endblock %}
同样，和index的情况一样，我们需要添加detail的视图函数，这里就先简单添加，目的只是为了看一下效果，所以在poster的views文件里，创建detail的视图函数，并且在urls.py文件中正确映射，因为很简单，可以参考index的写法。
def detail(request):
return render(request, 'post/detail.html')
最后，我们输入文章详情页的地址：http://localhost:8000/detail/ ，我们就会看到页面长这个样子：
这里我们简单说一下，首先，整体逻辑结构和首页相似，即左边和右边两个部分。页面还是选择使用Bootstrap的栅格系统编写，即row和col。那么我们就将文章标题还有基本信息作为一个row，下一个row则是文章内容。这里先简单填写一下，日后文章内容会使用另一个库，将md文档自动生成html格式的字符串，添加到网页中。最后效果还需要到时候微调一下，这里就先这样。
技术总结
最后总结一下，
重构前端页面：
- 首先创建base目录，将公共的组件，统统放进去；
- 通过include和block关键字来继承文件和填充文件；
- 还是那句话，公共逻辑都抽象出来，设置接口，其余的都自行填充就可以；
- 完毕
获取代码的唯一途径：关注『皮爷撸码』，回复『代码』即可获得。
长按下图二维码关注，如文章对你有启发，欢迎在看与转发。
