vue仓库、组件间通信、前后台数据交互、前端储存数据大汇总

2019/04/10 10:10
阅读数 16

[TOC]

路由重定向

仓库介绍

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>

原文出处:https://www.cnblogs.com/guyouyin123/p/12190210.html

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部