⤵️ 📟 💆🏾 在Django中使用VueJS 👨🏽‍✈️ 📩 ✋🏾

在Python Web Developer课程开始之前准备了文章的翻译。

介绍

现在我正在做一个非常有趣的项目。其中的所有事情都很复杂，因为该项目本身规模非常大，而且我全职工作时在空闲时间独自处理。因此，我必须有效。幸运的是，我使用Django及其“含电池”方法。

我使用了Django的所有功能，这些功能可以加快开发速度，并且我不想忽略其模板引擎。因此，Django的后端和JavaScript SPA的前端对我来说不是一个选择。但是，即使是最狂热的后端开发人员也必须承认，有些事情需要在客户端实现。较小的用户操作不需要重新加载页面。另外，我创建的Web应用程序的某些部分需要相当复杂的用户交互。

按照传统，可以混合使用Django和jQuery以获得所需的行为。但是现在有更新的JavaScript技术，例如React和Vue。由于我们的目标是找到一个可以与Django一起使用的框架，而无需从头开始重写所有内容，因此我们将使用Vue作为更简单的选择。在本文中，我将向您展示如何轻松地将Vue与Django一起使用。

安装与设定

使用Vue的原因之一是其出色的文档资料。它有很多例子，一个不错的搜索和一个清晰的目录。本文的目的是表明您可以立即开始在Django项目中使用Vue，而无需进行长达数小时的复杂设置。因此，我们将使用最简单的连接方法Vue.js，并通过标记将其添加<script>。

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

现在我们准备创建我们的第一个实例 Vue.js：

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  delimiters: ["[[", "]]"],
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

我以官方入门指南中的示例为例。但是，还有其他事情。默认情况下，Django和Vue使用相同的模板标签。因此，我们需要将Vue与Django明确分开，以避免与Django模板引擎发生冲突。

从Vue访问Django数据

获取数据最简单的方法是使用内置的过滤器jscon_script从Django的。这样，您可以立即开始将Django模型用作Vue实例的数据。

在HTML中：

{{ django_template_variable|json_script:"djangoData" }}

然后在JavaScript中，我们将数据加载到变量中：

let jsVariable = JSON.parse(document.getElementById('djangoData').textContent);

她已准备好与Vue一起使用：

new Vue({
  delimiters: ["[[", "]]"],
  el: '#app',
  data: jsVariable
})

在后端运行异步请求

Vue前端最常见的任务之一是查询后端的服务器应用程序。使用完整的Django应用程序，我们不需要执行每个用户操作。在某些情况下，重新加载整个页面的效果很好，而Django模板系统将提供所有好处。但是，为了改善用户体验并充分利用Vue，在某些情况下我们可能仍然需要提出后端请求。

Vue本身不知道如何处理请求。在本文中，我将使用axiosVue官方文档也建议这样做。您可以选择其他选择。要通过Django的CSRF保护机制，axios必须在其请求中包含适当的cookie。最简单的方法是默认设置全局axios值：

axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";

此外，我们可以使用必要的设置创建axios实例：

var instance = axios.create({
    xsrfCookieName: 'csrftoken',
    xsrfHeaderName: "X-CSRFTOKEN",
});

您的Django模板应包含标记{% csrf_token %}，或者相应的视图应使用decorator ensure_csrf_cookie()。用于身份验证的Django会话的默认后端的其余部分将立即可用，这意味着您可以使用类似loginRequired这样的注释在后端上的服务，并且它将正常工作。要发出请求，可以使用axios：

axios.post('/django/backend/endpoint', {
    data: jsVariable 
})
    .then(function (response) {
        // handle response
    })
    .catch(function (error) {
        // handle error
    });

可以从mountedVue实例的钩子或可以放置JavaScript代码的任何其他位置进行此调用。

如果您CSRF_USE_SESSIONS CSRF_COOKIE_HTTPONLY在设置中激活了Django，则需要从DOM中读取CSRF令牌。要了解更多信息，请查看官方Django文档。

结论

当您搜索有关Django + Vue的信息时，大多数搜索结果将涉及如何在后端使用Django，而Vue在前端使用一个单独的项目。有两个独立的项目会使工作复杂化，并且您将无法访问Django模板系统，这反过来又是节省时间的非常有效的方法。另一方面，访问像Vue这样的框架可以为Web应用程序领域带来超越CRUD功能的奇迹。

幸运的是，我们不需要在它们之间进行选择。本指南显示您可以很好地养活两只兔子！

扩展Django的功能（免费网络研讨会）。

在Django中使用VueJS

介绍

安装与设定

从Vue访问Django数据

在后端运行异步请求

结论

More articles: