什么是“最好的"?构建 Django Webapp 前端的方法? [英] What is the "best" way to build a Django Webapp frontend?

问题描述

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

Thanks in advance! This is more a "philosophical" question then a direct request for opinions on code, though I would greatly appreciate anyone's input on code examples to look at.

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

I've been a "traditional" developer for as long as I can remember, and now I work professionally as a data scientist. That being said, the one frontier I've never truly touched is web development.

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

For a project I'm working on, I need to build (and in a somewhat expedited timeframe) a good-looking web application that functions somewhat similarly to a Wiki website (using existing codebases like Mediawiki is not an option here, so assume everything has to be built from the ground-up).

为了以正确的方式"做事，我进行了如下设置:

In trying to do things the "right way", I've set things up as follows:

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

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

The most important piece here left, obviously, is the frontend. I've tried to ask several friends and acquaintances for advice, and have been pointed in the Bootstrap direction.

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

From here, I admit, I'm a bit stuck.

我在 Django docs 上看到不涉及的示例任何 Javascript(看起来，HTML 页面可以通过最小的提升直接与数据库交互，使用看起来非常简单的在此处插入占位符"逻辑，因为我已经通过 Django 模型设置了它).我在 here 和 此处.

I see examples on the Django docs that don't involve any Javascript (it seems, with minimal lift, HTML pages can directly interact with the database, using what seems like a pretty simple "insert-placeholder-here" logic, as I have set it up through the Django models). I see a similar construction here and here.

但后来我看到了一个 整个其他网络上关于如何制作功能性 web 应用程序的一组指令——为 Django 模型创建序列化程序到 JSON、构建 REST api、使用 Javascript 编写前端页面逻辑以及使用导入到 Javascript 中的库进行交互与后端交互的手动构建的 API.

But then I see a whole other set of instruction on the web about how to make a functional webapp-- creating serializers for the Django models to JSON, building a REST api, writing the frontend page logic using Javascript and using a library imported into Javascript to interact with the manually-built API(s) to interact with the backend.

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

Now, of course, the "first" approach seems much simpler. The second feels like reinventing the wheel-- if I can simply use a construction like {{ num_books }}, why would I go about building all those APIs and worrying about JSON? But I feel confused. Is there a "right" choice, thinking long-term? It seems like I can find people using Bootstrap and other frameworks taking both approaches. Can I not use Javascript code unless I take the JSON/API approach? Does that even matter? What truly are the differences here?

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

A compass on the rough seas would be much appreciated. Surely I cannot be the first to try to build a functional webapp with Django... the frontend is totally foreign to me.

谢谢大家！

推荐答案

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

In the first place, Django is a framework which means that it contains already a predefined set of necessary functionality that most people need, sometimes people say "with batteries included".

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

Before REST architecture was invented front-end and back-end were closely related to each other. There wasn't a straight line between them and it was hard to share business logic with other services.

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

Basically we can say that there are two options, how to organize front-end and back-end workflow with Django:

最简单、最简单的入门方式.您需要的所有内容都已在 Django 中呈现.我们来看看这个简单的例子:

The most simple and easiest way to get started. All that you need already presented in Django. Let's take a look at this simple example:

views.py

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

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

And after that you can use variables from the context in your template like so:

index.html

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

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

Django template system is really powerful and customizable if the default template engine doesn't suit your needs there is a possibility to choose another one, for example Jinja.

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

You can do a lot of stuff there, but as a general recommendation, all the "computing" stuff shouldn't be stored on the template level because it can dramatically increase the time rendering of the page. The better place to put business logic is views and most of the work with the database on custom managers.

对于应用程序的动态部分，您可以使用可能来自 JQuery 库的 AJAX.

For dynamic parts of your application, you could use AJAX probably from JQuery library.

使用表单也很简单，默认是Django使用 csrf 保护来处理它.默认 validators 和 模型表单 给你真正的力量.

It's also quite simple to work with forms, Django by default handle it with csrf protection. Default validators and model forms give you real power.

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

When you use templates you depend on them, most likely you couldn't reuse your endpoints somewhere else and that's why you need REST. Django has a little set of features that can help you with it and most likely you would end up with django-rest-framework usage which one of the most popular libraries used with Django today.

上面的例子看起来像这样，虽然有 ModelViewSet，它为您做了最多的样板工作:

The example above would look like this, though there is ModelViewSet, which do the most of boilerplate stuff for you:

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 或编写自己的序列化程序.验证过程简单明了:

You can use ModelSerializer or write your own serializers. The validation process is simple and straightforward:

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.

To display this data on a web page you could use whatever you want, vanilla javascript or any javascript framework which supports REST, the most popular today: React, Angular, Vue.

使用 REST，您可以为您的网络、移动应用程序等使用相同的 API.最后，实现一次随处使用.

With REST you could use the same API for your web, mobile application and so on. In the end, implement once use everywhere.

这篇关于什么是“最好的"?构建 Django Webapp 前端的方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！