vue倉庫、組件間通訊、先後臺數據交互、前端儲存數據大彙總

時間 2020-02-17

標籤 vue 倉庫組件通訊後臺數據交互前端儲存彙總简体版

原文原文鏈接

目錄前端

路由重定向

倉庫介紹

vuex插件：能夠完成任意組件間信息交互（移動端)

大白話原理：倉庫充當第三方，其餘組件都從第三方倉庫獲取info，那麼獲取的數據都是一份。相似全局單例
    在其餘組件中，用組件鉤子created，把倉庫中的info取出來，而後再賦值給本組件的變量。
    再監聽，若是本組件的變量發生變化，返回去把倉庫的info賦值。

缺點：
    頁面刷新，回到初始值info。可是再手機移動端時，頁面是不能刷新從新加載的。好比微信，只能從新向後臺
發送請求，不能刷新系統從新加載一邊

總結：vuex一般運用在開發移動端項目，pc端項目能夠用localStorege和localStorege數據庫來替換
緣由：vuex中的數據，會在頁面刷新後，重置到store/index.js配置的默認值

    這樣就實現了組件間的互通。文字很差理解看下圖案例：

案例：vue

Home.vue與FreeCourse.vue一致：python

倉庫代碼：ios

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        info:'這是初始值'
    },
    mutations: {},
    actions: {},
    modules: {}
})

Home代碼：ajax

<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代碼：vuex

<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',
    })
}
"""

同源策略 - 先後端跨域問題

"""
1、django默認是同源策略，因此先後臺分離項目，訪問django會出現CORS跨域問題的報錯

2、什麼叫跨域
i）ip不一樣：先後臺（兩個服務器）不在一臺主機上運行的
ii）port不一樣：先後臺（兩個服務器）是相互獨立的，運行在不一樣的端口之上
iii）協議不一樣：http與https之間也一樣是跨域問題
注：三者知足一個，就是跨域

3、解決跨域
i）假裝：將前臺請求假裝成後臺本身對本身發生的請求
ii）後臺主動容許跨域：後臺配置容許跨域便可（在響應頭中處理）

4、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'時：npm

案例：django

<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>