19.4 小结

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

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

最后,你学习了如何修改视图函数,让用户只能看到属于自己的数据。你使用方法filter() 来获取合适的数据,并学习了如何将被请求数据的所有者同当前登录的用户进行比较。

该让哪些数据可随便访问,又该对哪些数据进行保护呢?这可能并非总是那么显而易见,但通过不断地练习就能掌握这种技能。我们在本章中就该如何保护用户数据所做的决策表明,与人合作开发项目是个不错的主意:在有人对项目进行检查的情况下,更容易发现其薄弱环节。

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

第 20 章 设置应用程序的样式并部署

19.4 小结 - 图1  当前,项目“学习笔记”虽然功能齐备,但未设置样式,也只能在本地计算机上运行。在本章中,我们将以简单而专业的方式设置这个项目的样式,再将其部署到一台服务器上,让世界上的任何人都能够建立账户。

为设置样式,我们将使用Bootstrap库,这是一组工具,用于为Web应用程序设置样式,使其在任何现代设备上都看起来很专业,无论是大型的平板显示器还是智能手机。为此,我们将使用应用程序django-bootstrap4,这也让你能够练习使用其他Django开发人员开发的应用程序。

我们将把项目“学习笔记”部署到Heroku,这个网站让你能够将项目推送到其服务器,让任何有互联网连接的人都可以使用它。我们还将使用版本控制系统Git来跟踪对这个项目所做的修改。

完成项目“学习笔记”后,你将能够开发简单的Web应用程序,让它们看起来很漂亮,再将其部署到服务器。你还能够利用更高级的学习资源来提高技能。

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

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

本节简要介绍应用程序django-bootstrap4,并演示如何将其集成到项目中,为部署做好准备。

20.1.1 应用程序django-bootstrap4

我们将使用django-bootstrap4将Bootstrap集成到项目中。这个应用程序下载必要的Bootstrap文件,将其放到项目的合适位置,让你能够在项目的模板中使用样式设置指令。

为安装django-bootstrap4,在活动状态的虚拟环境中执行如下命令:

(ll_env)learning_log$ pip install django-bootstrap4
—snip—
Successfully installed django-bootstrap4-0.0.7


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

settings.py

—snip—
INSTALLED_APPS = [
# 我的应用程序
'learning_logs',
'users',

# 第三方应用程序
'bootstrap4',

# Django默认添加的应用程序
'django.contrib.admin',
—snip—


新建一个名为“第三方应用程序”的片段,用于指定其他开发人员开发的应用程序,并在其中添加'bootstrap4' 。务必将这个片段放在“我的应用程序”和“Django默认添加的应用程序”之间。

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

Bootstrap是一个大型样式设置工具集,还提供了大量模板,可应用于项目以创建独特的总体风格。对Bootstrap初学者来说,这些模板比样式设置工具用起来容易得多。要查看Bootstrap提供的模板,可访问其官方网站,单击Examples并找到Navbars。我们将使用模板Navbars static,它提供了简单的顶部导航栏以及用于放置页面内容的容器。

图20-1显示了对base.html应用这个Bootstrap模板并对index.html做细微修改后的主页。

19.4 小结 - 图2

图20-1 项目“学习笔记”的主页——使用Bootstrap设置样式后

20.1.3 修改base.html

我们需要修改模板base.html,以使用前述Bootstrap模板。下面分几部分介绍新的base.html。

  • 定义HTML头部

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

base.html

❶ {% load bootstrap4 %}

❷ <!doctype html>
❸ <html lang="en">
❹ <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
❺ <title>Learning Log</title>

❻ {% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}

❼ </head>


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

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

  • 定义导航栏

定义页面顶部导航栏的代码很长,因为需要同时支持较窄的手机屏幕和较宽的台式计算机显示器。我们将分三部分定义导航栏。

下面是导航栏定义代码的第一部分:

base.html

—snip—
</head>
❶ <body>

❷ <nav class="navbar navbar-expand-md navbar-light bg-light mb-4 border">

❸ <a class="navbar-brand" href="{% url 'learning_logs:index'%}">
Learning Log</a>

❹ <button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarCollapse" aria-controls="navbarCollapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span></button>


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