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

最新推荐文章于 2023-11-17 10:51:22 发布
最新推荐文章于 2023-11-17 10:51:22 发布
阅读量1.4k 收藏 2
点赞数 1
分类专栏： Django Peekpa.com Python 文章标签： python django vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gl891011/article/details/106682607
版权
大家好，这是皮爷给大家带来的最新的学习Python能干啥？之Django教程，从零开始，到最后成功部署上线的项目。这一节，是最后一节关于前端的教程。Peekpa.com的官方地址：http://peekpa.com上一节我们把Login的逻辑打通完毕，其中涉及到了一点内容，就是把之前gulp写的页面的相对资源路径，改为了Django模板的路径，这一节我们需要对我们的前端页面进行重构，还有文章详情页的编写。重构分析首先，要知道为什么我们要重构页面？是因为Django有一个叫做template的东西：
摘要由CSDN通过智能技术生成

大家好，这是皮爷给大家带来的最新的学习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-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous
最低0.47元/天 解锁文章
皮克啪的铲屎官
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用Django全栈开发——17. 文章前端页面展示
皮克啪的铲屎官
07-20 800
大家好，这是皮爷给大家带来的最新的学习Python能干啥？之Django教程，从零开始，到最后成功部署上线的项目。这一节，我们将后端的数据在前端展示出来。 Peekpa.com的官方地址：http://peekpa.com 上两节，我们主要是针对后台的文章功能的开发，这一节，我们需要对前端文章的展示来做修改了。 前端文章页面回顾 在第12讲的时候，我们当时写了文章详情页的样子，张这个样子： 我们这一节的任务，就是讲文章的内容详细的在这个文章详情页里面展示出来。 后台数据填充 如果要展示文章，那么我们就先
A048_CMS_前端首页文章列表展示_页面静态化
窗外有风景，笔下有前途，低头是题海，抬头是未来
06-20 421
1. 内容介绍 前端首界面新闻列表展示（掌握） FreeMark API认识（掌握） FreeMark使用对象产生HTML（掌握） FreeMark集成项目（掌握） 2. 新闻列表展示 2.1 常量Constant //技术文章 public static final String TECHNICAL = "technology"; //行业 public static final String INDUSTRY = "industry"; //学科 public static final Stri
22.blog前端-文章详情、评论列表
weixin_45974277的博客
02-10 430
功能实现,点击文章，可以弹出文章的详情界面 在ArticleItem.vue中，点击了文章详情，就会有一个事件响应 /*点击文章标题，跳转到文章详情*/ view(id) { this.$router.push({path:`/view/${id}`}) } 所以要添加对应路由： /*文章详情*/ {
前端学习日记day3——制作新闻页面
jumao555的博客
09-10 1325
vfv
博客页面演示——前端(功能全部完善)
qq_28917403的博客
06-01 2606
花了两个月学习的前端成果，展示一下，纪念下自己的努力。
用Django全栈开发——29. 部署之阿里云CentOS+Nginx+uWsgi+Django.html
07-06
阿里云CentOS+Nginx+uWsgi+Django部署Django，《用Django全栈开发》系列文章最后一篇，感兴趣的同学可以查看。
Python+Django+vue3全栈开发商城项目.zip
10-05
在这个"Python+Django+vue3全栈开发商城项目.zip"中，我们探索的是一个结合了Python、Django框架和Vue.js（特别是Vue3版本）技术的电子商务平台的开发实践。这个项目旨在提供一个全面的解决方案，涵盖了从后端数据...
老男孩python全栈开发学习笔记.zip_Python全栈_harborkyi_python 全栈开发_全栈_老男孩 pyth
09-23
《老男孩Python全栈开发学习笔记》是一部针对Python开发者进阶至全栈开发的重要学习资料。这份压缩包包含了作者harborkyi对于Python全栈开发的深入理解和实践总结，尤其适合那些希望提升自身技能，从单一领域跨越到...
Django登录模板页面login.html
06-04
Python开发Django 框架实现功能10. 用Django分页器实现文章分页.mp4
05-21
Python开发Django 框架实现功能10. 用Django分页器实现文章分页.mp4
Django创建模块报错:django.core.exceptions.ImproperlyConfigured: Error loading MySQLdb module.
weixin_41998346的博客
10-12 3676
在终端使用命令：python manage.py startapp accounts时，报错如下： django.core.exceptions.ImproperlyConfigured: Error loading MySQLdb module. Did you install mysqlclie 报错原因：没有安装pymysql,或没有配置__init__.py文件 step1:检查是否安装pymysql,打开python的解释器，查看是否安装，如果没有图中的pymysql，就点击最下面的加号键进
python全栈django框架入门到应用,六个优质开源项目，让你更了解Django框架开发
weixin_35636570的博客
03-26 525
Django 是一个开源的 Web 应用框架，由 Python 写成。采用了 MTV 的框架模式，即模型 M，视图 V 和模版 T。它最初是被用来开发 CMS 软件的，所以 Django 很适合用来搭建内容类网站，它的设计目的是使常见的 Web 开发任务变得快速而简单。今天 Gitee 就为大家整理了六个优质开源项目，它们均使用 Django 开发，希望大家能从这些项目中有所收获。1.django...
博客系统前端页面代码实现及页面展示(代码版)
weixin_61436104的博客
05-27 3066
博客系统前端代码及页面展示
django.core.exceptions.ImproperlyConfigured: Error loading MySQLdb module.
热门推荐
Amire0x的小乐园
03-04 1万+
安装 Django使用MySQL数据库需要加载 MySQLdb模块，需要安装 mysqlclient，若已经安装请略过。 (Django2.2版本之前我们安装的是pymysql模块，不过现在使用的mysqlclient ) pip install mysqlclient 如果安装错误，那么下载到本地去安装 执行命令查看python版本与系统位数（32/64位） C:\Users\Administrator>python Python 3.8.2 (tags/v3.8.2:7b3ab59, Feb 25
从零开始的Django框架入门到实战教程(内含实战实例) - 03 前端模板嵌套、Django模板、Django组件（ModelForm）详解（学习笔记）
如果没有躺赢的命，那就站起来奔跑，你的努力一定会对得起这一路的颠沛流离。
07-05 3299
不同于之前的两篇，这篇主要的知识点是顺着项目实现串联的，主要是基于一个管理系统的小任务，包括部门管理和用户管理。再步骤上主要包括项目的准备工作、前端界面制作、Django模板嵌套、Django组件学习几部分。 1.准备工作 1.1. 创建项目和app 1.2. 项目设计 1.3. 数据库生成 1.4. 创建静态文件 2. 部门基本功能实现 2.1. 部门管理(无Form和ModelForm组件) 2.1.1. 前端壳子 2.1.2. 连接数据库 2.2. 新建部门 2.2.1. 前端壳子 2.2.2. 添加
用django快速实现管理后台网站（全栈版本）
qq_43008709的博客
08-11 1557
使用python 的django框架，利用第三方库django-adminlte3 快速搭建一个管理网站.....
django.core.exceptions.ImproperlyConfigured: Error loading MySQLdb module.Did you install mysqlcliet
最新发布
kekechengxiao的博客
11-17 2769
是一个空文件，它在Python中起着非常重要的作用，主要用于标识一个目录为Python包。在Django项目中，它通常被用于标记与。这实际上是一种代码组织方式，可以帮助我们把相关的设置和文件组织在一起。此外，当其他模块需要导入。问题分析：python没有安装mysql驱动或映入mysql模块。二，在django项目下的setting.py下进行配置。三，在与 settings.py 同级目录下的。中的变量和配置时，这个标记也是非常有用的。一，安装mysql驱动，打开cmd.中引入模块和进行配置。
如何使用python之django创建页面
qq_45881545的博客
03-28 1657
1、本节内容我们将学习如何定义URL模式，了解URL模式描述了URL是如何设计的，让django知道如何将浏览器请求与网络URL相匹配，以确定返回哪个页面。2、每个url都被映射到特定的。
MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middleware.common.CommonMiddleware', 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware', ]
05-24
这是Django项目中默认的中间件列表，它们按照顺序执行，用于处理和转换HTTP请求和响应。 - `django.middleware.security.SecurityMiddleware`：用于提供基本的安全保护，包括防止跨站点请求伪造（CSRF）和点击劫持攻击。 - `django.contrib.sessions.middleware.SessionMiddleware`：提供会话支持，以便在请求之间存储和检索数据（如用户身份验证）。 - `django.middleware.common.CommonMiddleware`：提供一些常见的HTTP中间件功能，如gzip压缩、缓存控制等。 - `django.middleware.csrf.CsrfViewMiddleware`：提供CSRF保护，确保POST请求来自合法的来源。 - `django.contrib.auth.middleware.AuthenticationMiddleware`：提供用户身份验证支持，确保只有已登录用户才能访问需要授权的页面。 - `django.contrib.messages.middleware.MessageMiddleware`：提供消息支持，以便在请求之间存储和检索消息（如成功或错误消息）。 - `django.middleware.clickjacking.XFrameOptionsMiddleware`：提供点击劫持保护，确保网页不会被嵌入到其他网站的iframe中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值