vue js + django 应用架构

Question

我发现了一些关于此的帖子。但我还是一头雾水。
我想使用 django rest framework api 供 vue 使用。我的问题：

1. 我应该使用 django 模板吗？我猜不是，因为 django 模板语法与 vue 冲突。但是我仍然需要提供模板 - 我应该只使用 apache 的静态模板吗？

2. 假设我确实使用静态模板，我如何才能像使用 django 模板一样预渲染页面？
   我的意思是，使用 django 我有一个类似 /resource?id=5,
   但是使用 rest api，从 url 获取 id=5 资源并进行渲染将是 vue 的责任，但我不喜欢需要额外的 xhr。

3. 似乎所有文档都假设我使用 node.js，但我没有。除了 django apache 服务器之外，我是否必须使用另一个 node.js 服务器？

4. 带有 webpack/npm 的 vue.js 是否强制特定的应用程序文件夹结构？这如何与正常的 django 项目结构一起使用？

Answer 1

我自己刚刚实现了一个 Vue+Django 项目，我可以保证 Philip Feldmann 在他的详细回复中所说的一切。

我会强调一点，尽管从您提出的问题来看，这似乎有点模糊。从架构的角度来看，Vue 和 Vue 的路由器正在处理您传统上与 URL 导航相关联的内容，以及用户对您的站点/应用程序的视觉体验的变化。

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

这就是为什么您不需要传统意义上的传统 Django 模板。相反，处理请求的 Django 方法将执行诸如验证视图参数发送的请求（通常是 http POST 请求），确保正确处理身份验证和授权等事情，然后执行数据库模型查询以获取要返回的数据通过 JSON 或您期望在客户端进行的任何序列化，Django 基本上成为仅后端的解决方案。

玩这个已经有一段时间了，我会告诉你，以这种方式使用 Django 特别好...... Django 管理员为使用 Vue 应用程序的后端提供了一个好地方。我知道很多人都喜欢 Vue+Node 设置，但如果你是 Python 人并且对 Django 了解一点，这是一个很好的选择。

Answer 2

首先要知道 vue 的扩展性非常好。你可以用它来做整个单页应用程序，让 vue 驱动你的整个前端，或者你可以用它来构建具有更多交互性的单个组件，其余的用其他东西渲染。你的问题的答案取决于你的目标。通常，SPA（单页应用程序）感觉更现代，并且根据我的经验，可以更清晰地分离关注点，所以我个人会这样做，但我会描述这两种策略：

构建 SPA：

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

1234563 @。是的，将需要额外的 XHR，但考虑以下场景：当使用 django 渲染页面时，django 将输出一个比 vue 更大的 html 文件。所以 vue 需要的“额外加载”只是稍微转移了一点，但流量并没有大幅增加。

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

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

仅将 Vue 用于单个组件：

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

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