Javascript 在vue+中处理页面；django网页包应用程序_Javascript_Django_Vue.js_Webpack

Javascript 在vue+中处理页面；django网页包应用程序

javascript django vue.js webpack

Javascript 在vue+中处理页面；django网页包应用程序,javascript,django,vue.js,webpack,Javascript,Django,Vue.js,Webpack,我在Django项目中添加了Vue，但因为我不想将前端与后端分离，所以我决定直接从Django加载webpack。我的设置似乎可以使用，但我对如何构建项目有一些疑问这是我的文件夹： my_site - django settings my_app - views, urls, models, templates vue_frontend - webpack and vue stuff 我的疑问是：路由应该由Django处理，还是由Vue在SPA中处理以下是我现在拥有的：

我在Django项目中添加了Vue，但因为我不想将前端与后端分离，所以我决定直接从Django加载webpack。我的设置似乎可以使用，但我对如何构建项目有一些疑问

这是我的文件夹：

my_site
   - django settings
my_app
   - views, urls, models, templates
vue_frontend 
   - webpack and vue stuff

我的疑问是：路由应该由Django处理，还是由Vue在SPA中处理

以下是我现在拥有的：

django_template2.html

{% extends 'header.html' %}
{% load render_bundle from webpack_loader %}
{% block content %}

<body>
    <div id="app">
        <firstVueComponent />
    </div>
</body>


{% render_bundle 'chunk-vendors' %}
{% render_bundle 'main' %}
{% endblock %}

{% extends 'header.html' %}
{% load render_bundle from webpack_loader %}
{% block content %}

<body>
    <div id="app">
        <secondVueComponent />
    </div>
</body>


{% render_bundle 'chunk-vendors' %}
{% render_bundle 'main' %}
{% endblock %}

因此，这里我不使用Vue来处理路由，而是在需要的Django模板中加载同一应用程序的各个Vue组件。我的疑问是：这是一种不好的做法吗？我是否有理由避免这样做

我的疑问是：路由应该由Django处理，还是由Vue在SPA中处理

如果你要做SPA，你的FE需要知道路线，例如，如果用户点击链接/项目，你的FE需要知道如何更新URL。否则会出现页面刷新或错误的URL

我想你需要决定你是否要建一个水疗中心。我的经验是，如果你的页面上有很多互动，或者你有一个专门的FE团队，SPA会更好。BE/FE之间的完全分离无疑是行业事实上的标准，但在BE上呈现大多数内容，并且拥有轻量级FE也不是犯罪，堆栈溢出本身使用这种方法

如果您使用SPA，那么将FE URL放入BE也没有多大意义（除非您正在执行类似服务器端渲染的操作）。BE将提供一组API URL（最终用户看不见），FE将使用它们，并提供一组用户将看到的FE URL

是的，主要的问题是，将应用程序托管在两个不同的域上可能会让我失去django在安全方面的许多好处。我对在本地存储上存储jwt令牌有些怀疑，我认为这不是最安全的解决方案；有基于会话的身份验证，但我不知道它如何在两个不同的域上工作。另一件事是缺少这方面的示例，最后最大的问题是我已经在这个环境中设置了应用程序，所以转向解耦将是一个相当重要的问题

你的担忧有多种答案

1-不需要有单独的域。您可以使用

/api/

作为所有BE URL的前缀，然后在生产中使用反向代理，如NGINX或Traefik或您的负载平衡器。。。把两者分开。从长远来看，拥有独立的域更容易维护，但您需要时不时地处理cookie/CORS问题

2-如果您有独立的域，您可以使用设置主域和子域上的Cookie

3-无需在localstorage中使用JWT令牌。在我看来，它不如只有httponly的cookies。默认情况下，Django会话身份验证已打开。这样，您安装的随机npm库或页面上的第三方脚本就无法访问和窃取令牌

4-另一方面，Django CSRF保护已经过时，现在浏览器上有了cookie。检查浏览器支持。较新版本的Django默认为Lax，可在受支持的浏览器上保护您免受CSRF的影响。所以你可以关掉这个保护装置来减少头痛

我个人认为您可以坚持使用基于Django会话的身份验证，无需向FE添加任何内容。FE只需调用

/api/auth/login

，就会自动设置正确的cookie

为了更加健壮，您可以添加像

/API/auth/me

这样的API，将当前登录的用户数据返回给FE。FE将在用户第一次访问您的网站时调用该选项，以了解用户是否登录。

可能是XY问题。为什么不想将前端和后端解耦？这是一个行业标准，将它们作为抽象层与web API分离。原因有很多，比如我不想使用从Django渲染的好处和Django的所有安全好处，而且我对Django的熟练程度比Vue高，所以我觉得从一个分离的前端处理身份验证是不安全的。但是，仅仅从前端就很难破坏安全性。默认情况下，所有的Vue、React和Angular都可以保护您免受XSS的攻击，您需要尽最大努力击打自己的脚才能做到这一点。而且认证由后端处理，而不管FE是否紧密耦合。是的，主要问题是，将应用托管在两个不同的域上可能会让我失去django在安全方面的许多好处。我对在本地存储上存储jwt令牌有些怀疑，我认为这不是最安全的解决方案；有基于会话的身份验证，但我不知道它如何在两个不同的域上工作。另一件事是缺少这方面的示例，最后最大的问题是我已经在这个环境中设置了应用程序，所以转移到解耦将是一个相当大的问题。是的，单独的域很糟糕，但是你可以使用一个域和nginx proxy_pass或通过CDN（CloudFront、Cloudflare、Fastly都可以做到）。对于本地开发，请使用dev代理。有趣的是，不久前我也进行了同样的讨论，也许我会在周末挤出一篇关于如何在一个域名上建立Django+SPA的博文，其实并不难。不管怎样，如果你的设置对你有效，请继续。要回答您的原始问题，路由应在SPA中进行，否则您的SPA将不是SPA。您仍然需要从Django端返回index.html，尽管非常感谢。这非常有用。这里让我完全冻结的一个大问题是，我是否应该使用BE来渲染页面或进行完整的SPA。我的经验是用Django做任何事情，s

from django.urls import path, include
from . import views

urlpatterns = [
    path('first_page/', views.first_page, name='first'),
    path('second_page/', views.second_page, name='second'),
]