1. 程式人生 > 其它 >vue倉庫、元件間通訊、前後臺數據互動、前端儲存資料大彙總

vue倉庫、元件間通訊、前後臺數據互動、前端儲存資料大彙總

路由重定向

倉庫介紹

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>