Django 中的前端原型/骨架

Posted 2023-02-16

【中文标题】Django 中的前端原型/骨架

【英文标题】：Front-end prototype/skeleton in Django

【发布时间】：2011-07-04 00:08:27

【问题描述】：

我经常为与我一起工作的后端开发人员创建一个静态 html prototype/skeleton。这有助于在网站实施之前发现 UI/IA 中的错误和代价高昂的重写。

我想更进一步，创建这些prototypes/skeletons in Django。我所说的原型/骨架是指链接的静态页面，以后可以轻松连接到后端。

我想了解一些 suggestions/ideas 我应该如何设置我的模板/链接，以便在实施阶段后期使用它们。

我想到的要求的简短列表：

模板组织，而整个项目将包含多个应用程序 清理 URL 调度程序和链接创建 能够显示登录/注销状态

【参考方案1】：

我想在更传统的方法中，UI 设计师和后端开发人员在开发范围的两端工作，并希望以优雅的方式在中间的某个地方融合。如果您愿意亲自编写几行代码，您可以为开发人员布置整个应用程序架构，因为您占了上风——您直接关心用户、他们使用的数据以及他们需要执行的交互。这将消除开发人员的大部分猜测，现在只需要填补漏洞、连接点或你有什么。

您应该做的第一件事是聚在一起并建立一些共同点。通常，这包括在一开始就执行模块化。将所有主要功能分解为几个 Django 应用程序，这些应用程序将包装与应用程序提供的特定功能相关的模板、视图和模型三元组。这里越多越好，所以如果您最终拥有很多应用程序，请不要担心，因为您永远不希望单个应用程序提供太多功能/托管太多组件。通常，您从registration、authentication、profiles（用户）等应用程序开始，然后向外工作。例如，您可以将三者塞进一个应用程序中，但最终会得到大量模板、大量视图、两三个模型，但测试确实会成为一个真正的瓶颈。因此，将所有内容分解到这些应用程序桶中，直到您觉得系统的每个部分都自然而然地在概念层面上到位。如果您发现自己在思考应该将某些东西放在哪里，或者您正在查看一个有几页长的模块并且想要将模块（models.py、views.py、test.py）分解成一个包含许多内部包的包模块，您可能应该立即重构架构。永远记住，你在这里所做的努力是为了让你的架构变得简单。

一旦完成，您就真的完成了一半的工作。 Django 的优点在于 URL 和视图之间的耦合松散。视图本身提供应用程序行为并简化表示。如果您可以正确地铺平主要 URL 并存根视图以生成静态模板，那么您已经完成了一些出色的工作。

这就是它的完成方式。您可以通过命名您的模式来抽象 URL 和它们映射到的视图，例如 authentication:login、authentication:logout、registration:register、registration:confirm、registration:activate 等。这就是您将内部结构与所有人联系起来的方式提供的行为，这些行为不应更改。然后，您可以随时更改authentication:login 的 URL 模式，更改模式映射到的视图，但您可以通过内部名称引用它，这样您就可以将刚刚生成静态模板的视图替换为完整的视图无需对代码进行任何额外修改即可查看。

下面是它在现实生活中的运作方式：

集思广益，决定应用程序及其将提供的功能并审查您的决定。 从一个 core 应用程序开始，该应用程序将托管一些项目特定的功能，例如基本模板和根 / 视图。 创建一个/core/templates/core/base.html，它将加载将在站点范围内使用的所有常见 CSS/JS 文件，它将定义页眉、内容和页脚部分（模板块），并将使用上下文页面元数据的变量，例如标题、描述、关键字和机器人。您典型的“一个模板来统治他们所有”，这些位将出现在您的所有页面的结构/演示中。 创建一个简单的/core/temaplates/core/welcome.html，扩展核心模板并打印“Hello world！”在内容区。

将以下内容添加到/core/urls.py：

from django.conf.urls.defaults import *
from django.views.generic import TemplateView  


urlpatterns = patterns('',

    # Welcome
    url(
        r'^$', TemplateView.as_view(template_name='core/welcome.html'),
        name='welcome'
    ),

)

挂在主/urls.py:

from django.conf.urls.defaults import *
from django.contrib import admin


admin.autodiscover()

urlpatterns = patterns('',
    url(ur'^', include('core.urls', namespace='core')),
    url(ur'^admin/doc/', include('django.contrib.admindocs.urls')),
    url(ur'^admin/', include(admin.site.urls)),
)

点击http://localhost:8080/，看到“Hello World！”，陶醉在温暖的模糊感中。

对其余应用重复相同的操作：创建应用、创建模式、命名它们、将它们映射到静态模板、将其挂接到主 urlconf 中的命名空间。

您可以进一步推动视图为开发人员做好生产准备。这可能取决于开发人员和他们的风格指南，但我喜欢让我的/urls.py 保持干净，除了模式、名称和视图映射。您的 /core/urls.py 可能如下所示：

from django.conf.urls.defaults import *
from core import views


urlpatterns = patterns('',

    # Welcome
    url(
        r'^$', views.Welcome.as_view(),
        name='welcome'
    ),

)

使用以下内容编辑/core/views.py：

from django.core.views.generic import TemplateView

class WelcomeView(TemplateView):

    template_name='core/welcome.html'

    extra_context=
        'page_title': 'Welcome!',
        'page_keywords': 'relevant,page,keywords',
        'page_description': 'Something equally relevant',
    

    def get_context_data(self, **kwargs):
        context = super(WelcomeView, self).get_context_data(**kwargs)

        context.update(self.extra_context)
        return context

这是一个坚固的存根视图，包含页面元数据！绝对是那些能让你从开发者那里赢得啤酒的东西。继续对所有视图执行此操作以抽出静态模板。当有人接近最终确定视图时，他们只需要从不同的视图类继承，添加缺少的功能，扩展上下文，修改模板，瞧——它已经准备好投入生产了。

您无需进行大量前期学习即可实现这一目标，但这确实消除了开发人员的大量猜测，他们自然更关心构建应用程序的其余部分。它也很简单，非常擅长，我想没有人会介意让你做所有这些工作。作为补充，您可能不会对模板上下文如何填充到视图中一无所知，因此即使您可以开始推出更复杂的视图，或者至少能够阅读它们。

【参考方案2】：

当我启动一个应用程序时，我通常也会在 Django 中制作一个原型版本。我只是使用 direct_to_template 通用视图，以后可以用开发人员创建的视图替换。由于您有多个应用程序，因此您可以将应用程序特定模板存储在模板文件夹中与应用程序同名的文件夹中。

最终结果是所有屏幕都显示在正确的网址上，并且可以在它们之间进行链接。所有开发人员需要做的就是用他们创建的自定义视图替换每个 url。让它变得容易。

如果您希望显示登录/注销状态，您可能需要编写一些代码，但这绝对是可行的。