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>