這是工作中的一個練手項目角溃，總結一下得失，因為水平有限篮撑，不保證使用的術語和實現(xiàn)方法是正確的，如果有讀者發(fā)現(xiàn)問題匆瓜，希望能幫忙指出赢笨，這里表示感謝
本篇文章不展示完整的代碼未蝌，不適用于初學者學習，但遇到的問題可以借鑒
正文開始
- 這個項目后端使用了djang茧妒，由于不需要對數(shù)據庫進行操作萧吠，實際上只用到了視圖(views)系統(tǒng)
- 前端使用了Element ui,而vue則直接采用了聲明式渲染（這里埋下了一個大坑）
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
聲明式渲染示例
- 發(fā)送請求使用了axios，但是頁面跳轉則通過django的TemplateResponse()函數(shù)實現(xiàn)桐筏，所以并沒有前后端分離
// 發(fā)送請求
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;
}
這里發(fā)送請求后纸型，返回了403錯誤，可以看到我的請求地址是本地"127.0.0.1"梅忌，查找資料后發(fā)現(xiàn)使用axios后會出現(xiàn)跨域請求問題狰腌，網上大多是資料的解決辦法是跳過跨域驗證，但防跨域是一個生產中經常用到的一個技術牧氮。
django的解決辦法是CSRF琼腔，這是我參考的文章:
https://blog.csdn.net/qq_41000891/article/details/82784489
在編寫頁面的過程中，由于同時使用了vue和django踱葛，導致模板發(fā)生沖突丹莲，默認情況下使用{{}}用的是django的模板語法，想用vue的{{}}尸诽，可以屏蔽掉django模板甥材，代碼如下
{% verbatim %}
{{ vue }}
{% endverbatim %}
這是我參考的文章：
https://blog.csdn.net/jyfu2_12/article/details/79058819
還遇到一種情況是，我需要從頁面上取數(shù)據性含，既然vue不推薦直接操作dom擂达，那按照官網上的文檔，使用refs胶滋，代碼如下
<p hidden="true" ref="type">{{ type }}</p>
this.$refs.type.innerText;
這個方法在vue官網的：遷移——v-ef和v-ref中
