Vue JS + Django应用程序架构

7

我找到了一些关于这个问题的帖子,但我仍然感到困惑。
我想使用Django Rest Framework API供Vue消费。我的问题:

  1. 我是否应该使用Django模板?我猜不用,因为Django模板语法与Vue冲突。但是我仍然需要提供模板 - 我应该只使用Apache静态模板吗?

  2. 假设我确实使用静态模板,那么如何像使用Django模板一样预渲染页面?
    我的意思是,使用Django时,我有一个像/resource?id=5这样的URL,
    但是使用Rest API,将由Vue负责从URL获取id=5资源并进行渲染,但我不喜欢需要额外的XHR。

  3. 似乎所有文档都假定我使用node.js,但我没有。我必须在Django Apache服务器之外再使用另一个node.js服务器吗?

  4. Vue.js与webpack/npm是否强制使用特定的应用程序文件夹结构?它如何与正常的Django项目结构配合?


1
我的建议:1:不要提供静态模板,而是使用Apache提供静态HTML/JS文件。2:使用vue-router(带有history-mode);3:不,你不需要一个node.js服务器。4:有一些建议,但它们并没有真正强制规定结构。只要每个文件找到它所需的依赖项,就可以了。 - acdcjunior
2个回答

15
了解Vue的第一件事是它可以很好地扩展。你可以使用它来构建整个单页面应用程序,让Vue驱动整个前端,或者只使用它构建具有更多交互性的单个组件,并使用其他东西来呈现其余部分。回答您的问题取决于您选择什么。通常,SPA(单页应用程序)感觉更加现代化,并且从我的经验来看,可以产生更清晰的关注点分离。因此,个人会选择这种方式,但我将描述两种策略: 构建SPA:
  1. 在这种情况下不需要。构建SPA时,您的后端和前端是完全解耦的。您将使用Vue渲染所有内容,并使用Vue Router进行路由。Django不需要了解您的前端,它只需公开API(例如REST)。在这种情况下,您的前端成为该API的一个实现,使用异步数据获取(例如使用axios)从Django后端获取必要的模型。此外,django没有必要提供您的模板,只需构建Vue项目并将文件放在服务器上即可。

  2. Vue Router对这些内容有一个很好的封装,您不必自己从URL中获取参数,它会为您处理并直接将这些参数传递给您的组件,请参见此处。是的,会有额外的XHR请求,但请考虑以下场景:使用Django来呈现页面时,Django将输出比Vue更大的HTML文件。因此,Vue需要的“额外加载”只是稍微移动了一下,但流量并没有大幅增加。

  • Vue纯粹是一个前端框架,所以它不关心您使用的后端技术。因为它只是前端,webpack的输出将是原始的html、js和css。没有必要使用node服务器,任何可以提供这些文件的东西都能胜任。然而,由于vue完全在浏览器中渲染,所以搜索引擎很难爬取您的SPA。要解决这个问题,有一种叫做服务器端渲染的东西。如果您需要SEO,您可能需要查看Nuxt.js。如果采用服务器端渲染方法,你需要一个node服务器,否则不需要。

  • 在SPA场景下,您不需要关心。事实上,SPA可以在完全不同的服务器上,仍可以与您的Django后端正常工作,因为它只使用纯异步调用来获取所有数据。

  • 仅使用Vue组件:

    1. 在这种情况下,您想使用django来呈现大部分网站数据。只有当您需要交互或异步调用时,才应编写vue组件。您可以直接将它们放入django模板中,但请记住,组件的渲染将完全在用户浏览器中完成。

    2. 即使在这种情况下,影响也很小。使用webpack构建你的vue项目,将编译后的js/css文件放在django的assets文件夹中(我不是一个django专家,但它需要对django可访问)。然后只需确保您包含了所有这些文件(查看vue构建命令生成的index.html头文件),并确保您的应用程序的父标记具有正确的id,以便vue引导应用程序,例如默认值为:<div id="app">...</div> 就这么简单。


    谢谢,我正在构建一个SPA。我不喜欢我的页面必须使用额外的xhr来获取数据。这会使页面对SEO不友好。我想预渲染HTML,但我不想设置一个节点服务器。 - user3599803
    当使用ES6 JS的热重载等功能时,至少需要一个节点服务器进行开发,不是吗? - user3599803
    就像我之前提到的,你可以使用Nuxt来进行服务器端渲染。Nuxt允许你在向客户端传递页面之前从API中预取数据。但是你需要一个额外的节点服务器,不过你仍然可以正常运行Django,它们并不互相排斥。另外不用担心设置问题,Node的设置非常容易,只需按照Nuxt指南操作即可。此外,你需要一个节点服务器进行开发,但当你使用vue-cli时,它已经包含了这个功能,所以你不必担心任何事情,因为它只是本地的。这与Django的本地开发服务器工作方式非常相似。 - Philip Feldmann

    4

    我刚刚完成了一个Vue+Django项目的实现,可以证明Philip Feldmann在他的详细回答中所说的一切都是正确的。

    我想强调一点,这似乎是从你的提问中不太明确的地方。从架构的角度来看,Vue和Vue的路由器处理的是您传统上会与网站/应用程序的URL导航和用户视觉体验相关联的部分。

    在Django方面,您基本上放弃了渲染所有HTML的方式。相反,通过urls.py和传统的Django路由映射请求的内容是Python代码,用于生成和返回Vue应用程序使用的数据。因此,映射到您的Django应用程序的请求会返回诸如JSON之类的内容,而不是完全形成的Web页面。

    这就是为什么您不需要传统意义上的Django模板。相反,处理请求的Django方法将执行以下操作:验证视图参数发送的请求(通常为HTTP POST请求),确保正确处理身份验证和授权等事项,然后进行数据库模型查询,以获取要通过JSON或客户端期望的其他序列化方式返回的数据,从而使Django成为基本的后端解决方案。

    因为已经使用了这种方式很长一段时间,我会告诉你,这样使用Django真的很不错... Django管理员是处理Vue应用程序后端的好地方。我知道很多人热衷于Vue+Node的设置,但如果您是Python人并且了解Django的一些知识,这是一个很好的选择。


    当您渲染页面时,是否需要额外的xhr来获取与模板相关联的数据?如果您有几个不同模型的url,并且希望在单个请求中获取所有这些url,该怎么办? - user3599803
    通常是这样的。理论上,如果您足够了解应用程序在初始加载时需要什么,您可以将数据捆绑起来,以便在初始请求中传输,但这是不典型的。考虑一下如果它是单页应用程序,您的应用程序可能正在做什么。在第一个请求中,它将下载基本的HTML和实现您的应用程序的所有JavaScript包。此时,有很多用户交互,包括可能登录或路由到另一页。每个都需要向服务器发送某种形式的往返数据请求。您可能会发出许多数据请求。 - James Scheller

    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文,
    原文链接