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

关于“Python”的核心知识点整理大全60,第1张

关于“Python”的核心知识点整理大全60,第2张

目录

19.4 小结

第 20 章

设置应用程序的样式并对其 进行部署

20.1 设置项目“学习笔记”的样式

20.1.1 应用程序 django-bootstrap3

settings.py

settings.py

20.1.2 使用 Bootstrap 来设置项目“学习笔记”的样式

20.1.3 修改 base.html

1. 定义HTML头部

base.html

2. 定义导航栏

3. 定义页面的主要部分

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

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


关于“Python”的核心知识点整理大全60,第3张

--snip-- @login_required def new_topic(request): """添加新主题""" if request.method != 'POST': # 没有提交的数据,创建一个空表单 form = TopicForm() else: # POST提交的数据,对数据进行处理 form = TopicForm(request.POST) if form.is_valid(): 1 new_topic = form.save(commit=False) 2 new_topic.owner = request.user 3 new_topic.save() return HttpResponseRedirect(reverse('learning_logs:topics')) context = {'form': form} return render(request, 'learning_logs/new_topic.html', context) --snip--

我们首先调用form.save(),并传递实参commit=False,这是因为我们先修改新主题,再将其 保存到数据库中(见1)。接下来,将新主题的owner属性设置为当前用户(见2)。最后,对刚定 义的主题实例调用save()(见3)。现在主题包含所有必不可少的数据,将被成功地保存。 现在,这个项目允许任何用户注册,而每个用户想添加多少新主题都可以。每个用户都只能 访问自己的数据,无论是查看数据、输入新数据还是修改旧数据时都如此。

19.4 小结

在本章中,你学习了如何使用表单来让用户添加新主题、添加新条目和编辑既有条目。接下 来,你学习了如何实现用户账户。你让老用户能够登录和注销,并学习了如何使用Django提供的 表单UserCreationForm让用户能够创建新账户。

建立简单的用户身份验证和注册系统后,你通过使用装饰器@login_required禁止未登录的用 户访问特定页面。然后,你通过使用外键将数据关联到特定用户,还学习了如何执行要求指定默 认数据的数据库迁移。

最后,你学习了如何修改视图函数,让用户只能看到属于他的数据。你使用方法filter()来 获取合适的数据,并学习了如何将请求的数据的所有者同当前登录的用户进行比较。 该让哪些数据可随便访问,该对哪些数据进行保护呢?这可能并非总是那么显而易见,但通 过不断地练习就能掌握这种技能。在本章中,我们就该如何保护用户数据所做的决策表明,与人 合作开发项目是个不错的主意:有人对项目进行检查的话,更容易发现其薄弱环节。

至此,我们创建了一个功能齐备的项目,它运行在本地计算机上。在本书的最后一章,我们 将设置这个项目的样式,使其更漂亮;我们还将把它部署到一台服务器上,让任何人都可通过互 联网注册并创建账户。


第 20 章

设置应用程序的样式并对其 进行部署

20.1 设置项目“学习笔记”的样式

我们一直专注于项目“学习笔记”的功能,而没有考虑样式设置的问题,这是有意为之的。 这是一种不错的开发方法,因为能正确运行的应用程序才是有用的。当然,应用程序能够正确运 行后,外观就显得很重要了,因为漂亮的应用程序才能吸引用户使用它。

在本节中,我将简要地介绍应用程序django-bootstrap3,并演示如何将其继承到项目中,为 部署项目做好准备。

20.1.1 应用程序 django-bootstrap3

我们将使用django-bootstrap3来将Bootstrap继承到项目中。这个应用程序下载必要的Bootstrap 文件,将它们放到项目的合适位置,让你能够在项目的模板中使用样式设置指令。 为安装django-bootstrap3,在活动的虚拟环境中执行如下命令:

(ll_env)learning_log$ pip install django-bootstrap3 --snip-- Successfully installed django-bootstrap3

接下来,需要在settings.py的INSTALLED_APPS中添加如下代码,在项目中包含应用程序 django-boostrap3:

settings.py

--snip-- INSTALLED_APPS = ( --snip-- 'django.contrib.staticfiles', # 第三方应用程序 'bootstrap3', # 我的应用程序 'learning_logs', 'users', ) --snip--

新建一个用于指定其他开发人员开发的应用程序的片段,将其命名为“第三方应用程序”, 并在其中添加'bootstrap3'。大多数应用程序都需要包含在INSTALLED_APPS中,为确定这一点, 请阅读要使用的应用程序的设置说明。 我们需要让django-bootstrap3包含jQuery,这是一个JavaScript库,让你能够使用Bootstrap模板 提供的一些交互式元素。请在settings.py的末尾添加如下代码:

settings.py

--snip-- # 我的设置 LOGIN_URL = '/users/login/' # django-bootstrap3的设置 BOOTSTRAP3 = { 'include_jquery': True, }

这些代码让你无需手工下载jQuery并将其放到正确的地方。

20.1.2 使用 Bootstrap 来设置项目“学习笔记”的样式

Bootstrap基本上就是一个大型的样式设置工具集,它还提供了大量的模板,你可将它们应用 于项目以创建独特的总体风格。对Bootstrap初学者来说,这些模板比各个样式设置工具使用起来 要容易得多。要查看Bootstrap提供的模板,可访问http://getbootstrap.com/,单击Getting Started, 再向下滚动到Examples部分,并找到Navbars in action。我们将使用模板Static top navbar,它提供 了简单的顶部导航条、页面标题和用于放置页面内容的容器。 图20-1显示了对base.html应用这个Bootstrap模板并对index.html做细微修改后的主页。

关于“Python”的核心知识点整理大全60,第4张

知道要获得的效果后,接下来的内容理解起来将更容易。

20.1.3 修改 base.html

我们需要修改模板base.html,以使用前述Bootstrap模板。我们把新的base.html分成几个部分 进行介绍。

1. 定义HTML头部

对base.html所做的第一项修改是,在这个文件中定义HTML头部,使得显示“学习笔记”的 每个页面时,浏览器标题栏都显示这个网站的名称。我们还将添加一些在模板中使用Bootstrap所 需的信息。删除base.html的全部代码,并输入下面的代码:

base.html

1 {% load bootstrap3 %} 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> 5 <title>Learning Log</title> 6 {% bootstrap_css %} {% bootstrap_javascript %} 7 </head>

在1处,我们加载了django-bootstrap3中的模板标签集。接下来,我们将这个文件声明为使用 英语(见3)编写的HTML文档(见2)。HTML文件分为两个主要部分:头部(head)和主体(body); 在这个文件中,头部始于4处。HTML文件的头部不包含任何内容:它只是将正确显示页面所需 的信息告诉浏览器。在5处,我们包含了一个title元素,在浏览器中打开网站“学习笔记”的 页面时,浏览器的标题栏将显示该元素的内容。

在6处,我们使用了django-bootstrap3的一个自定义模板标签,它让Django包含所有的 Bootstrap样式文件。接下来的标签启用你可能在页面中使用的所有交互式行为,如可折叠的导航 栏。7处为结束标签。

2. 定义导航栏

下面来定义页面顶部的导航栏:

--snip-- </head> <body> <!-- Static navbar --> 1 <nav class="navbar navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> 2 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> </button> 3 <a class="navbar-brand" href="{% url 'learning_logs:index' %}"> Learning Log</a> </div> 4 <div id="navbar" class="navbar-collapse collapse"> 5 <ul class="nav navbar-nav"> 6 <li><a href="{% url 'learning_logs:topics' %}">Topics</a></li> </ul>7 <ul class="nav navbar-nav navbar-right"> {% if user.is_authenticated %} <li><a>Hello, {{ user.username }}.</a></li> <li><a href="{% url 'users:logout' %}">log out</a></li> {% else %} <li><a href="{% url 'users:register' %}">register</a></li> <li><a href="{% url 'users:login' %}">log in</a></li> {% endif %} 8 </ul> </div><!--/.nav-collapse --> </div> </nav>

第一个元素为起始标签。HTML文件的主体包含用户将在页面上看到的内容。1处是 一个

元素,表示页面的导航链接部分。对于这个元素内的所有内容,都将根据选择器 (selector)navbar、navbar-default和navbar-static-top定义的Bootstrap样式规则来设置样式。选 择器决定了特定样式规则将应用于页面上的哪些元素。

在2处,这个模板定义了一个按钮,它将在浏览器窗口太窄、无法水平显示整个导航栏时显 示出来。如果用户单击这个按钮,将出现一个下拉列表,其中包含所有的导航元素。在用户缩小 浏览器窗口或在屏幕较小的移动设备上显示网站时,collapse会使导航栏折叠起来。

在3处,我们在导航栏的最左边显示项目名,并将其设置为到主页的链接,因为它将出现在 这个项目的每个页面中。

在4处,我们定义了一组让用户能够在网站中导航的链接。导航栏其实就是一个以

<ul>打头 的列表(见5),其中每个链接都是一个列表项(<li>)。要添加更多的链接,可插入更多使用下 述结构的行:

<li><a href="{% url 'learning_logs:title' %}">Title</a></li>

这行表示导航栏中的一个链接。这个链接是直接从base.html的前一个版本中复制而来的。 在7处,我们添加了第二个导航链接列表,这里使用的选择器为navbar-right。选择器 navbar-right设置一组链接的样式,使其出现在导航栏右边——登录链接和注册链接通常出现在 这里。在这里,我们要么显示问候语和注销链接,要么显示注册链接和登录链接。这部分余下的 代码结束包含导航栏的元素(见8)。

3. 定义页面的主要部分

base.html的剩余部分包含页面的主要部分:

--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>


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

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

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

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

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/langs/13518549.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2024-01-31
下一篇 2024-02-05

发表评论

登录后才能评论

评论列表(0条)

保存