将 Django 中的视图/模型链接到 Javascript 前端框架

Posted 2023-02-24

【中文标题】将 Django 中的视图/模型链接到 Javascript 前端框架

【英文标题】：Linking the View / Model in Django to a Javascript Front End Framework

【发布时间】：2016-11-01 07:42:33

【问题描述】：

我精通 javascript 和 python，并且通常熟悉 django，但对其中一些 javascript 前端框架非常陌生。

对于以下情况我应该使用哪种工具有点困惑：

用户有一个包含多个因素的搜索查询，但我希望在查询之后可以调整这些因素（即价格滑块）。

理想情况下，新结果（来自 django 视图中的查询集过滤器）无需刷新即可呈现。

另一种场景是经典的 ajax，无需刷新即可提交表单。

我正在考虑所有主要的库（jquery、react）以及框架（backbone、angular、ember）。

所有这些都可以完成我给出的示例吗？这称为什么类型的过程（数据绑定？），我在哪里可以找到一些关于将 django 与任何框架/库连接起来的好教程。

在此先感谢您的任何意见。

【问题讨论】：

您绝对可以只使用 jQuery 来完成此操作，尽管使用更强大的 javascript 框架（如 Angular 或 React）可能会更简洁。您打算在您的网站上做更多类似的功能，还是只做这个？

目前，我只关心搜索过滤器和表单提交。稍后我可能会添加一些额外的功能。如何使用 jQuery/React/Angular 完成搜索功能？

让我在答案中提出一些建议。

【参考方案1】：

因此，我建议以下内容并考虑您的价格滑块示例。这是一个如何仅使用 jQuery 按名称搜索用户的示例。

显然，您需要一个用于搜索查询的输入表单。

<form class="search-form">
    <input type="text" name="search" placeholder="Search.." id="search-name">
    <button class="search-submit">Go!</button>
    <!-- toggleable search options here, including your price slider. -->
</form>

随心所欲地自定义它的外观。这里重要的是用户将在搜索框中输入文本，然后单击“Go！”。您需要将 jQuery 事件附加到此操作，不作为表单提交，因为这会重新加载您不想要的页面。

$(".search-submit").click(function() 
    var url = "/search?name=" + $("#search-name").val();
    $.ajax(
        method: "GET",
        url: url,
        success: function (data) 
            // Dynamically change your page results with more jquery based on data
        ,
        error: function (err) 
            alert("Something went wrong");
        
    );
);

接下来，你需要一个 URL 和 View 来接受这个 ajax 请求。

urls.py:

from views.py import search
# Search URL
url((r'^search/$', search),

views.py：

import json
from app.models import User
from django.http import HttpRespons

def search(request):
    # Grab the data
    query = request.GET.get("name", None)
    # Make the query using your backend, the following is just an example
    users = User.objects.filter(name=name)
    # Serialize the objects as necessary
    data = []
    for user in users:
        data.append(
            "name" : user.name,
            "age" : user.age,
            # Other stuff you want from the objects you retrieved.
        )
    return HttpResponse(json.dumps(data))

这样就结束了循环。当用户输入搜索查询时，ajax 会调用你的资源，得到新的结果，页面的动态变化交给你。

要做的事情： - 获取查询时某种加载“掩码”。可以用jquery和CSS来完成 - 额外的搜索选项。最好在您向服务器发出的请求中添加更多查询字符串。例如，“/search?name=Jack&age=42”。

【讨论】：

谢谢，这就是我要找的！出于好奇，在什么时候实施骨干/角度或反应是有意义的？他们会为应用程序增加哪些功能？

Angular 和其他 javascript 框架在功能方面比 jQuery 强大得多。在您真正理解它们之前，我不会添加它们，因为它们会为您构建站点的方式增加大量开销。我的建议是阅读它们并了解它们提供的功能，但请坚持当前的路径，直到您确信自己需要它们。