构建 Django Webapp 前端的“最佳”方式是什么？

Question

提前致谢！这更像是一个“哲学”问题，然后是直接请求对代码的意见，尽管我非常感谢任何人对代码示例的意见。

从我记事起，我就一直是“传统”开发人员，现在我以数据科学家的身份从事专业工作。话虽如此，我从未真正接触过的一个前沿领域是 Web 开发。

对于我正在处理的项目，我需要构建（并且在一个稍微加快的时间范围内）一个外观漂亮的 Web 应用程序，其功能与 Wiki 网站有些相似（使用 Mediawiki 等现有代码库在这里不是一种选择，因此假设一切必须从头开始构建）。

在尝试以“正确的方式”做事时，我进行了如下设置：

1. 构建的 Django 模型似乎正确捕获了 web 应用程序的数据关系结构，至少通过使用 Django 的管理门户进行测试
2. Django 连接到 Postgres 数据库
3. (1) 和 (2) 在 Docker 容器中运行

显然，这里剩下的最重要的部分是前端。我试图向几个朋友和熟人寻求建议，并被指出了 Bootstrap 的方向。

从这里开始，我承认，我有点卡住了。

我在 Django文档中看到不涉及任何 Javascript 的示例（看起来，HTML 页面可以通过最小的提升直接与数据库交互，使用看起来非常简单的“在此处插入占位符”逻辑，就像我一样通过 Django 模型设置它）。我在这里和这里看到了类似的结构。

但后来我在网上看到了另一套关于如何制作功能性 webapp的指令——为 Django 模型创建序列化程序到 JSON，构建 REST api，使用 Javascript 编写前端页面逻辑并使用导入到 Javascript 中的库与手动构建的 API 交互以与后端交互。

现在，当然，“第一种”方法似乎要简单得多。第二个感觉就像是在重新发明轮子——如果我可以简单地使用像 一样的结构{{ num_books }}，我为什么要构建所有这些 API 并担心 JSON？但我觉得很困惑。从长远考虑，是否有“正确”的选择？似乎我可以找到使用 Bootstrap 和采用这两种方法的其他框架的人。除非我采用 JSON/API 方法，否则我可以不使用 Javascript 代码吗？这还重要吗？这里真正的区别是什么？

在波涛汹涌的大海上使用指南针将不胜感激。当然，我不可能是第一个尝试用 Django 构建功能性 web 应用程序的人……前端对我来说完全陌生。

谢谢你们！

Answer 1

首先，Django 是一个框架，这意味着它已经包含了大多数人需要的一组预定义的必要功能，有时人们会说“包括电池”。

在 REST 架构被发明之前，前端和后端是密切相关的。它们之间没有直线，并且很难与其他服务共享业务逻辑。

基本上我们可以说有两种选择，如何用 Django 组织前端和后端工作流：

使用 Django 模板：

最简单、最简单的入门方法。您需要的所有内容都已在 Django 中呈现。让我们看一下这个简单的例子：

视图.py

def index(request):
    fruits = Fruit.objects.all()
    render(request, 'index.html', {'fruits': fruits})

之后，您可以在模板中使用上下文中的变量，如下所示：

索引.html

<ul>
    {% for fruit in fruits %}
    <li>{{ fruit }}</li>
    {% endfor %}
</ul>

Django 模板系统非常强大且可定制，如果默认模板引擎不适合您的需求，则可以选择其他模板引擎，例如Jinja。

您可以在那里做很多事情，但作为一般建议，所有“计算”的东西不应该存储在模板级别，因为它会显着增加页面的渲染时间。放置业务逻辑的更好位置是视图和自定义管理器上的大部分数据库工作。

对于应用程序的动态部分，你可以使用AJAX从可能的JQuery库。

使用forms也很简单，Django 默认会csrf保护它。默认验证器和模型表单为您提供真正的力量。

当您使用依赖于它们的模板时，很可能您无法在其他地方重用您的端点，这就是您需要 REST 的原因。Django 有一些功能可以帮助你完成它，很可能你最终会使用django-rest-framework，它是当今 Django 使用的最流行的库之一。

使用 REST 架构：

上面的示例看起来像这样，尽管有ModelViewSet，它为您完成了大部分样板工作：

class FruitViewSet(viewsets.ViewSet):
    def list(self, request, *args, **kwargs):
        fruits = Fruit.objects.all()
        ser = FruitSerializer(fruits, many=True)
        if not ser.is_valid():
            return Response({}, status=status.HTTP_400_BAD_REQUEST)
        return Response(ser.data, status=status.HTTP_200_OK)

您可以使用ModelSerializer或编写自己的序列化程序。验证过程简单明了：

class FruitSerializer(serializers.ModelSerializer):
    def validate(self, attrs):
        # validate your data here
        pass
    class Meta:
        model = Fruit
        fields = '__all__'

要在网页上显示这些数据，你可以使用任何你想要的，vanilla javascript 或任何支持 REST 的 javascript 框架，当今最流行的：React、Angular、Vue。

有了REST你可以使用相同的API为您的网站，移动应用等。最后，实现一次随处使用。