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