Axios進行前后端互動
- 一. 修改vue存在的檔案路徑
- 二. 解決跨域問題
- 三. 渲染資料到前端
- 四. 完整代碼
- js
- html
教學視頻：
5. axios請求后臺——評論功能
6. 解決跨域問題cors——評論功能
7. 前端界面顯示——評論功能
前言：
作者：神的孩子在歌唱
這是我聽老師講課做的筆記
大家好，我叫陳運智，大家可以叫我智
Axios檔案
一. 修改vue存在的檔案路徑
將vue代碼放入到index.js檔案里
放入
在最底下引入js檔案
<!-- 引入js -->
<script src="js/index.js"></script>
看axios檔案
通過創建函式，get獲取路由，then獲取后端回傳的json資料
const app=new Vue({
el:'#app',
data() {
return {
contents: [],//所有評論資訊
baseURL: 'http://127.0.0.1:8000/',//獲取后端啟動介面
}
},
mounted() {
//自動加載資料
this.getContents();
},
methods:{
//獲取所有評論資訊
getContents :function(){
//使用Axios實作Ajax請求
axios
.get(this.baseURL+"contents/")
.then(function(response){
//請求成功后回傳執行函式
console.log(response);
})
.catch(function(error){
console.log(error);
});
},
},
})
運行會出現以下錯誤
跨域問題
二. 解決跨域問題
原因：由于ajax跨越了兩臺計算機，只要跨越計算就會受到cors policy阻止，防止跨站攻擊，本地的后端資源只能自己訪問
安裝包
pip install django-cors-headers
#添加cors配置
#設定白名單，指定的客戶端ip才可以訪問
CORS_ORIGIN_WHITELIST=('http://127.0.0.1:5500',)#輸入前端ip埠
#設定cors Cookie
CORS_ORIGIN_ALLOW_ALL=True
CORS_ALLOW_CREDENTIALS=True
'corsheaders.middleware.CorsMiddleware',
設定成功后就可以獲取后端資料庫資料了
接下來我們弄一下顯示
三. 渲染資料到前端
注意：我們后端如果獲取資料庫資料成功就會有一個code=1欄位回傳，我們可以通過這個欄位判斷是否有資料
//請求成功后回傳執行函式
if(response.data.code==1){//如果成功
//把獲取的資料給contents
this.contents=response.data.data;
}
我們這里可以找一個提示框
目前代碼
可是這樣還無法使用
在前端界面表格地方參考contents
重繪界面發現還無法顯示，這是為什么呢？
需要將this賦值給that
let that = this
為什么要這樣子賦值：axios在異步請求后會讓this變成undefined，所以就不指向app這個物件了，所以在contents里的賦值操作都沒用，this是一個重要的標簽，它指向的是vue的這個app的物件
解決：在執行axios前，把this指向的地址給保存下來
通過上面操作，表格資料就可以從資料庫里面取出來重繪展示了
四. 完整代碼
js
html
效果
本人博客：https://blog.csdn.net/weixin_46654114
轉載說明：跟我說明，務必注明來源，附帶本人博客連接，
請給我點個贊鼓勵我吧
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/286604.html
標籤：python