目錄
路由重定向
倉庫介紹
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>