Vuex、axios、跨域请求处理和import/export的注意问题

一、Vuex

1、介绍

vuex是一个专门为Vue.js设计的集中式状态管理架构。

对于状态，我们把它理解为在data中需要共享给其他组件使用的部分数据。

Vuex和单纯的全局对象有以下不同：

    1. Vuex 的状态存储是响应式的。当vue组件从store中读取状态的时候，

    若store中的状态发生变化，那么相应的组件也会相应的得到高效更新。

    2. 你不能直接改变store中的状态。改变store中的状态的唯一途径就是显示的

    提交(commit)mutation。这样使得我们可以方便的跟踪每一个状态的变化，

    从而让我们能够实现一些工具来帮助我们更好的了解我们的应用。

2、vuex的安装和实例化

1. 安装命令

--  npm install vuex

2. 实例化的两种方式

方式一：直接在main.js里面注册vuex的仓库实例

// main.js

import Vue from 'vue'

import App from './App'

import Vuex from 'vuex'

// 让vue实例使用Vuex

Vue.use(Vuex)

Vue.config.productionTip = false

// 实例化Vuex的仓库，store代表仓库

const store = new Vuex.Store({

    // state存放所有的公用数据

    state: {

        name : "bdyjy",

    }

});

new Vue({

  el: '#app',

  // 注册store: store

  store,

  components: { App },

  template: '<App/>'

});

方式一

方式二：为了方便维护，通常在src下面新建一个store文件夹，然后在里面新建一个index.js

// store/index.js

import Vuex from "vuex"

import Vue from "vue"

Vue.use(Vuex);

// 抛出实例化的Vuex仓库，store代表仓库

export default new Vuex.Store({

  // state存放所有的公用数据

  state: {

    name : "bdyjy",

  }

})

// main.js

import Vue from 'vue'

import App from './App'

import store from "./store/index"

Vue.config.productionTip = false

new Vue({

  el: '#app',

  // 注册store: store

  store,

  components: { App },

  template: '<App/>'

});

方式二

3、获取数据

1. state

state是保存我们data中需要共享的数据。

由于Vuex的存储是响应式的，从store实例中读取状态可以使用：this.$store.state.变量名

且应该在计算属性中返回某个状态，因为计算属性实时在监听数据，数据变化了，它立刻就能知道，

如果在data属性中返回某个状态，那么这个数据如果在后续变化了，它也不知道了，因为data在加载完成后就不会再监听这个数据

示例：在某个组件中使用

// course.vue

<template>

    <div>

      <h2>这是课程组件</h2>

      <p>我是{{name}}</p>

    </div>

</template>

<script>

    export default {

      name: "Course",

      // 使用计算属性获取仓库里面的name变量的值

      computed: {

        name: function () {

          return this.$store.state.name

        }

      }

    }

</script>

2. getters

有时候我们需要从store中的state中派生出一些状态，例如对数据进行简单的计算。

并且很多组件都需要用到此方法，我们要么复制这个函数，要么抽取到一个公共函数，多处导入。

我们vuex提供了更加方便的方法，getters 它就像计算属性一样，getters的返回值会根据它的依赖被

缓存起来，只有它的依赖发生改变时，才会重新计算。

简单地来说，getters可以对状态进行二次处理

1. // store/index.js

import Vuex from "vuex"

import Vue from "vue"

Vue.use(Vuex);

// 抛出实例化的Vuex仓库，store代表仓库

export default new Vuex.Store({

  // state存放所有的公用数据

  state: {

    name : "bdyjy",

  },

  // getters对state的值进行二次处理

  getters: {

    friend: function (state) {// 接收state作为参数

      return state.name + '的朋友是:jty'

    }

  }

})

2. // 在某个组件中使用

// course.vue

<template>

    <div>

      <h2>这是课程组件</h2>

      <p>我是{{name}}</p>

      <p>{{friend}}</p>

    </div>

</template>

<script>

    export default {

      name: "Course",

      computed: {

        name: function () {// 通过state取值

          return this.$store.state.name

        },

        friend: function () {// 通过getters取值

          return this.$store.getters.friend

        }

      }

    }

</script>

示例1

1. // store/index.js

import Vuex from "vuex"

import Vue from "vue"

Vue.use(Vuex);

// 抛出实例化的Vuex仓库，store代表仓库

export default new Vuex.Store({

  // state存放所有的公用数据

  state: {

    name : "bdyjy",

  },

  // getters对state的值进行二次处理

  getters: {

    friend: function (state) {// 接收state作为参数

      return state.name + '的朋友是:jty'

    },

    play: function (state, getters) {// 接收state和getters作为参数

      // 因为要取到friend，就要state

      return getters.friend + '一起玩'

    }

  }

})

2. // 在某个组件中使用

// course.vue

<template>

    <div>

      <h2>这是课程组件</h2>

      <p>我是{{name}}</p>

      <p>{{friend}}</p>

      <p>{{play}}</p>

    </div>

</template>

<script>

    export default {

      name: "Course",

      computed: {

        name: function () {// 通过state取值

          return this.$store.state.name

        },

        friend: function () {// 通过getters取值

          return this.$store.getters.friend

        },

        play: function () {

          return this.$store.getters.play

        }

      }

    }

</script>

示例2

4、更改store中的状态

1. 回想一下非父子之间的组件之间是如何进行通信的

-- 新建一个新的vue实例当做两个组件之间通信的桥梁

-- 一个组件使用 $emit 向这个vue实例提交事件

-- 另一个组件在加载完成后这个vue实例通过钩子函数mounted 使用 $on 监听$emit提交的事件然后处理

2. vuex更改store中的状态类似于上面的步骤

-- 通过this.$store.commit('事件名称', '数据')提交事件到这个vuex仓库

-- 在Vuex.Store这个实例里面通过mutations接收提交过来的事件

-- mutations里面的事件它会接收state为第一个参数，后面接收其他参数

3.示例

<template>

  <div>

    <h2>这是学位课程信息</h2>

    <button @click="my_click">点击展示学位信息</button>

    <h3>{{degree_info}}</h3>

  </div>

</template>

<script>

  export default {

    name: "DegreeCourse",

    computed: {

      degree_info: function () {

        return this.$store.state.degree_info

      }

    },

    methods: {

      // 提交事件到store

      my_click: function () {

        this.$store.commit('degree_info', '博士')

      }

    }

  }

</script>

某个组件

import Vuex from "vuex"

import Vue from "vue"

Vue.use(Vuex);

// 抛出实例化的Vuex仓库，store代表仓库

export default new Vuex.Store({

  state: {

    degree_info: ''

  },

  // commit上来的事件在这里进行处理

  mutations: {

    degree_info: function (state, data) {

      state.degree_info = data

    }

  }

})

store/index.js

二、axios的简单使用

1、安装

使用npm安装axios

-- npm install axios

axios是基于promise用于浏览器和node.js的http客户端

2、axios基本参数

url:请求接口地址

method:请求方式

data:请求数据

headers:请求头

then(function(response){}):请求成功后的回调函数

catch(function(error){})请求失败后的回调函数

1.发送ajax请求

$.ajax({})

参数：

    url: 提交到哪个URL地址

    type: 提交的方式

    data: {你要发送的数据}

    success: function (res) {

        请求发送过去，被正常响应后执行的函数，res是后端返回来的数据

    }

    error: function (err) {

        请求发送过去，响应失败时执行的函数

    }

2.示例

$.ajax({

            url: '/regirest/',

            type: 'POST',

            data: {

                    username: 'xxx',

            },

            success: function (res) {

                console.log(res)

            }

        })

对比ajax

3、几种请求方法

1. get请求

// 携带参数的get请求

axios.get('/user?ID=12345')

  .then(function (response) {

    console.log(response);

  })

  .catch(function (error) {

    console.log(error);

  });

方式一

// 上面的请求可以这样做

axios.get('/user', {

    params: {

      ID: 12345

    }

  })

  .then(function (response) {

    console.log(response);

  })

  .catch(function (error) {

    console.log(error);

  });

方式二

2. post请求

axios.post('/user', {

    username: 'xiaoming',

    password: '123abcd'

  })

  .then(function (response) {

    console.log(response);

  })

  .catch(function (error) {

    console.log(error);

  });

post请求

3. 执行多个并发请求

function getUserAccount() {

  return axios.get('/user/12345');

}

function getUserPermissions() {

  return axios.get('/user/12345/permissions');

}

axios.all([getUserAccount(), getUserPermissions()])

  .then().catch();

并发请求

4. axios.request(推荐使用这种)

axios.request({

  url: '/user/12345',

  method: 'post',  // 请求方式:get、post、delete等等

  data: {

    username: 'xiaoming',

    password: '123abcd'

  }

}).then(function (response) {

        console.log(response);

}).catch(function (error) {

        console.log(error)

});

axios.request

4、示例

1. 把axios设置成Vue对象属性

下载好axios后，在需要使用的地方导入axios即可直接使用，axios类似于ajax，用于向后端进行数据传输

但是axios是不能注册到Vue实例里面，因此不能通过this.$axios进行使用的，因为它不是Vue实例的属性，

但是我们就是希望能够通过this.$axios对它进行使用呢，可以给Vue的原型链prototype增加一个$axios属性，

然后所有的Vue对象都可以通过this.$axios对它进行使用

// main.js

import axios from "axios"

Vue.prototype.$axios = axios

2. Vue代码

<script>

  export default {

    name: "DegreeCourse",

    mounted(){

      this.$axios.request({

        url: "http://127.0.0.1:8000/test/",  // 后端地址

        method: "get"  // 提交方式

      }).then(function (response) {// then是成功后的回调函数

        console.log(response);

      }).catch(function (error) {// catch是失败后的回调函数

        console.log(error);

      })

    }

  }

</script>

3. 浏览器的同源策略

当这个组件加载完后，会自动向后端http://127.0.0.1:8000/test/ 发送 get 请求，

但是这样发送的请求是属于跨域请求，由于浏览器的同源策略，服务器给我们返回的信息浏览器会给我们拦截下来，

所以如果后端返回消息的时候不进行一些处理的话，前端这里是收不到消息的并且会报错。(前后端的域名和端口只要其中一个不一样，就是跨域)，

跨域的ajax请求就会被浏览器拦截(axios发送的也是ajax请求)。

那怎么处理？继续往下看..

三、CORS跨域请求介绍

1、区分简单请求和复杂请求

HTTP方法是下列方法之一

　　HEAD， GET，POST

HTTP头信息不超出以下几种字段

　　Accept， Accept-Language， Content-Language， Last-Event-ID

　　Content-Type只能是下列类型中的一个

　　　　application/x-www-form-urlencoded

　　　　multipart/form-data

　　　　text/plain

任何一个不满足上述要求的请求，即会被认为是复杂请求

复杂请求会先发出一个预请求，我们也叫预检，OPTIONS请求

也就是说，HEAD， GET，POST这三个请求，当它们满足上面的头信息时，它们就是简单请求，否则都是复杂请求，

比如一个get请求，但是它请求头的Content-Type是application/json类型，那么它也是复杂请求。

复杂请求会先发出一个OPTIONS预请求。

2、请求头

  Accept

    我能解析什么数据类型

  ContentType

    我给你的是什么数据类型

  数据类型

    application/x-www-form-urlencoded   --> form表单的默认编码方式，不能上传文件

    multipart/form-data                 --> 二进制的形式，能上传文件

    text/plain                          --> 文本

    application/json                    --> json格式

    html

    xml

四、跨域请求处理--jsonp

1、 原理(现在很少有人使用这种方式处理跨域请求)

我们可以发现，我们使用CDN引进任何链接的时候，引进了就可以使用了，但是，CDN的链接对于我们来说也是跨域，为什么不会报错呢？

原因是对于script、link或img这些标签，他们引入CDN只是发送get请求获取资源，浏览器认为这没有风险，所以可以正常进行请求，

而ajax可以发送任何类型的请求，风险太大，浏览器就自动把它们拦截了(浏览器只阻止表单以及ajax请求)。

比如script标签src想某个CDN发送get请求，拿到的所有资源就会存在script标签内，你就可以在script标签内使用这些内容。

2、示例

// 某前端页面代码

<script>

    // 定义一个函数

    function handlerResponse(data) {

        console.log(data)

    }

</script>

// 向后端发送请求，拿到handlerResponse函数并执行

<script src="http://127.0.0.1:8000/test/"></script>

某前端页面代码

// 某Django后端代码

class TestView(views.View):

    def get(self, request):

        # 返回一个handlerResponse("ok")字符串

        return HttpResponse('handlerResponse("ok")')

某Django后端代码

五、CORS跨域请求之简单请求处理

1、 get跨域简单请求

1. 报错原因

Access-Control-Allow-Origin --> 前端这个域不被允许接收后端的数据

2. 后端视图函数

class TestView(views.View):

    def get(self, request):

        return HttpResponse('嘿嘿')

3. 后端中间件

from django.utils.deprecation import MiddlewareMixin

class MyCores(MiddlewareMixin):

    def process_response(self, request, response):

        # 给这个响应添加响应头

        # 告诉浏览器我这个后端允许响应头指定的域拿到我的响应数据(*代表所有域)

        response['Access-Control-Allow-Origin'] = '*'

        # http://localhost:8080代表只能让这个域拿到我的数据

        # response['Access-Control-Allow-Origin'] = 'http://localhost:8080'

        return response

4. 前端Vue

<script>

  export default {

    name: "DegreeCourse",

    mounted(){

      this.$axios.request({

        url: "http://127.0.0.1:8000/test/",  // 后端地址

        method: "get"  // get简单请求

        // method: "post"  // post简单请求

      }).then(function (response) {// then是成功后的回调函数

        console.log(response); // 接收到后端response的数据是一个对象

      }).catch(function (error) {// catch是失败后的回调函数

        console.log(error);

      })

    }

  }

</script>

2、 post跨域简单请求

注意：前后端分离的项目没办法提交csrf，有些框架是可以默认过滤跳过这个验证，现在的话，我们先在后端把csrf中间件注释掉

代码跟上面一样，只是在前端把method的提交方式改成post即可

六、CORS跨域请求之复杂请求处理

1、delete跨域复杂请求

1. 报错原因

Access-Control-Allow-Methods --> 这个请求方法不被允许

2. 后端视图函数

class TestView(views.View):

    def delete(self, request):

        return HttpResponse("返回DELETE数据")

3. 后端中间件

class MyCores(MiddlewareMixin):

    def process_response(self, request, response):

        # 给这个响应添加响应头

        # 告诉浏览器我这个后端允许响应头指定的域拿到我的响应数据(*代表所有域)

        response['Access-Control-Allow-Origin'] = '*'

        # http://localhost:8080代表只能让这个域拿到我的数据

        # response['Access-Control-Allow-Origin'] = 'http://localhost:8080'

        # 如果是复杂请求，会先发送OPTIONS预检

        if request.method == 'OPTIONS':

            # 如果是复杂请求的方法不被允许，那么就给告诉浏览器我允许这个复杂请求

            response["Access-Control-Allow-Methods"] = "DELETE"

        return response

4. 前端Vue

<script>

  export default {

    name: "DegreeCourse",

    mounted(){

      this.$axios.request({

        url: "http://127.0.0.1:8000/test/",  // 后端地址

        method: 'delete' // delete复杂请求

      }).then(function (response) {// then是成功后的回调函数

        console.log(response); // 接收到后端response的数据是一个对象

      }).catch(function (error) {// catch是失败后的回调函数

        console.log(error);

      });

    }

  }

</script>

2、post发送复杂请求

1. 报错原因

Access-Control-Allow-Headers --> 这个请求头的数据类型不被允许

2. 后端视图函数

class TestView(views.View):

    def post(self, request):

        return HttpResponse("返回POST数据")

3. 后端中间件

class MyCores(MiddlewareMixin):

    def process_response(self, request, response):

        # 给这个响应添加响应头

        # 告诉浏览器我这个后端允许响应头指定的域拿到我的响应数据(*代表所有域)

        response['Access-Control-Allow-Origin'] = '*'

        # http://localhost:8080代表只能让这个域拿到我的数据

        # response['Access-Control-Allow-Origin'] = 'http://localhost:8080'

        # 如果是复杂请求，会先发送OPTIONS预检

        if request.method == 'OPTIONS':

            # 如果是复杂请求的方法不被允许，那么就给告诉浏览器我允许这个复杂请求

            response["Access-Control-Allow-Methods"] = "DELETE"

            # 告诉浏览器这个请求头的数据类型我是允许的

            response["Access-Control-Allow-Headers"] = "Content-Type"

        return response

4. 前端Vue

<script>

  export default {

    name: "DegreeCourse",

    mounted(){

      this.$axios.request({

        url: "http://127.0.0.1:8000/test/",  // 后端地址

        method: 'post', // post发送复杂请求

        contentType: "application/json",

        data: {

          "author": "狗屎"

        }

      }).then(function (response) {// then是成功后的回调函数

        console.log(response); // 接收到后端response的数据是一个对象

      }).catch(function (error) {// catch是失败后的回调函数

        console.log(error);

      })

    }

  }

</script>

3、总结

-- 复杂请求什么不被允许，那么我们就在中间件给它设置成是允许的即可

-- 前端拿到的响应数据是一个对象，具体的值存在这个对象的data属性里面，取值：响应对象.data

-- 响应对象还有其他数据：

    config: {...}

    data: "后端返回的具体数据"

    headers: {content-type: "text/html; charset=utf-8"}

    request: XMLHttpRequest {…}

    status: 200

    statusText: "OK"

七、VUE中import 、export的注意事项

1、导包的问题

1. import引入一个依赖包，不需要相对路径

示例：import axios from 'axios'; 

2. import 引入一个自己写的js文件，是需要相对路径的

import AppService from './appService';

2、export import注意事项

"""

import什么情况下，要用{}的方式引入，

什么情况下，只需要一个变量就行。

"""

1. 使用export抛出的变量需要用{}进行import引入

# a.js

let name = "xiaoming";

let age = 18;

export {name, age}

# b.js

import {name, age} from "./a.js"

2. 使用export default抛出的变量，只需要自己起一个名字就行

# a.js

var obj = { name: '狗明' };

export default obj; 

# b.js

import aaa from './a.js';

console.log(aaa.name);  // '狗明'

3. 注意

一个js文件中，只能有一个export default，但是可以有多个export

Vuex、axios、跨域请求处理和import/export的注意问题的相关教程结束。