django - vue js + django 应用架构

标签 django api vue.js

我找到了一些关于这个的帖子。但我还是一头雾水。
我想使用 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 项目结构一起工作?

最佳答案

关于 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> 就这些。

关于django - vue js + django 应用架构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49480548/

相关文章:

python - django 1.9 和 registration/login.html

html - 使用文本溢出 : ellipsis with flexbox

javascript - 将字节数组输出转换为 Blob 损坏文件

javascript - Vue.js - 组件数据不更新

laravel - 当我部署到服务器时,Laravel 项目中的 vue 组件不会更新

vue.js - Vue 安装的 jquery 代码在 DOM 重新渲染上不起作用

html - 如何在 Django 和 Python Shell 中开始调试 POST 和 GET 请求

python - 让尝试更快地捕捉 Python

javascript - 如何读取API文档中的函数参数?

丹麦项目中的 Django 编码