这是工作中的一个练手项目，总结一下得失，因为水平有限，不保证使用的术语和实现方法是正确的，如果有读者发现问题，希望能帮忙指出，这里表示感谢
本篇文章不展示完整的代码，不适用于初学者学习，但遇到的问题可以借鉴
正文开始
- 这个项目后端使用了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中
