1.5

配置代理

vue.config里面配置

只能配置一个代理 只能给5000发(方式一)

  开启代理服务器(代理服务器的端口号已经是8080 不需要管 只需要给5000发请求 写端口号5000)
   devServer: {
    //代理服务器请求转发给端口5000
    proxy: 'http://localhost:5000'
   }
   ,


  //方式二
  devServer: {
    proxy: {
      '/api': {//请求前缀 决定走代理       尽管8080已有同样的文件 但是还是转发请求给5000 
        target: 'http://localhost:5000',
        pathRewrite:{'^/api':''},//代理服务器转发给5000 将前面的前缀去掉 可以在5000找到
        ws: true,//用于支持websocket
        changeOrigin: true //不如实回答自己的来源端口号
      },
      
    }
  }

 使用

<template>
    <div class="hello">
     <button @click="getstudent">点击获取信息</button>
    </div>
    
</template>
<!-- 配置代理服务器 服务器与服务器之间使用http请求 不是ajax请求  无关同源策略 -->
<!-- 借助脚手架开启代理服务器 -->
<script>
import axios from 'axios'
export default {
    methods: {
        //方法一
        getstudent() {
            //配置的代理服务器端口号是8080 所以向8080发请求
            axios.get('http://localhost:8080/students').then((response) => {
                console.log(response.data)
            }, (error) => {
                console.log(error.message)
            })
        },


        //public文件是8080服务器的根路径 文件里有什么 8080就有什么
    //但是代理服务器不会都把所有请求转发给5000 8080有的信息就不会转发给5000

      //方法二
        getstudent() {
            //配置的代理服务器端口号是8080 所以向8080发请求
            axios.get('http://localhost:8080/api/students').then((response) => {
                console.log(response.data)
            }, (error) => {
                console.log(error.message)
            })
        }
    }
 

    

    
}

</script>

<style >
.hello{
    background-color: grey;
}
</style>

github案例

<template>  
 <div class="row">
    <!-- 使用user.login 用户登录名作为唯一标识符 -->
      <div v-show="info.Getusers.length" class="card" v-for="user in info.Getusers" :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">Loading...</h1>
        <h1 v-show="info.errMsg">{{info.errMsg}}</h1>

    </div>
</template> 

<script>  


 export default {  
    name: 'List',
    data() {
        return {
            info: {
            isFirst: true,
            isLoading: false,
            errMsg: '',
            Getusers: [],
            }
        }
    },
    //接收数据
    mounted(){
    this.$bus.$on('getusers', (dataObj) => {
        // this.info=dataObj //第一种方式  直接赋值 如果后续省略isFirst的值的话 会丢失这个数据
         this.info={...this.info,...dataObj}   //第二种方式 可以省略isFirst的值 可以使用扩展运算符 进行后面的值覆盖 而且可以传参数时改变顺序
    })
  }

} 




</script> 
  

<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="search">Search</button>
      </div>
    </section>
</template> 

<script>
 
import axios from 'axios'
 export default {  

    name: 'Search',
 data() {
    return {
        keyword:''
    }
    },
    methods: {
        search() {

            //请求前
        this.$bus.$emit('getusers', { isFirst: false, isLoading: true, errMsg: '', Getusers: [] })
        //使用vue-resource发送请求              
        //this.$http.get() 其他与axios相同
            //第一种模板字符串  想让this.keyword按js表达式执行 需要${}
            axios.get(`https://api.github.com/search/users?q=${this.keyword}`).then((response) => {
                //成功之后进行传数据
                console.log('请求成功',response.data.items)
                //第一种
                // this.$bus.$emit('getusers', { isFirst: false, isLoading: false, errMsg: '', Getusers: response.data.items })

                //第二种
                //isFirst的值不会在改变 后面继续写会比较麻烦 可以省略 使用扩展运算符
                this.$bus.$emit('getusers', {  isLoading: false, errMsg: '', Getusers: response.data.items })

            }, (error) => {
                console.log(error.message)
                //第一种
                // this.$bus.$emit('getusers', { isFirst: false, isLoading: false, errMsg: error.message, Getusers: [] })
                //第二种
                this.$bus.$emit('getusers',{isLoading:false,errMsg:error.message,Getusers:[]})

            })


            //第二种配置params写参数
            // axios.get('https://api.github.com/search/users', {
            //     params: {
            //         q:this.keyword
            //     }
            // }).then((response) => {
            //      console.log(response.data.items)
            // }, (error) => {
            //     console.log(error.message)
            // })

    }
    },
   


  } 

</script> 

//另一种发送请求的方法(vue-resource是插件)

import VueResource from 'vue-resource'

Vue.use(VueResource)

默认插槽

<Category title="美食">
    <!-- img 在APP这解析完之后才传到category组件的 可以在APP这做样式设定 -->
  <img src="./assets/logo.png" alt="">
  </Category>

<div class="Category"> 
    <h3>{{title}}分类</h3>
     <slot></slot>
  
    </div>   

具名插槽

<Category title="美食">
    <!-- img 在APP这解析完之后才传到category组件的 可以在APP这做样式设定 -->
  <img   slot="center" src="./assets/logo.png" alt="">
  <a href="www.baidu.com" slot="footer">点我跳转</a>
  </Category>

 

<div class="Category"> 
    <h3>{{title}}分类</h3>
     <slot name="center"></slot>
     <slot name="footer"></slot>

    </div>