vue+django前后端不分离页面跳转转发请求踩坑

这是工作中的一个练手项目，总结一下得失，因为水平有限，不保证使用的术语和实现方法是正确的，如果有读者发现问题，希望能帮忙指出，这里表示感谢

本篇文章不展示完整的代码，不适用于初学者学习，但遇到的问题可以借鉴

正文开始

• 这个项目后端使用了djang，由于不需要对数据库进行操作，实际上只用到了视图(views)系统
• 前端使用了Element ui,而vue则直接采用了声明式渲染（这里埋下了一个大坑）

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

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

声明式渲染示例

• 发送请求使用了axios，但是页面跳转则通过django的TemplateResponse()函数实现，所以并没有前后端分离

// 发送请求
var instance = axios.create({
  baseURL: 'http://127.0.0.1:8000/',
  timeout: 60000,
  // 这里是第一个坑
  headers: {'X-CSRFtoken': csrftoken}
 });
instance.post('user/', that.form)
  .then(function (response) {
  url = `/sign?mobile=${response.data.mobile}&bankNo=${that.form.bankNo}&type=${that.form.type}`;
  window.location.href = url;
}

这里发送请求后，返回了403错误，可以看到我的请求地址是本地"127.0.0.1"，查找资料后发现使用axios后会出现跨域请求问题，网上大多是资料的解决办法是跳过跨域验证，但防跨域是一个生产中经常用到的一个技术。
django的解决办法是CSRF，这是我参考的文章:
https://blog.csdn.net/qq_41000891/article/details/82784489

在编写页面的过程中，由于同时使用了vue和django，导致模板发生冲突，默认情况下使用{{}}用的是django的模板语法，想用vue的{{}}，可以屏蔽掉django模板，代码如下

{% verbatim %}
    {{ vue }}
{% endverbatim %}

这是我参考的文章：
https://blog.csdn.net/jyfu2_12/article/details/79058819

还遇到一种情况是，我需要从页面上取数据，既然vue不推荐直接操作dom，那按照官网上的文档，使用refs，代码如下

<p hidden="true" ref="type">{{ type }}</p>

this.$refs.type.innerText;

这个方法在vue官网的：迁移——v-ef和v-ref中