這是工作中的一個練手項目角溃,總結一下得失,因為水平有限篮撑,不保證使用的術語和實現(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中