Django 3网页开发指南第4版 第6章 模型管理

Django Alan 4年前 (2020-05-22) 3858次浏览 0个评论 扫描二维码

完整目录请见:Django 3网页开发指南 – 第4版

本章中包含如下小节:

  • 在修改列表页中自定义列
  • 创建可排序行内元素
  • 创建后台动作
  • 开发修改列表过滤器
  • 修改每三方应用的应用标签
  • 创建自定义accounts应用
  • 获取用户头像
  • 在修改表单中插入地图

引言

Django框架自带对数据模板的管理后台系统。只需少量修改,就可配置可过滤、可搜索及可排序的列表来用于浏览模型数据,还可以配置表单来添加和管理数据。本章中,我们将学习这些高级托雷斯,来通过开发一些实例安全来自定义管理后台。

技术要求

运行本章的代码要求安装最新稳定版的Python 3、MySQL或PostgreSQL数据库以及通过虚拟环境创建的Django项目。

可在GitHub仓库的Chapter06目录中查看本章的代码。

在修改列表页中自定义列

默认Django后台管理系统中的修改列表视图提供一个对具体模型实例的总览。默认list_display模型属性控制字段的显示。此外,可以实现自定义admin方法来返回关联的数据或显示自定义HTML。本节中,我们创建一个特殊函数,配合list_display属性使用,用于在列表视图的一列中显示图片。我们还会添加list_editable设置来让一个字段可在列表视图中直接进行编辑。

准备工作

本节中我们需要使用Pillow和django-imagekit库。使用如下命令在虚拟环境中进行安装:

确保在配置文件的INSTALLED_APPS中添加了django.contrib.admin和imagekit:

然后,在URL配置文件中配置管理站点,如下:

接下来新建products应用,将其放入INSTALLED_APPS。这个应用会包含Product和ProductPhoto模型。此处一个产品可能会有多张图片。本例中我们还会使用UrlMixin,在第2章 模型和数据库结构中的通过URL相关的方法创建模型mixin一节中进行过定义。

在 models.py中创建Product和ProductPhoto模型如下:

如何实现…

本节中我为Product模型创建简单的管理后,会将ProductPhoto模型的实例作为产品的内联元素。

在list_display属性中,我们将包含模型后台的first_photo()方法,用于从多对一关联中显示第一张图片。下面就开始吧:

  1. 创建包含如下内容的admin.py文件:
  2. 然后,在同一文件中添加产品的管理后台:
  3. 下面,创建用于生成图片预览的模板,如下:

实现原理…

添加几个带图片的产品然后在浏览器中查看产品后台列表,效果类似以下截图:

Django 3网页开发指南第4版 第6章 模型管理

list_display属性通常用于定义字段以让它们在管理后台列表视图中显示;例如TITLE和PRICE是Product模型的字段。但除了常规的字段名外,list_display还可以接收以下内容:

  • 函数或其它可调用对象
  • 模型后台类的属性名
  • 模型的属性名

在list_display中使用可调用对象时,都会将模型实例作为第一个参数进行传递。因此,在我们的示例中,在模型后台类中定义了get_photo()方法,它接收Product实例作为obj。该方法尝试从多对多一关联中获取第一个ProductPhoto对象,如果存在,返回以包含<img>模板生成的HTML。通过设置list_display_links,我们让图片和标题链接到Product模型的后台修改表单。

可以对list_display中使用的可调用对象设置一些属性:

  • 可调用对象的short_description定义显示在字段顶部的标题。
  • 默认,可调用对象返回的值在后台中无法进行排序,但可设置admin_order_field属性来定义可使用哪个数据库字段来生成排序。还可以选择在字段前添加减号来表明进行倒序排列。
  • 通过设置boolean = True,可以显示True或False值的图标。

最后,可以添加到list_editable设置中来让PRICE字段可进行编辑。因为现在有可编辑字段了,会在底部出现一个Save按钮来保存整个产品列表。

相关内容

创建可排序行内元素

对于大部分数据库中的模型我们会希望通过创建日期、发生日期或按字母排序。但有时用户需要以自定义排序来显示数据项。这适用于分类、图片集、精选列表等情况。本节中我们将学习如何使用django-ordered-model来允许在后台中进行自定义排序。

准备工作

本节中,我们使用前一节中定义的products应用。按照如下步骤进行操作:

  1. 在虚拟环境中安装 django-ordered-model:
  2. 在配置文件的INSTALLED_APPS中添加ordered_model。
  3. 接着,修改此前定义的products应用中的ProductPhoto模型如下:

OrderedModel类引入了一个order字段。生成并运行迁移来将ProductPhoto的新排序字段添加到数据库中。

如何实现…

要设置可排序的产品图片,我们需要修改products应用的模型管理后台。下面就开始吧:

  1. 在admin文件中修改ProductPhotoInline如下:
  2. 然后修改ProductAdmin如下:

实现原理…

如果打开Change Product表单,会看到如下内容:

Django 3网页开发指南第4版 第6章 模型管理

在该模型中,我们设置order_with_respect_to属性来保持对每个产品单独进行排序,而不是笼统地对整个产品图片列表进行排序。

在Django管理后台中,产品图片可以按照行内标签在产品详情本身中进行编辑。在第一列中,有图片预览。我们使用与前一节中相同的photo-preview.html模板来进行生成。第二列中为修改图片的字段。然后一列是ORDER字段,然后接可手动对紧邻图片重新排序的箭头按钮。箭头按钮来自move_up_down_links方法。最后一列为一个复选枉,可以进行行内元素的删除。

readonly_fields属性告诉Django有一些字段或方法为只读。如果希望使用其它方法在修改表单中显示内容,需要将这些方法放到readonly_fields列表中。本例中,get_photo_preview和move_up_down_links就是这类方法。

move_up_down_links在OrderedTabularInline中进行定义,它继承了admin.StackedInline或admin.TabularInline。这渲染出箭头按钮来切换产品图片。

相关内容

  • 在修改列表页中自定义列一节
  • 创建后台动作一节
  • 开发修改列表过滤器一节

创建后台动作

Django后台系统提供可以对列表中指定项进行操作的动作。默认提供了一个用于删除选中实例的动作。本例中,我们将创建用于Product模型列表的其它动作,允许管理员将所选产品导出为Excel表格。

准备工作

我们将使用前面小节中创建的products应用。确认好在虚拟环境中已安装了openpyxl模块,用来创建Excel表格,如下:

如何实现…

后台动作是一个接收三个参数的函数,如下:

  • 当前的ModelAdmin值
  • 当前的HttpRequest值
  • QuerySet值,包含所选项

执行如下步骤创建一个自定义后台动作来导出数据表:

  1. 在products应用的admin.py文件中创建一个用于数据表列配置的ColumnConfig为,如下:
  2. 然后在同一个文件中创建export_xlsx()函数:
  3. 然后,对ProductAdmin添加actions设置如下:

实现原理…

如果在浏览器中查看产品后台列表面,在默认的Delete selected Products动作旁会看到一个名为Export XLSX的动作,如下图所示:

Django 3网页开发指南第4版 第6章 模型管理

我们使用openpyxl Python模块来创建与Excel及其它数据表软件相兼容的 OpenOffice XML文件。

首先创建一个工作薄,选中当前工作表,将其标题设置为Products。因为在工作表中有一些通用的样式,所以设置了命名样式来对相应的每个单元格中按名称进行应用。这些样式、列头和列宽都存储为Config对象,column_config字典将列的字母作为键与对象进行映射。然后进行遍历来设置列头和列宽。

我们使用工作表的append()方法来为QuerySet中的每个选中产品添加内容,按ID进行排序,在存在图片时包含产品的第一张图片的URL。然后产品数据通过对刚刚添加行的每个单元格进行遍历单独添加样式,再次引用column_config来连续应用样式。

默认,后台动作通过QuerySet做一些事并将管理员重定向回修改列表页面。但对于更为复杂的动作,可返回HttpResponse。export_xlsx() 函数保存了对应HttpResponse工作薄的虚拟拷贝,包含适用the Office Open XML (OOXML)数据表的相应内容类型和字符集。我们使用Content-Disposition来设置响应,这样可下载为products.xlsx 文件。生成的工作表可通过Open Office打开,类似下面这样:

Django 3网页开发指南第4版 第6章 模型管理

相关内容

开发修改列表过滤器

如果希望管理员能够根据日期、关联或字段选项来过滤修改列表,需要使用后台模型中的list_filter属性。此外,可以创建自定义的过滤器。本节中我们一起创建一个过滤器,用来通过附属图片数量选取产品。

准备工作

我们使用前面小节中创建的products应用。

如何实现…

执行如下步骤:

  1. 在admin.py文件中,创建继承SimpleListFilter的PhotoFilter类,如下:
  2. 然后对ProductAdmin添加列表过滤器,如以下代码所示:

实现原理…

在列表过滤器中,根据刚刚创建的自定义字段,会在产品列表的边栏中进行显示,如下:

Django 3网页开发指南第4版 第6章 模型管理

PhotoFilter类用可翻译的标题和查询参数名作为属性。还有两个方法,如下:

  • lookups()方法定义过滤器的选项
  • queryset()方法定义如何在特定值选中时过滤QuerySet对象

在lookups()方法中定义了三个选项,如下:

  • 无图片no photos
  • 一张图片one photo
  • 一张以上图片more than one photo

在queryset()方法中,我们使用QuerySet的annotate()方法来获取每个产品的图片数。然后根据选中的选项过滤计数。

了解更多聚合函数,如 annotate(),,请参见Django官方文档

相关内容

  • 在修改列表页中自定义列一节
  • 创建后台动作一节
  • 创建自定义accounts应用一节

修改每三方应用的应用标签

Django框架有很多第三方应用可用于项目中。在部分的应用都可以通过https://djangopackages.org进行浏览对比。本节中,我们将展示如何在后台中对python-social-auth的标签进行重命名。也就是说,我们可以修改任意Django第三方应用的标签。

准备工作

按照https://python-social-auth.readthedocs.io/en/latest/configuration/django.html上的教程在项目中安装Python Social Auth。Python Social Auth允许用户以社交网站账号或其Open ID来进行登录。一旦完成这一操作,后台的首页会是下面这样:

Django 3网页开发指南第4版 第6章 模型管理

如何实现…

我们先将PYTHON SOCIAL AUTH标签修改为对用户更为友好的名称,如SOCIAL AUTHENTICATION。按照如下步骤执行:

  1. 创建名为accounts的应用,在其中的apps.py 文件中,添加如下内容:
  2. Python Social Auth的配置要求在INSTALLED_APPS中添加social_django。将该应用替换为myproject.apps.accounts.apps.SocialDjangoConfig:

实现原理…

此时查看后台首页,会看到如下内容:

Django 3网页开发指南第4版 第6章 模型管理

INSTALLED_APPS配置接收应用的路径或应用配置的路径。除了默认的应用路径外,我们还可以设置应用配置的路径。在其中我们修改应用的显示名称,甚至可以应用一些信号处理器或其它针对该应用的初始化配置。

相关内容

  • 创建自定义accounts应用一节
  • 获取用户头像一节

创建自定义accounts应用

Django内置有社区贡献的django.contrib.auth应用,用于用户认证。它让用户可以使用自己的用户名来进行登录,例如使用后台功能。这个应用设计时考虑到可以让开发者自己进行扩展。本小节中,我们将创建自定义用户和角色模型,并后其它设置后台。除用户名和密码外,还可以使用email和密码进行登录。

准备工作

创建一个accounts应用,并将该应用添加到配置文件的INSTALLED_APPS中:

如何实现…

按照如下步骤来重写用户和用户组模型:

  1. 在accounts应用中创建models.py并添加如下内容:
  2. 在accounts应用中使用User模型的后台配置创建admin.py文件:
  3. 同样在该文件中,添加Role模型的配置:

实现原理…

默认的管理后台用户列表像下图这样:

Django 3网页开发指南第4版 第6章 模型管理

默认的管理后台组列表像下图这样:

Django 3网页开发指南第4版 第6章 模型管理

本节中我们创建了两个模型:

  • Role模型,是对django.contrib.auth应用中的Group模型的代理 。创建Role模型来将显示名称由Group重命名为Role。
  • User模型同jango.contrib.auth中的User模型一样继承了AbstractUser抽象类。创建User模型来将主键替换为UUIDField并让用户可以使用email和密码登录,而不是默认的用户名、密码登录。

后台类MyUserAdmin和MyRoleAdmin继承社区代码中的UserAdmin和GroupAdmin类并重写了一些属性。然后,我们取消了对已有后台管理类User和Group模型的注册,并注册了新的修改后的类。

新的管理后台用户如下图所示:

Django 3网页开发指南第4版 第6章 模型管理

修改后的用户后台管理配置在列表视图中显示了比默认配置更多的选项,还有增加的过滤器和排序选项,以及在编辑表单顶部的Submit按钮。

在新的组管理配置修改列表中,将会显示分配给指定组的用户。在浏览器中显示如下图所示:

Django 3网页开发指南第4版 第6章 模型管理

相关内容

  • 在修改列表页中自定义列一节
  • 在修改表单中插入地图一节

获取用户头像(Gravatar)

当前使用自定义的User模型进行认证,我们可以添加一些有益的字段来做进一步的增强。在本节中,我们将添加avatar字段并能够通过Gravatar服务下载用户头像。使用这一服务的用户可以上传头像并将它们分配给到某些邮箱。借助于此,各评论系统及社交平台能够根据用户email的哈希来通过Gravatar显示这些头像。

准备工作

我们继续使用前面小节中所创建的accounts应用。

如何实现…

按照如下步骤改进accounts应用中的User模型:

  1. 对User模型添加avatar字段及django-imagekit缩略图规格:
  2. 添加一些方法来为MyUserAdmin类下载并显示Gravatar:
  3. 在accounts应用的helpers.py文件中添加如下内容:
  4. 在后台文件中对头像创建模板:
  5. 对下载Gravatar的button创建模板:
  6. 最终,使用JavaScript对用户修改列表后台创建模板来处理Get Gravatar按钮的鼠标点击:

实现原理…

如果此时查看后台用户修改列表,界面类似下面这样:

Django 3网页开发指南第4版 第6章 模型管理

列以用户的AVATAR开头,然后是 FULL NAME,接收是获取Gravatar的按钮。在用户点击Get Gravatar按钮时,JavaScript onclick事件处理器对download_gravatar_view发出一个POST请求。这个视图对用户的Gravatar创建一个URL,它依赖于用户email的email哈希值,然后调用帮助函数来为用户下载图片并将其链接到avatar字段。

扩展知识…

Gravatar图片非常小通常下载很快速。如果从其它服务下载更大的图片,可以使用Celery或Huey任务队列来在后台获取图片。可通过https://docs.celeryproject.org/en/latest/django/first-steps-with-django.html学习Celery相关知识,通过https://huey.readthedocs.io/en/0.4.9/django.html学习Huey相关知识。

相关内容

  • 修改每三方应用的应用标签一节
  • 创建自定义accounts应用一节

在修改表单中插入地图

Google Maps提供有JavaScript API,我们可以使用在网站中插入地图。本节中,我们将创建一个带有Location模型的locations应用并扩展修改表单的模板,来添加地图让管理员可以查找亲标记某位置的地理坐标。

准备工作

注册Google Maps API key并在模板中进行暴露,参见第4章 模板和JavaScript中的使用HTML5 data属性一节。注意学习本小节,需要在Google Cloud Platform控制台中启用Maps JavaScript API 和 Geocoding API。要使用这些API,还需要填写账单信息。

我们将继续创建locations应用:

  1. 把该应用放到配置文件的INSTALLED_APPS中:
  2. 创建一个Location模型,包含名称、描述、地址、地理坐标和图片等,如下:
  3. 接下来我们需要对PostgreSQL数据库安装PostGIS。最简单的方式是运行dbshell管理命令行,运行如下命令:
  4. 接着对具有geoposition的模型创建默认后台(我们会在如何实现…一节中进行修改):

社区gis模型的地理Point字段在Django后台中默认使用Leaflet.js JavaScript映射库。图层从Open Street Maps 获取,后台如下:

Django 3网页开发指南第4版 第6章 模型管理

注意普通的配置中,是无法手动输入经度和纬度的,也无法通过地址信息推导出地理位置信息。本节中我们会进行实现。

如何实现…

Location模型的后台会和全多个文件合并。执行如下步骤来进行创建:

  1. 为Location模型创建后台配置。注意我们还创建了一个自定义模型表单用于创建单独的纬度和经度字段:
  2. 创建自定义修改表单模板需要添加一个change_form.html文件,放在模型路径的admin/locations/location/目录下。这个模板会扩展默认的admin/change_form.html模板并会重写extrastyle和field_sets代码块,如下:
  3. 然后要创建地图模板,用于插入到Map字段集中,如下:
  4. 这个地图默认自然没有样式。因此我们要像如下代码那样添加一些CSS:
  5. 接着,创建JavaScript文件location_change_form.js。我们不希望用全局变量污染环境。因此,我们通过闭包来对变量和函数创建私有作用域。本文件中将使用jQuery(因为jQuery自带社区后台系统,更为简单也跨浏览器兼容),如下:
  6. 创建JavaScript函数并逐一添加到location_change_form.js中。getAddress4search()函数会从地址字段中获取地址字符串,稍后用于地理定位,如下:
  7. updateMarker() 函数接收latitude和longitude参数并在地图上画出或移动标记。还会让标记可进行拖拽,如下:
  8. updateLatitudeAndLongitude()函数,在上面的dragend事件兼听器中进行了引入,接收latitude和longitude参数,使用id_latitude和id_longitude的ID值更新这些字段的值,如下:
  9. autocompleteAddress()函数获取Google Maps地理编码的结果并在地图下面列举出来,以选择正确的结果。如果只有一个结果,它更新地理位置和地址字段,如下:
  10. updateAddressFields()函数接收一个内嵌字典,地址组件作为其参数,并填写所有地址字段,如下:
  11. 最后,初始化函数在页面加载时进行调用。它将onclick事件处理器与按钮进行关联,创建一个Google Map,并且初始标识latitude和longitude字段中所定义的地址位置,如下:

实现原理…

此时如果在浏览器中查看Change Location表单,会在字段集中显示一个地图,这个字段集后接地址字段的字段集,如下图所示:

Django 3网页开发指南第4版 第6章 模型管理

地图下面,有两个按钮:Locate addressRemove from map

点击 Locate address按钮时,会调用地理编码来搜索所输入地址的地理坐标。执行地理编码的结果是在以内置的字典格式列出一个或多个地址。我以将使用可点击链接列表的形式展示,如下:

Django 3网页开发指南第4版 第6章 模型管理

要在开发者工具控制台中查看内置字典的结构,可在autocompleteAddress() 函数的开头处添加如下代码:

在点击其中一个选项时,地图上显示的标记展现地点的具体地理位置。会下下面这样填充Latitude和Longitude字段:

Django 3网页开发指南第4版 第6章 模型管理

这时管理可以通过拖拽在地图上移动标记。同时,在地图上任意位置双击会更新地理坐标及标记的位置。

最后,在点击Remove from map按钮时,会清除地理坐标并删除标记。

管理后台使用自定义LocationModelForm,排除了geoposition字段、添加了Latitude和Longitude字段,并处理对它们值的保存和载入。

相关内容

喜欢 (1)
[]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址