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>
选择了IT，必定终身学习
