vue倉庫、元件間通訊、前後臺數據互動、前端儲存資料大彙總
阿新 • • 發佈：2020-02-16
目錄
- 路由重定向
- 倉庫介紹
- vuex外掛：可以完成任意元件間資訊互動（移動端)
- 前端儲存資料大彙總
- 前後臺互動方式（重點）
- 前後臺數據互動
- axios外掛：完成前後臺ajax互動的
- 同源策略 - 前後端跨域問題
- 前後臺分離專案互動流程
- 前臺傳資料到後臺，非同步請求細節
路由重定向
倉庫介紹
vuex外掛：可以完成任意元件間資訊互動（移動端)
大白話原理：倉庫充當第三方，其他元件都從第三方倉庫獲取info，那麼獲取的資料都是一份。類似全域性單例 在其他元件中，用元件鉤子created，把倉庫中的info取出來，然後再賦值給本元件的變數。 再監聽，如果本元件的變數發生變化，返回去把倉庫的info賦值。 缺點： 頁面重新整理，回到初始值info。但是再手機移動端時，頁面是不能重新整理重新載入的。比如微信，只能重新向後臺 傳送請求，不能刷新系統重新載入一邊 總結：vuex通常運用在開發移動端專案，pc端專案可以用localStorege和localStorege資料庫來替換 原因：vuex中的資料，會在頁面重新整理後，重置到store/index.js配置的預設值 這樣就實現了元件間的互通。文字不好理解看下圖案例：
案例：
Home.vue與FreeCourse.vue一致：
倉庫程式碼：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
export default new Vuex.Store({
state: {
info:'這是初始值'
},
mutations: {},
actions: {},
modules: {}
})
Home程式碼：
<template> <div class="home"> <Nav/> <h1>主頁</h1> <input type="text" v-model="info"> <p>{{info}}</p> </div> </template> <script> import Nav from '../components/Nav' export default { data(){ return{ info:'' } }, created(){ // this.info = this.$store.state.info; this.info = localStorage.info; //PC端資料庫，資料永久的 }, watch:{ info(){ //this.$store.state.info = this.info; localStorage.info = this.info; //更新資料庫 } }, components:{ Nav, } } </script>
FreeCourse程式碼：
<template> <div class="free-course"> <Nav/> <h1>免費課</h1> <input type="text" v-model="info"> <p>{{info}}</p> </div> </template> <script> import Nav from '../components/Nav' export default { name: "FreeCourse", data(){ return{ info:'' } }, created(){ //this.info = this.$store.state.info; this.info = localStorage.info; //PC端資料庫，資料永久的 }, watch:{ info(){ //this.$store.state.info = this.info; localStorage.info = this.info; //更新資料庫 } }, components:{ Nav } } </script> <style scoped> </style>
前端儲存資料大彙總
"""
1）cookie：以字串形式儲存，資料有過期時間（過期時間到，資料失效嗎，否則永遠有效）
2）localStorage：以物件形式儲存，資料永久儲存
3）sessionStorage：以物件形式儲存，生命週期同所屬頁面標籤（頁面不關閉，資料就有效）
4）vuex(store)：倉庫，以物件形式儲存，當頁面重新整理資料就重置（移動端不能重新整理，所以只有應用大退才會重置）
"""前後臺互動方式（重點）
"""
1）form表單方式
i）get | post 兩種請求方式，get請求包含直接在瀏覽器中輸入url回車後傳送的請求
ii）該方式的特點是一定會發生頁面的跳轉（重新整理頁面叫本頁跳轉） - 後臺決定頁面路由
2）ajax非同步方式
i）get | post | patch | put | delete 等眾多請求方式，請求的目的都是非同步獲取後臺的資料
ii）該方式的特點是不會重新整理頁面，只是得到新的資料，前臺自己完成頁面的區域性重新整理、整體重新整理、頁面跳轉 - 前臺決定頁面路由
注：
i）前後臺不分離專案，採用form表單請求，可以完成頁面跳轉，同步ajax非同步請求完成頁面區域性重新整理
ii）前後臺分離專案，不採用form表單請求，頁面重新整理、頁面跳轉的請求，都是由ajax完成，只不過頁面跳轉，後臺相應的是跳轉的目標url，前臺再自己完成跳轉
iii）前後臺分離專案，前臺也會出現大量的form表單，但是form表單的提交按鈕，走的不是form表單的submit提交，而是ajax請求
"""前後臺數據互動
axios外掛：完成前後臺ajax互動的
"""
1）安裝：在前端專案根目錄下的終端
cnpm install axios
2）專案配置：main.js
import axios from 'axios'
Vue.prototype.$axios = axios;
3）在任何一個元件的邏輯中，都可以訪問 this.$axios()
beforeMount() {
// 請求後臺
this.$axios({
url: this.$settings.base_url + '/test/',
method: 'delete',
})
}
"""同源策略 - 前後端跨域問題
"""
一、django預設是同源策略，所以前後臺分離專案，訪問django會出現CORS跨域問題的報錯
二、什麼叫跨域
i）ip不同：前後臺（兩個伺服器）不在一臺主機上執行的
ii）port不同：前後臺（兩個伺服器）是相互獨立的，執行在不同的埠之上
iii）協議不同：http與https之間也同樣是跨域問題
注：三者滿足一個，就是跨域
三、解決跨域
i）偽裝：將前臺請求偽裝成後臺自己對自己發生的請求
ii）後臺主動允許跨域：後臺配置允許跨域即可（在響應頭中處理）
四、Django解決跨域
i）安裝模組：
pip install django-cors-headers
ii）註冊app：
INSTALLED_APPS = [
...
'corsheaders'
]
iii）新增中介軟體
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware'
]
iv）允許跨域
CORS_ORIGIN_ALLOW_ALL = True
"""前後臺分離專案互動流程
"""
1）啟動前後臺專案
2）前臺配置頁面路由，渲染前臺頁面 | 後臺配置資料路由，響應資料（處理好跨域問題）
3）前臺通過ajax請求後臺介面
i）將前臺資料提交給後臺
ii）得到後臺的響應結果
iii）根據響應結果的資料，最後完成頁面的區域性重新整理、整體重新整理、頁面跳轉
"""前臺傳資料到後臺，非同步請求細節
"""
1）vue框架用axios完成ajax非同步請求
語法：this.$axios().then().catch();
解讀：$axios()是請求邏輯 | then()是正常響應邏輯 | catch()是錯誤響應邏輯
具體語法：
this.$axios({
url: '後臺介面連結',
method: '請求方式',
params: {}, // url拼接資料，所有的請求都可以傳送該資料
data: {}, // 資料包資料，除了get請求外，都可以傳送該資料
headers: {} // 請求頭引數
}).then(response => {
// response是http狀態2xx的響應結果，響應資料是response.data
}).catch(error => {
// error是http狀態4xx、5xx的響應結果，錯誤響應物件是error.response，錯誤響應資料是error.response.data
})
2）前臺提交資料的兩種方式：
i）url拼接引數：
所有請求都擁有的提交資料的方式
該方式會將資料都在請求url後用?拼接的方式提交給後臺
提交資料只能採用url字串方式提交給後臺，資料是不安全的
axios外掛可以用params屬性攜帶url拼接引數
ii）資料包引數：
除get請求外的所有請求都擁有的提交資料的方式
該方式會將資料進行加密，打包成資料包方式提交給後臺
打包加密資料有三種方式：urlencoded(form預設的方式)、form-data(可以提交檔案)、json(提交json資料)
原生Django沒有提供所有型別的資料包資料解析規則，但是資料會在request.body中，我們可以自己手動解析
Django rest-framework框架提供了三種類型的資料包引數解析
axios外掛可以用data屬性攜帶資料包引數
"""
"""
注意項：
1）this.$axios({}).then(response => {}).catch(error => {}) 中的then和catch回撥函式，不能寫function，因為實際vue專案開發，一定會在回撥邏輯用到this語法(代表vue物件)，而在function中使用了this語法，function就不是普通函數了(可以理解為類，this就不能代表vue物件了）
2）原生django沒有提供所有型別的資料包資料解析規則，但是資料會在request.body中，可以自己解析；Django-rest-framework框架是提供了三種類型的資料包引數解析
"""method: 'post'時：
method: 'get'時：
案例：
<template>
<div class="home">
<Nav/>
<h1>主頁</h1>
<input type="text" v-model="info">
<p>{{info}}</p>
</div>
</template>
<script>
import Nav from '../components/Nav'
export default {
data(){
return{
info:''
}
},
beforeMount(){
//請求後臺
this.$axios({
url:this.$settings.base_url + '/test/',
//拼接引數，可以用params提交，也可以用?在url後直接拼接 url:this.$settings.base_url + '/test/?a=1&b=2'
method:'post',
params:{ //url拼接資料，所有的請求都可以傳送該資料
a:1,
b:2
},
//資料包引數有三種：urlencoded(form表單預設格式) | form-data(提交檔案)|json(下面這種，Django無法解析)
//原生Django沒有提供所有型別的資料包資料解析規則，但是資料會在request.body中，我們可以自己手動解析
//Django rest-framework框架時提供了三種類型的資料包引數解析
data:{ //資料包資料，除了get請求外，都可以傳送該資料
x:100,
y:200,
}
}).then((response)=>{
console.log(response.data);
this.info = response.data.name
}).catch(error=>{
console.log(error.response)
})
},
created(){
// this.info = this.$store.state.info;
this.info = localStorage.info; //PC端資料庫，資料永久的
},
watch:{
info(){
// this.$store.state.info = this.info;
localStorage.info = this.info; //更新資料庫
}
},
components:{
Nav,
}
}
</script>