django - vue js + django 应用架构

Question

我找到了一些关于这个的帖子。但我还是一头雾水。
我想使用 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. 带有 webpack/npm 的 vue.js 是否强制特定的应用程序文件夹结构？这如何与普通的 Django 项目结构一起工作？

Answer 1

关于 vue 的第一件事是它的扩展性非常好。你可以用它来做整个单页应用程序，让 vue 驱动你的整个前端，或者你可以用它来构建具有更多交互性的单个组件，然后用其他东西渲染其余部分。您问题的答案取决于您的目标。通常 SPA(单页应用程序)感觉更现代，根据我的经验，它会产生更清晰的关注点分离，所以我个人会接受它，但我将描述这两种策略:

构建 SPA:

1. 不，在这种情况下不是。在构建 SPA 时，您的后端和前端是完全分离的。您将使用 vue 渲染所有内容并使用 vue 路由器进行路由。 Django 不需要了解您的前端，它应该只公开一个 API(例如 REST)。在这种情况下，您的前端成为该 API 的一个实现，使用异步数据获取(例如使用 axios)从 Django 后端获取必要的模型。此外，不需要 django 为您的模板提供服务，只需构建 vue 项目并将文件放在服务器上即可。

2. vue 路由器对这些东西有很好的封装，您不必自己从 url 中获取参数，它会为您处理并将这些参数直接传递给您的组件，请参阅 here 。是的，将需要额外的 XHR，但请考虑以下场景:当使用 django 呈现页面时，django 将输出比 vue 开始时更大的 html 文件。所以 vue 需要的“额外加载”只是转移了一点点，但是流量并没有很大的增加。

3. Vue 纯粹是一个前端框架，因此它不关心您使用的是什么后端。因为它只是前端，webpack 的输出将是原始的 html、js 和 css。不需要节点服务器，任何可以传送这些文件的东西都可以完成这项工作。然而，因为 vue 在浏览器中完全呈现，所以搜索引擎很难抓取你的 SPA。为了解决这个问题，有一种叫做服务器端渲染的东西。如果你觉得你需要 SEO，你可能想看看 Nuxt.js 。当采用服务器端渲染方法时，您将需要一个节点服务器，否则就不需要。

4. 在 SPA 场景中，您不关心。事实上，SPA 可以位于完全不同的服务器上，并且仍然可以与您的 django 后端一起正常运行，因为它使用纯异步调用来获取所有数据。

仅对单个组件使用 Vue:

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

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