Vue的第三方插件
一、vuex插件
可以完成任意组件间信息交互（移动端）
'''
1.vuex是实现任何组件间的信息交互的，可以理解为全局的一个单例，为任何一个组件共享vue仓库里的数据。
2.在任何一个组件的逻辑里，都可以访问仓库
-(i) 先在仓库里(store/index.js)定义变量，用来存储共享数据
state:{
info:'共享数据的初始值'
}
- 组件逻辑中获取仓库值
let 变量 = this.$store.state.info
- 在组件逻辑中更新仓库值
this.$store.state.info = '新值'
注:vuex通常运用在移动开发项目，pc端项目可以用localStorage和localSession数据库来替换
原因:vuex中的数据，会在页面刷新后，重置store/index.js配置的默认值。
'''
二、前端存储数据大汇总
'''
1.cookie:以字符串形式存储，数据有过期时间（expire_time）
2.localStorage：以对象形式存储，数据可以永久保存
3.sessionStorage：以对象形式存储，生命周期同所属标签（页面不关闭，数据就有效）
4.vuex(store)：以对象形式存储，当页面刷新数据就重置(移动端不能刷新，所以只有应用关闭重新打开时才会重置)
'''
三、前后台交互方式*************
'''
1.form表单提交数据
- get|post 两种请求方式，get请求包含直接在浏览器url回车后发送请求
- 该方式的特点是一定会发生页面的跳转(刷新页面叫本业跳转)后台来决定页面的路由。
2.ajax异步方式
- get | post | patch | put | delete 等请求方式，请求的目的都是异步获取后台的数据
- 该方式的特点是不会刷新页面，只是得到新的数据，前台自己完成页面的局部刷新、整体刷新、页面跳转，前台决定页面路由。
注意:
1.前后台不分离项目，采用form表单请求，可以完成页面跳转，同步ajax请求完成页面局部刷新
2.前后台分离项目，不采用form表单请求，页面刷新、页面跳转的请求，都是由ajax完成，只不过页面跳转，后台对应的是跳转的目标url，前台再完成自己跳转。
3.前后台分离项目，前台也会出现大量的form表单，但是form表单的提交按钮，走的不是form表单的submit提交，而是ajax请求。
'''
四、axios插件
axios插件用于完成前后台ajax交互
'''
1.安装：命令行cd到前端项目根目录下
cnpm install axios
2.项目配置：main.js
import axios from 'axios'
Vue.prototype.$axios = axios;
3.在任何一个组件的逻辑中，都可以访问this.$axios()
beforeMount(){
this.$axious({
url:this.$settings.base_url + '/test/',
method:'delete',
})
}
'''
同源策略-跨域问题
'''
1.django默认是同源策略，所以前后台分离的项目，访问django会出现CORS跨域问题的报错。
2.什么叫跨域
- ip不同：前后台（两个服务器）不在一台主机上运行
- port不同：前后台是相互独立的，运行在不同的端口智商
- 协议不同：http和https之间也同样是跨域问题
3.解决跨域
- 伪装：将前台请求伪装成后台自己对自己发送请求
- 后台主动允许跨域：后台配置允许跨域即可（在响应头中处理）
4.Django解决跨域问题
'''
前后台分离项目交互流程
"""
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: {}, // 数据包参数
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数据)
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框架是提供了三种类型的数据包参数解析
"""