用Django全栈开发——12. 重构前端页面编写文章详情页_前端文章页面

作者：小丑西瓜9 | 2024-05-08 02:33:56

踩

前端文章页面

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

在这里插入图片描述

上一节我们把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里面：

<!--index_base.html-->
<!DOCTYPE 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-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W11
2
3
4
5
6
7
8
9
10
11
12
13
14

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】