vue js + django应用程序架构

Question

我发现了一些关于此的帖子.但我仍然感到困惑.
我想使用django rest framework api来被vue使用.我的问题:

1. 我应该使用django模板吗？我猜不是,导致django模板语法与vue发生冲突.但我仍需要提供模板 - 我应该只使用带有apache的静态模板吗？

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

3. 似乎所有的文档都假设我使用node.js,我没有.除了django apache服务器之外,我还必须使用另一个node.js服务器吗？

4. 使用webpack/npm的vue.js 强制使用特定的app文件夹结构吗？如何使用正常的django项目结构？

Answer 1

关于vue的第一件事就是它可以很好地扩展.您可以使用它来完成整个单页应用程序,让vue驱动您的整个前端,或者您可以使用它来构建具有更多交互性的单个组件,并使用其他内容呈现其余组件.你问题的答案取决于你的目标.通常情况下,SPA(单页应用程序)感觉更现代化,根据我的经验,可以产生更清晰的关注点,所以我个人也会这样做,但我会描述两种策略:

建立SPA:

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

2. vue路由器对这些东西有一个很好的封装,你不必自己从url中获取params,它会为你处理并将这些params直接传递给你的组件,见这里.是的,需要额外的XHR,但请考虑以下场景:当使用django渲染页面时,django将输出比vue更大的html文件.因此,vue所需的"额外负载"只是稍微改变了一点,但流量并没有大幅增加.

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

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

仅针对单个组件使用Vue:

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

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