Vue2 —— 学习（九）

一、全局事件总线

（一）全局总线介绍

关系图

对图中的中间商 x 的要求

1.所有组件都能看到

2.有 $on $off $emit

（二）案例

发送方 student

接收方

二、消息订阅和发布

（一）介绍

（二）使用消息订阅

（三）案例

发送方语法

接收方语法

三、todoList 编辑功能

（一）MyItem 文件内容

（二）App 文件内容

（三）$nextTick(function(){})

四、过度与动画

（一）用css动画写

（二）用过渡写

（三）设置多个标签动画

（四）使用成型的动画库

（五）总结

五、解决 ajax 请求跨域的问题

（一）复习

（二）跨域问题描述

（三）跨域解决办法

1.cors

2.jsonp

3.代理服务器

介绍

构建代理服务器

方式一简单的代理服务器

方式二高级代理

（四）github 搜索案例

1.发送按钮组件

2.列表组件

3.app 组件

一、全局事件总线

（一）全局总线介绍

这是程序员们的经验

可以实现任意组件间的通信

关系图

就是使用自定义事件的方式来实现通讯

在接收方的身上经过 x 绑定自定义事件然后传数据的人经过 x 来触发这个事件并传递数据回调函数在接收方那里就能把发送方的数据发送过去

对图中的中间商 x 的要求

1.所有组件都能看到

x 得放到 vue 的原型对象上，就是 Vue.prototype.x = {a:1,b:2}

我们起名不叫 x 叫 $bus 为了迎合 Vue 的语法规则自己起的名只是一个傀儡

写在 main.js 入口函数里面

安装全局总线

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  render: h => h(App),
  beforeCreate() {
    Vue.prototype.$bus = this
  }
})

2.有 $on $off $emit

这三个属性都在 Vue 的原型对象上

（二）案例

发送方 student

   <button @click="sendStudentName">把学生名给school</button>

使用 emit 触发我们绑定的事件然后后面传入我们想传的数据

 methods: {
    sendStudentName(){
      this.$bus.$emit('hello',666)
    }
  },

接收方

最好一挂载就绑定所以写在生命周期钩子 mounted 里面

 mounted(){
    this.$bus.$on('hello',(data)=>{
      console.log('我是 school 组件',data)
    })
  }

最好在后面加上一句这个

beforeDestroy(){
    this.$bus.$off('hello')
  }

二、消息订阅和发布

（一）介绍

消息订阅，就是绑定我们能接收消息的名字以后有人发送该名字的消息我们能调用我们内部的函数接收到

发布消息，就是发布的内容

（二）使用消息订阅

原生的 js 没有消息订阅的功能，所以我们要下载第三方的库

我们使用 pubsub.js 库进行 sub 是 subscribe 订阅的意思 pub 就是 publish 发布的意思

先下载库然后在发送消息接收消息的组件中都要引入这个库语法如下

import pubsub from 'pubsub-js'

（三）案例

发送方语法

点击按钮发送 hello 消息内容是 666

   <button @click="sendStudentName">把学生名给school</button>

methods: {
    sendStudentName(){
      // this.x.$emit('hello',666)
      pubsub.publish('hello',666)
    }
  },

接收方语法

接收名字为 hello 的消息并且执行回调函数

回调函数内部有两个参数第一个是消息名第二个是数据

最好写成箭头函数否则 this 的指向会出问题

mounted(){
    this.pid = pubsub.subscribe('hello',(message,data)=>{
      console.log('有人发布了hello 消息 回调执行了',message,data)
    })
  },

最后加上一句这个

beforeDestroy(){
    // this.$bus.$off('hello')
    pubsub.unsubscribe('this.pubid')
  }

三、todoList 编辑功能

（一）MyItem 文件内容

在 Item 中先写一个文本框然后和前面的 span 用 v-show 方式用里面的 todo.isEdit 数据来决定显示哪一个数据

      <span v-show="!todo.isEdit"> {{ todo.title }}</span>

 <input
        v-show="todo.isEdit"
        type="text"
        :value="todo.title"
        @blur="handleBlur(todo,$event)"
        ref="inputTitle"
      />

用一个按钮来触发编辑，里面调用我们编辑的方法 handleEdit 并把 todo 传进去

<button v-show="!todo.isEdit" class="btn btn-edit" @click="handleEdit(todo)">编辑</button>

handleEdit 函数内容我们要添加 isEdit 属性先判断一下原先存不存在这个属性如果存在直接修改这个属性值即可，如果没有我们再添加

用 $set 方法添加

 handleEdit(todo) {
      if (todo.hasOwnProperty("isEdit")) {
        todo.isEdit = true;
      } else {
        this.$set(todo, "isEdit", true);
      }
    },

当光标失去焦点时我们改变数据，通过全局总线传数据

handleBlur(todo,e) {
      todo.isEdit = false;
      if(!e.target.value.trim()) return alert('输入不能为空')
      this.$bus.$emit('updateTodo',todo.id,e.target.value)
    },

（二）App 文件内容

在 app 中绑定事件然后写回调函数

this.$bus.$on("updateTodo", this.updateTodo);

回调函数修改显示的数据

updateTodo(id, title) {
      this.todos.forEach((todo) => {
        if (todo.id === id) todo.title = title;
      });
    },

我们想点击编辑时就获得焦点修改一下handle 函数

handleEdit(todo) {
      if (todo.hasOwnProperty("isEdit")) {
        todo.isEdit = true;
      } else {
        this.$set(todo, "isEdit", true);
      }
      setTimeout(() => {
        this.$refs.inputTitle.focus();
      },200);
    },

（三）$nextTick(function(){})

但是开发中更常用 $nextTick(function(){}) 下一次更新 dom 模板之后才执行

语法：this.$nextTick(回调函数)

这样更改数据模板重新解析 dom 元素，解析完毕调用函数获得焦点

handleEdit(todo) {
      if (todo.hasOwnProperty("isEdit")) {
        todo.isEdit = true;
      } else {
        this.$set(todo, "isEdit", true);
      }
      // setTimeout(() => {
      //   this.$refs.inputTitle.focus();
      // },200);
      this.$nextTick(function(){
        this.$refs.inputTitle.focus();
      })
    },

四、过度与动画

transition 标签只能设置一个元素的动画里面不能放两个标签如果想给多个元素设置动画，就用transition-group

（一）用css动画写

先在 css 中写一个动画效果进来和出来两个效果，分别写在 come 和 go 里面

.come {
  animation: hahaha 1s;
}
.go {
  animation: hahaha 1s reverse;
}
@keyframes hahaha {
  from {
    transform: translateX(-100%);
  }
  to {
    trnasform: translateX(0px);
  }
}

然后标签中调用动画效果

    <h1 v-show="isShow" class="go">你好啊！</h1>

我们可以通过 vue 来切换我们要使用的动画不用自己写判断什么时候调用什么动画

这一种过渡的效果我们就能通过 transition（过渡）标签来设置

在合适的时候加上特定的类名就是特定的动画 come 就是来 go 就是去

 <transition name="hello" :appear="true">
      <h1 v-show="isShow">你好啊！</h1>
    </transition>

transition 还能命名但是css 中的效果对应也得修改后面的 appear 属性能让动画一开始就出来

前面的名字得改成一样的

.hello-enter-active {
  animation: hahaha 1s;
}
.hello-leave-active {
  animation: hahaha 1s reverse;
}

（二）用过渡写

.hello-enter 是进入的起点

hello-enter-to 是进入的终点

hello-leave 是退出的起点

hello-leave-to 是退出的终点

hello-enter-active 是进入过渡的效果

hello-leave- active 是离开的过渡效果

模板的内容和前面一样

<button @click="isShow = !isShow">显示隐藏</button>
    <transition name="hello" :appear="true">
      <h1  v-show="isShow"> 你好啊！</h1>
    </transition>

进入的起点

.hello-enter{
    transform: translateX(-100%);
}

进入的终点

.hello-leave-to{
    transform: translateX(0);
}

离开的起点离开的终点

.hello-leave{
  transform: translateX(0);
}
.hello-leave-to{
    transform: translateX(-100%);
}

因为离开的起点和离开的终点和前面开始一致我们直接合在一块儿写，效果是一样的并且能简化代码的结构

.hello-enter, .hello-leave-to{
  transform: translateX(-100%);
}
.hello-enter-to, .hello-leave{
    transform: translateX(0);
}

过渡的效果可以单独写在

.hello-enter-active,
.hello-leave-active {
  transition: 0.5s;
}

（三）设置多个标签动画

transition-group

用到 transition-group 时里面的标签需要给 key 值

<template>
  <div>
    <button @click="isShow = !isShow">显示隐藏</button>
    <transition-group name="hello" :appear="true">
      <h1 v-show="isShow" key="1">你好啊！</h1>
      <h1 v-show="isShow" key="2">你好啊！</h1>
    </transition-group>
  </div>
</template>

（四）使用成型的动画库

先用 npm 安装这个包 Animate.css

然后引入 import

import 'animate.css'

然后把网站中写好的类名放到 name 中

然后再多加一个属性

enter-active-class=“” 进入的动画

leave-active-class=“" 退出的动画

后面引号的内容直接去网站引入就行

 <transition-group
      name="animate__animated animate__bounce"
      :appear="true"
      enter-active-class="animate__swing"
      leave-active-class="animate__backOutRight"
    >

（五）总结

当我们操纵 dom 元素时在合适的时候给元素添加样式类名

进入退出都有三个状态

进入的起点 v-enter

进入的终点 v-enter-to

进入的总过程 v-enter-active

写法

如果用动画写直接用 v-enter-active v-leave-active

如果不用的话就得用 v-enter v-enter-to v-leave v-leave-to

transition 包含要过渡的元素，得配置 name 属性

多个元素时得用 <transition-group> 并且里面的每一个元素都得有 key 值

五、解决 ajax 请求跨域的问题

vue-cli 开启 8080 服务器支持脚手架的运行

（一）复习

复习：常用的发送 ajax 请求的方式有什么

1.xhr new （鼻祖太老了不用他）

XMLHttpRequest()

xhr.open() 配置请求信息

xhr.send() 真正发出去的请求

2.jQuery

因为 xhr 太古老了我们需要有人封装一下里面的方法可以是公司的内部人员

也有现成的封装就是 jQuery 封装过 xhr

$.get $post

3.axios

也是对 xhr 的封装

4.fetch

和 xhr 是平级的都是在window 的内置对象上能直接使用

兼容性较差，ie 完全用不了

所以建议使用 axios

（二）跨域问题描述

先引入 axios

import axios from ‘axios’

然后写一个向服务器发送发送 ajax 请求的代码

<template>
  <div>
   <button  @click="getStudents">获得学生信息</button>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: "app",
 methods:{
  getStudents(){
    axios.get('http://localhost:5000/students').then(
      response => {
        console.log('请求成功了',response.data)
      },
      error => {
        console.log('请求失败',error.message)
      }
    )
  }
 }
};
</script>

首先先开启我们的资源服务器端口为 5000

然后启动 vue 脚手架，点击按钮发送 ajax 请求

发现报错

发现关键词 cors 还有那个一长串的属性这是我们之前学的 ajax 同源策略的知识，现在我们的网站是 8080 端口而且是 http 协议主机名是 localhost

但是资源服务器也是 http 协议主机名也是 localhost 但是端口号是 5000 和8080 不同不符合同源策略，所以报错必须三个都相同才是同源

浏览器成功发送请求了

资源服务器也接收服务器的请求了

我们服务器也接收到返回的资源了

但是我们的网站发现端口号不太对就不把资源给我们了，但是我们浏览器里面现在手里有资源

（三）跨域解决办法

1.cors

就是写服务器的人在响应的时候加几个特殊的响应头

我们的网站成功发送请求了

资源服务器也接收请求了

我们网站也接收到返回的资源了并且这个资源携带着特殊的响应头我们网站一接收发现这个响应头就明白我们要这个数据就把数据给我们了实现了跨域

特点：能解决跨域但是容易任何人都能访问我们的资源服务器获得资源不太好

需要后端写服务器的人员帮忙

2.jsonp

借助了script 标签里面的 src 属性引入外部资源的时候不受同源策略的限制

使用的非常少只能解决 get 请求的跨域问题

需要前后端一块儿帮忙

3.代理服务器

介绍

代理服务器和我们网站所处在的位置相同

我们想向资源服务器请求资源我们先向代理服务器发送请求

代理服务器再把请求转发给资源服务器

资源服务器把资源返回给代理服务器

代理服务器再把资源转发给我们我们就收到数据了

粉色的是服务器蓝色的也是服务器服务器服务器之间不用发送 ajax 就用原生的 http 协议即可

构建代理服务器

1.使用 nignx

后端了解一些再开启

2.使用 Vue 脚手架开启

方式一简单的代理服务器

在vue.config.js 文件中编写代码

先在 vue-cli 的文档中的配置项中找到 devSever.proxy 后面的单词就是代理的意思

先把第一段代码沾到我们的文件的后面开启代理服务器

端口号是我们要请求的服务器的端口号不是8080 是 5000 后面不要写别的路径了

 devServer: {
    proxy: 'http://localhost:5000'
  }

然后给我们代码中的请求对象的端口也改成 8080 因为我们这回请求对象是代理服务器

<template>
  <div>
   <button  @click="getStudents">获得学生信息</button>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: "app",
 methods:{
  getStudents(){
    axios.get('http://localhost:8080/students').then(
      response => {
        console.log('请求成功了',response.data)
      },
      error => {
        console.log('请求失败',error.message)
      }
    )
  }
 }
};
</script>

最后请求成功了

小问题：

8080 的根路径在 public 文件夹中里面的东西跨=可以通过 localhost:8080/文件名的形式访问

如果 public 中的文件出现了我们要请求的服务器中的文件名我们就不会发送ajax 请求了而是直接把本地的东西拿来使用

比如上面的 students 如果我们本来就有就不发送请求了

而且我们创建的代理服务器只能向一个资源服务器发送请求不能向多个服务器发送请求

方式二高级代理

里面有两段代码第一段是完整代码第二段是精简后的代码我们先看前面的

就是我们的请求带着这个信息我们就向代理发送请求

/api 是请求前缀代理服务器问我们的 8080 我们本次请求的请求前缀是什么如果是 /api 就走代理

target 就是我们要请求的目标就是我们 url 地址代理服务器把请求转发给这个地址

ws 是允许 websocket 通信

changeOrigin: true 是资源服务器查看我们代理服务器位置时代理服务器做出的应答，为真时代理服务器就说我在 5000 其实在 8080 端口，如果时 false 就实话实说

 devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }

初始化之后代码

devServer: {
    proxy: {
      '/daili': {
        target: 'http://localhost:5000',
        ws: true,
        changeOrigin: true
      },
  }
}

所以我们要使用这个代理服务器我们得让我们原本的请求地址带上请求前缀的信息，位置写在端口号的后面后面的内容不用变化还是 students

<template>
  <div>
   <button  @click="getStudents">获得学生信息</button>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: "app",
 methods:{
  getStudents(){
    axios.get('http://localhost:8080/daili/students').then(
      response => {
        console.log('请求成功了',response.data)
      },
      error => {
        console.log('请求失败',error.message)
      }
    )
  }
 }
};
</script>

然后打开网页发送请求出现 404 的错误是因为我们的请求信息里面包含 /daili 我们代理服务器将请求转发时把这个头前缀也转发了，但是资源服务器中没有 /daili 的路径，所以找不到信息报错

所以我们得把转发给资源服务器中的请求中的 /daili 去掉

我们得再加一个属性 pathRewrite:{'/^daili':' '} 匹配有 /daili 前缀的信息然后将这个信息前缀转成空字符串

 devServer: {
    proxy: {
      '/daili': {
        target: 'http://localhost:5000',
        pathRewrite:{'^/daili':''},
        ws: true,
        changeOrigin: true
      },
    }
  }

如果想向多个资源服务器发送请求就复制一份然后接着在 proxy 对象中写就行

 devServer: {
    proxy: {
      '/daili': {
        target: 'http://localhost:5000',
        pathRewrite:{'^/daili':''},
        ws: true,
        changeOrigin: true
      },
      '/demo': {
        target: 'http://localhost:5001',
        pathRewrite:{'^/demo':''},
        ws: true,
        changeOrigin: true
      },
    }
  }

注意：

由于我们这种写代理的方式要加一个前缀，所以如果我们本地也有同名文件时就强制去使用代理服务器而不是直接使用我们本地的

我们还能通过这种方式实现同时向多个服务器发送请求‘（能配置多个代理）

很好的解决了第一种方式的问题

如果不想走代理不加前缀即可

（四）github 搜索案例

案例的网站已经解决了跨域的问题用 cors

返回的数据 incomplete_results；false 说明发送的是不是完整的数据

item 是选出来的数据

第一个属性是用户的头像然后是每个人的 githbu 主页地址

list 有四种展示首先是刚进来的欢迎搜索

然后是搜索时的加载中

然后是搜索成功后的用户信息

最后是搜索请求出错时的报错

代码结构

1.发送按钮组件

<template>
  <section class="jumbotron">
    <h3 class="jumbotron-heading">Search Github Users</h3>
    <div>
      <input
        type="text"
        placeholder="enter the name you search"
        v-model="keyWord"
      />&nbsp;
      <button @click="searchUsers">Search</button>
    </div>
  </section>
</template>

<script>
import axios from "axios";
export default {
  name: "Search",
  data() {
    return {
      keyWord: "",
    };
  },
  methods: {
    searchUsers() {
      this.$bus.$emit("updataListData", {
        isFirst: false,
        isLoading: true,
        errMsg: "",
        users: [],
      });
      axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
        (response) => {
          console.log("请求成功了", response.data.items);
          this.$bus.$emit("getUsers", response.data.items);
          this.$bus.$emit("updataListData", {
            isLoading: false,
            errMsg: "",
            users: response.data.items,
          });
        },
        (error) => {
          console.log("请求失败了", error.message);
          this.$bus.$emit("updataListData", {
            isLoading: false,
            errMsg: error.message,
            users: [],
          });
        }
      );
    },
  },
};
</script>

2.列表组件

<template>
  <div class="row">
    <div
      v-show="info.users.length"
      class="card"
      v-for="user in info.users"
      :key="user.login"
    >
      <a :href="user.html_url" target="_blank">
        <img :src="user.avatar_url" style="width: 100px" />
      </a>
      <p class="card-text">{{ user.login }}</p>
    </div>
    <h1 v-show="info.isFirst">欢迎使用！</h1>
    <h1 v-show="info.isLoading">加载中。。。。</h1>
    <h1 v-show="info.errMsg">{{info.errMsg}}</h1>
  </div>
</template>

<script scoped>
export default {
  name: "List",
  data() {
    return {
      info: {
        isFirst: true,
        isLoading: false,
        errMsg: "",
        users: [],
      },
    };
  },
  mounted() {
    this.$bus.$on("updataListData", (dataObj) => {
      this.info = {...this.info,...dataObj}
    });
  },
};
</script>

<style>
.album {
  min-height: 50rem; /* Can be removed; just added for demo purposes */
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: #f7f7f7;
}

.card {
  float: left;
  width: 33.333%;
  padding: 0.75rem;
  margin-bottom: 2rem;
  border: 1px solid #efefef;
  text-align: center;
}

.card > img {
  margin-bottom: 0.75rem;
  border-radius: 100px;
}

.card-text {
  font-size: 85%;
}
</style>

3.app 组件

<template>
  <div class="container">
    <Search />
    <List />
  </div>
</template>
<script>
import Search from "./components/Search";
import List from "./components/List";

export default {
  name: "app",
  components: { Search, List },
};
</script>