关于“Python”的核心知识点整理大全61

目录

注意

20.1.4 使用 jumbotron 设置主页的样式

index.html

20.1.5 设置登录页面的样式

login.html

20.1.6 设置 new_topic 页面的样式

new_topic.html

20.1.7 设置 topics 页面的样式

topics.html

元素,让它们在页面上显得大些(见2);对于添加新主题的链接,也做了同样的处 理(见3)。

20.1.8 设置 topic 页面中条目的样式

topic.html

元素,而对于编辑条目的链接,还使用了标签,使其比时间戳小些(见5)。

6处是面板主体div,其中包含条目的实际文本。注意,只修改了影响页面外观的元素,对在 页面中包含信息的Django代码未做任何修改。 图20-3显示了修改后的topic页面。“学习笔记”的功能没有任何变化,但显得更专业了,对 用户会更有吸引力。

注意

20.2 部署“学习笔记”

20.2.1 建立 Heroku 账户

注意

往期快速传送门👆(在文章最后):

感谢大家的支持!欢迎订阅收藏!专栏将持续更新!


--snip--</nav>
1 <div class="container"><div class="page-header">
2 {% block header %}{% endblock header %}</div><div>
3 {% block content %}{% endblock content %}</div></div> <!-- /container -->
/body>
</html>

1处是一个<div>

起始标签,其class属性为container。div是网页的一部分,可用于任何目的, 并可通过边框、元素周围的空间(外边距)、内容和边框之间的间距(内边距)、背景色和其他样 式规则来设置其样式。这个div是一个容器,其中包含两个元素:一个新增的名为header的块(见 2)以及我们在第18章使用的content块(见3)。header块的内容告诉用户页面包含哪些信息以 及用户可在页面上执行哪些操作;其class属性值page-header将一系列样式应用于这个块。content 块是一个独立的div,未使用class属性指定样式。

如果你在浏览器中加载“学习笔记”的主页,将看到一个类似于图20-1所示的专业级导航栏。 请尝试调整窗口的大小,使其非常窄;此时导航栏将变成一个按钮,如果你单击这个按钮,将打 开一个下拉列表,其中包含所有的导航链接。


注意

这个简化的Bootstrap模板适用于最新的浏览器,而较早的浏览器可能不能正确地渲染某 些样式。完整的模板可在http://getbootstrap.com/getting-started/#examples/找到,它几乎在 所有浏览器中都管用。


20.1.4 使用 jumbotron 设置主页的样式

下面来使用新定义的header块及另一个名为jumbotron的Bootstrap元素修改主页。jumbotron 元素是一个大框,相比于页面的其他部分显得鹤立鸡群,你想在其中包含什么东西都可以;它通 常用于在主页中呈现项目的简要描述。我们还可以修改主页显示的消息。index.html的代码如下:

index.html
{% extends "learning_logs/base.html" %}
1 {% block header %}
2 <div class='jumbotron'><h1>Track your learning.</h1></div>
{% endblock header %}
{% block content %}
3 <h2><a href="{% url 'users:register' %}">Register an account</a> to makeyour own Learning Log, and list the topics you're learning about.</h2><h2>Whenever you learn something new about a topic, make an entrysummarizing what you've learned.</h2>
{% endblock content %} 

在1处,我们告诉Django,我们要定义header块包含的内容。在一个jumbotron元素(见) 中,我们放置了一条简短的标语——Track your Learning,让首次访问者大致知道“学习笔记” 是做什么用的。

在2处,我们通过添加一些文本,做了更详细的说明。我们邀请用户建立账户,并描述了用 户可执行的两种主要操作:添加新主题以及在主题中创建条目。现在的主页类似于图20-1所示, 与设置样式前相比,有了很大的改进。

20.1.5 设置登录页面的样式

我们改进了登录页面的整体外观,但还未改进登录表单,下面来让表单与页面的其他部分一致:

login.html
{% extends "learning_logs/base.html" %}
1 {% load bootstrap3 %}
2 {% block header %}<h2>Log in to your account.</h2>
{% endblock header %}
{% block content %}3 <form method="post" action="{% url 'users:login' %}" class="form">{% csrf_token %}
4 {% bootstrap_form form %}
5 {% buttons %}<button name="submit" class="btn btn-primary">log in</button>{% endbuttons %}<input type="hidden" name="next" value="{% url 'learning_logs:index' %}" /></form>
{% endblock content %} 

在1处,我们在这个模板中加载了bootstrap3模板标签。在2处,我们定义了header块,它描 述了这个页面是做什么用的。注意,我们从这个模板中删除了{% if form.errors %}代码块,因 为django-bootstrap3会自动管理表单错误。

在3处,我们添加了属性class="form";然后使用模板标签{% bootstrap_form %}来显示表 单(见4);这个标签替换了我们在第19章使用的标签{{ form.as_p }}。模板标签{% booststrap_form %}将Bootstrap样式规则应用于各个表单元素。5处是bootstrap3起始模板标签{% buttons %},它将Bootstrap样式应用于按钮。

图20-2显示了现在渲染的登录表单。这个页面比以前整洁得多,其风格一致,用途明确。如 果你尝试使用错误的用户名或密码登录,将发现消息的样式与整个网站也是一致的,毫无违和感。

20.1.6 设置 new_topic 页面的样式

下面来让其他网页的风格也一致。首先来修改new_topic页面

new_topic.html

{% extends "learning_logs/base.html" %}
{% load bootstrap3 %}
1 {% block header %}<h2>Add a new topic:</h2>
{% endblock header %}
{% block content %}2 <form action="{% url 'learning_logs:new_topic' %}" method='post'class="form">{% csrf_token %}
3 {% bootstrap_form form %}4 {% buttons %}<button name="submit" class="btn btn-primary">add topic</button>{% endbuttons %}</form>
{% endblock content %}

这里的大多数修改都类似于对login.html所做的修改:在1处加载bootstrap3,添加header块并在其中包含合适的消息;接下来,我们在标签

中添加属性class="form"(见2),使用模板 标签{% bootstrap_form %}代替{{ form.as_p }}(见3),并使用bootstrap3结构来定义提交按钮 (见4)。如果你现在登录并导航到new_topic页面,将发现其外观类似于登录页面。

20.1.7 设置 topics 页面的样式

下面来确保用于查看信息的页面的样式也是合适的,首先来设置topics页面的样式:

topics.html
{% extends "learning_logs/base.html" %}
1 {% block header %}<h1>Topics</h1>
{% endblock header %}
{% block content %}<ul>{% for topic in topics %}<li>
2 <h3><a href="{% url 'learning_logs:topic' topic.id %}">{{ topic }}</a></h3></li>{% empty %}<li>No topics have been added yet.</li>{% endfor %}</ul>3 <h3><a href="{% url 'learning_logs:new_topic' %}">Add new topic</h3>
{% endblock content %}

我们不需要标签{% load bootstrap3 %},因为我们在这个文件中没有使用任何bootstrap3自 定义标签。我们在header块中添加了标题Topics(见1)。为设置每个主题的样式,我们将它们都 设置为<div>

元素,让它们在页面上显得大些(见2);对于添加新主题的链接,也做了同样的处 理(见3)。

20.1.8 设置 topic 页面中条目的样式

topic页面包含的内容比其他大部分页面都多,因此需要做的样式设置工作要多些。我们将使 用Bootstrap面板(panel)来突出每个条目。面板是一个带预定义样式的div,非常适合用于显示 主题的条目:

topic.html
{% extends 'learning_logs/base.html' %}
1 {% block header %}<h2>{{ topic }}</h2>
{% endblock header %}
{% block content %}<p><a href="{% url 'learning_logs:new_entry' topic.id %}">add new entry</a></p>{% for entry in entries %}
2 <div class="panel panel-default">
3 <div class="panel-heading">
4 <h3>{{ entry.date_added|date:'M d, Y H:i' }}
5 <small><a href="{% url 'learning_logs:edit_entry' entry.id %}">edit entry</a></small></h3></div>
6 <div class="panel-body">{{ entry.text|linebreaks }}</div></div> <!-- panel -->{% empty %}There are no entries for this topic yet.{% endfor %}
{% endblock content %} 

我们首先将主题放在了header块中(见1)。然后,我们删除了这个模板中以前使用的无序 列表结构。在2处,我们创建了一个面板式div元素(而不是将每个条目作为一个列表项),其中 包含两个嵌套的div:一个面板标题(panel-heading)div(见3)和一个面板主体(panel-body) div(见4)。其中面板标题div包含条目的创建日期以及用于编辑条目的链接,它们都被设置为<h3>

元素,而对于编辑条目的链接,还使用了标签,使其比时间戳小些(见5)。

6处是面板主体div,其中包含条目的实际文本。注意,只修改了影响页面外观的元素,对在 页面中包含信息的Django代码未做任何修改。 图20-3显示了修改后的topic页面。“学习笔记”的功能没有任何变化,但显得更专业了,对 用户会更有吸引力。


注意

要使用其他Bootstrap模板,可采用与本章类似的流程:将这个模板复制到base.html中,并 修改包含实际内容的元素,以使用该模板来显示项目的信息;然后,使用Bootstrap的样 式设置工具来设置各个页面中内容的样式。


20.2 部署“学习笔记”

至此,项目“学习笔记”的外观显得很专业了,下面来将其部署到一台服务器,让任何有网络连接的人都能够使用它。为此,我们将使用Heroku,这是一个基于Web的平台,让你能够管理 Web应用程序的部署。我们将让“学习笔记”在Heroku上运行。

在Windows系统上的部署过程与在Linux和OS X系统上稍有不同。如果你使用的是Windows, 请阅读各节的“注意”,它们指出了在Windows系统上需要采取的不同做法。

20.2.1 建立 Heroku 账户

要建立账户,请访问https://heroku.com/,并单击其中的一个注册链接。注册账户是免费的, Heroku提供了免费试用服务,让你能够将项目部署到服务器并对其进行测试。


注意

Heroku提供的免费试用服务存在一些限制,如可部署的应用程序数量以及用户访问应用 程序的频率。但这些限制都很宽松,让你完全能够在不支付任何费用的情况下练习部署 应用程序。


关于“Python”的核心知识点整理大全37-CSDN博客

关于“Python”的核心知识点整理大全25-CSDN博客

关于“Python”的核心知识点整理大全12-CSDN博客

往期快速传送门👆(在文章最后):

感谢大家的支持!欢迎订阅收藏!专栏将持续更新!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/597647.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

imgaug库指南(三):从入门到精通的【图像增强】之旅

引言 在深度学习和计算机视觉的世界里&#xff0c;数据是模型训练的基石&#xff0c;其质量与数量直接影响着模型的性能。然而&#xff0c;获取大量高质量的标注数据往往需要耗费大量的时间和资源。正因如此&#xff0c;数据增强技术应运而生&#xff0c;成为了解决这一问题的…

prometheus与zabbix监控的对比介绍

一、普米与zabbix基本介绍 1、prometheus介绍 Prometheus的基本原理是Prometheus Server通过HTTP周期性抓取被监控组件的监控数据&#xff0c;任意组件只要提供对应的HTTP接口并且符合Prometheus定义的数据格式&#xff0c;就可以接入Prometheus监控。 工作流程大致分为收集数…

嵌入式Linux之MX6ULL裸机开发学习笔记(汇编LED灯点亮)

汇编LED驱动实验 1.驱动编写 首先创建在vscode上创建工作区&#xff0c;创建led.s汇编文件&#xff0c;然后编写以下程序 .global _start 全局标号 _start: /* 使能所有外设时钟 */ ldr r0,0x020c4068 CCGR0 ldr r1,0xffffffff 要向CCGR0写入的数据 str r1,[r0] 将0xff…

优化企业运营,深入探索SAP库存管理解决方案

SAP库存管理是SAP提供的一款领先的企业库存管理解决方案。它致力于帮助企业实现对库存的全面掌控&#xff0c;优化供应链管理&#xff0c;降低库存成本&#xff0c;提高客户满意度。这个功能强大的系统为企业提供了丰富的仓储管理功能&#xff0c;如库存盘点、物料追踪、供应商…

JAVA批量新增、批量修改

JAVA批量新增、批量修改 若数据量非常大&#xff0c;可以把List拆成多份&#xff0c;每份1000条数据。NetPointDTO批量新增SQL.xml批量修改SQL.xml 若数据量非常大&#xff0c;可以把List拆成多份&#xff0c;每份1000条数据。 import cn.hutool.core.collection.ListUtil; im…

Unity Enum位掩码(BitMask)的运用

Unity Enum位掩码&#xff08;BitMask&#xff09;的运用 前言项目使用场景代码编写定义技能枚举角色类学习技能检查技能 添加并设置脚本运行效果总结 感谢 前言 在Unity游戏开发中&#xff0c;我们经常会面临需要对一组相关的状态进行管理的情况。Enum位掩码是一种有效的方法…

Spring 与 SpringBoot:一窥两者的奥秘与差异

随着 Java 开发领域的不断演进&#xff0c;Spring 框架已经成为了许多企业级应用的首选。然而&#xff0c;近年来&#xff0c;随着 SpringBoot 的兴起&#xff0c;许多开发者开始对其产生了浓厚的兴趣。尽管 SpringBoot 和 Spring 都来自于同一个家族&#xff0c;并且都是为了简…

【LeetCode】150. 逆波兰表达式求值(ASCII码)

今日学习的文章链接和视频链接 leetcode题目地址&#xff1a;150. 逆波兰表达式求值 代码随想录题解地址&#xff1a;代码随想录 题目简介 即将后缀表达式转换成中缀表达式并计算。 给你一个字符串数组 tokens &#xff0c;表示一个根据 逆波兰表示法 表示的算术表达式。 …

【编译原理】期末预习PPT前四章笔记II

看了看学校的ppt&#xff0c;记的比较随意O.o 因为我的考试范围里边没有简答所以概念什么的没怎么记 没有简答只有选择真是太好了嘿嘿嘿 目录 I. 概述&#xff08;好多字。。&#xff09; 一、高级语言的分类 1、体裁 2、执行方式 二、各种语言的执行方式 三、编译程序…

读算法霸权笔记11_微目标

1. 脸书 1.1. 一份请愿书属于脸书了&#xff0c;而社交网络的算法会对如何最大限度地利用这份请愿书做出判断 1.1.1. 脸书的算法在决定谁能看到我的请愿书时会把所有因素都考虑在内 1.2. 通过改变信息推送的方式&#xff0c;脸书研究了我们…

智能分析网关V4智慧港口码头可视化视频智能监管方案

一、需求背景 近年来&#xff0c;水利港口码头正在进行智能化建设&#xff0c;现场管理已经是重中之重。港口作为货物、集装箱堆放及中转机构&#xff0c;具有昼夜不歇、天气多变、环境恶劣等特性&#xff0c;安全保卫工作显得更加重要。港口码头的巡检现场如何高效、快捷地对…

16.Linux Bash Shell通过`read`命令读取用户输入

文章目录 Linux Shell获取用户输入处理简单输入控制等待隐藏输入从文件中读取 欢迎访问个人网络日志&#x1f339;&#x1f339;知行空间&#x1f339;&#x1f339; Linux Shell获取用户输入 处理简单输入 shell与用户交互式输入使用的是read命令&#xff0c;一个简单的例子…

nuxt3 服务端请求其他接口犯的问题与解决

目的 老项目迁移到 nuxt3&#xff0c;为了减少代码修改量&#xff0c;打算封装一个在服务端运行的请求函数&#xff0c;用于在服务端渲染页面的同时&#xff0c;将接口数据请求回来一起返回给客户端 在服务端请求接口并渲染到页面上、在客户端不请求该接口&#xff0c;但需要能…

5G工业物联网网关:连接未来的智能工业

在当今数字化时代&#xff0c;工业物联网正迅速崛起&#xff0c;并引领着全球工业的数字转型。而5G工业物联网网关作为实现IIoT的关键基础设施&#xff0c;在连接未来的智能工业中发挥着举足轻重的作用。 什么是5G工业物联网网关 5G工业物联网网关是连接工业设备和5G网络的关键…

(湖科大教书匠)计算机网络微课堂(下)

第四章、网络层 网络层概述 网络层主要任务是实习网络互连&#xff0c;进而实现数据包在各网络之间的传输 因特网使用TCP/IP协议栈 由于TCP/IP协议栈的网络层使用网际协议IP&#xff0c;是整个协议栈的核心协议&#xff0c;因此TCP/IP协议栈的网络层常称为网际层 网络层提供…

SpringBoot整合sentinel

1、引入依赖 <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-sentinel</artifactId> </dependency> 2、 配置文件添加 spring:cloud:sentinel:transport:dashboard: ip:8858 项目重启&#x…

15.三数之和(双指针,C解答附详细分析)

题目描述&#xff1a; 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复的三元组。 注意&#xff1a;答案中不可以包含…

暴力破解的基础知识和Burpsuite基础知识

定义 暴力破解 (Brute Force)也称为字典攻击&#xff0c;通常被用于攻击网站的用户账户名/密码 使用自动化脚本以枚举的方式尝试所有可能的用户名或密码组合。通过攻击用户的账户名和密码&#xff0c;窃取用户个人信息或获取网站管理权限等。 暴力破解攻击产生原因 1、用户口…

【mujoco】Ubuntu20.04中解决mujoco报错raise error.MujocoDependencyError

【mujoco】Ubuntu20.04中解决mujoco报错raise error.MujocoDependencyError 文章目录 【mujoco】Ubuntu20.04中解决mujoco报错raise error.MujocoDependencyError1. 报错的具体情况2. 解决过程3. 其他问题3.1 ModuleNotFoundError: No module named OpenGL3.2 ModuleNotFoundEr…

AUTOSAR汽车电子嵌入式编程精讲300篇-面向不平衡样本的车载网入侵检测系统 设计与实现 (续)

目录 3.2 传统CANTransfer模型原理 3.2.1 传统CANTransfer模型结构及特点 3.2.2 二维空间变换分析