Vue教程4【vue中的ajax】devServer.proxy axios vue-resource插槽

配置代理 跨域问题

通过 vue.config.js 中的 devServer.proxy 选项来配置

module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

⚠️ 问题：

1. 不能配置多个代理
2. 本机存在与public里面的文件如果和请求地址相同，则不会发送请求到代理服务器

如果你想要更多的代理控制行为，也可以使用一个 path: options 成对的对象

module.exports = {
  devServer: {
    proxy: {
      '/api': { //匹配所有以api开头的地址
        target: 'http://119.2.453.423:8080',
          pathRewrite:{'^/api',''},
        ws: true,//用于支持websocket
        changeOrigin: true//（请求头中的host值【真/假】）告诉要请求的服务器，来自哪个地址
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}

github案例

App.vue

<template>
  <div id="app">
    <Search></Search>
    <List></List>
  </div>
</template>

<script>
  import 'jquery/dist/jquery.min'
  import 'bootstrap/dist/css/bootstrap.min.css'
  import Search from './components/Search'
  import List from './components/List'
export default {
  name: 'App',
  components: {
    Search,List,
  }
}
</script>

Search.vue

<template>
    <div>
            <div class="form-group">
                <label for="exampleInputEmail1">Search github user</label>
                <input type="text" class="form-control" id="exampleInputEmail1" placeholder="输入用户名"
                       v-model="inputKeyWord">
                <button type="submit" @click="searchUser()" class="btn btn-default">查询</button>
            </div>

    </div>
</template>

<script>
    import axios from 'axios';

    export default {
        name: "Search",
        data() {
            return {
                inputKeyWord: ''
            }
        },
        methods: {
            searchUser() {
                console.log('触发点击事件',this.inputKeyWord);
                this.$bus.$emit('updateListData',{isFirst: false,isLoading:true,errMsg:'',users:[]});
                axios.get(`https://api.github.com/users?q=${this.inputKeyWord}`).then(
                    response => {
                        console.log('success',response.data)
                        this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data});
                    },
                    error => {
                        console.log('error',error.message)
                        this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]});

                    }
                )
            }
        }
    }
</script>

List.vue

<template>
    <div>
        <div v-show="info.isFirst">欢迎使用！</div>
        <div v-show="info.users.length!=0" v-for="user in info.users" :key="user.login">
            <a :href="user.html_url">
                <img :src="user.avatar_url" alt="..." class="img-thumbnail">
            </a>
            <p class="text-primary">{{user.login}}</p>
        </div>
        <div v-show="info.isLoading">加载中。。。</div>
        <div v-show="info.isLoading">{{info.errMsg}}</div>
    </div>
</template>

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

<style scoped>
    img {
        width: 100px;
        height: 100px;
    }
    div {
        display: inline-block;
        margin-left: 10px;
    }
</style>

vue-resource

#下载插件
npm i vue-resource

#main.js
-----------------
<script>
import vueResouce from 'vue-resource'
Vue.use(vueResouce);
</script>
---------------------

#使用
<script>
    this.$http.get("").then(
{
response=>{
	response.data
},error=>{
	error.message
}
})
</script>

solt插槽（默认）

让父组件向子组件指定位置插入html结构，适用于 父组件 ==> 子组件

App.vue
<Student>
    <img src="xxx">
</Student>

Student.vue
<template>
	<div>
        <h3>xxx</h3>
        <slot>没有传递结构时，显示</slot>
    </div>
</template>

具名插槽

App.vue
<Student>
    <img slot="center" src="xxx">
    <!--不生成dom元素-->
    <template slot="footer" 或者 v-slot:footer（只能用在template上）>
    	<img src="xxx">
    	<h3>也想放在footer里面</h3>
    </template>
</Student>

Student.vue
<template>
	<div>
        <h3>xxx</h3>
        <slot name="center">没有传递结构时，显示</slot>
        <slot name="footer">没有传递结构时，显示</slot>
    </div>
</template>

作用域插槽

数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定

App.vue
<Student>
    #使用template的scope属性接收
    <template scope="data"(新语法slot-scope="data") 或者es6解构赋值 scope="{games}",下面直接使用games>
    	<ul>
        	<li v-for="(item,index) in data.games" :key="index">{{item}}</li>
   		</ul>
    </template>
    <template slot-scope="data">
    	<ol>
        	<li v-for="(item,index) in data.games" :key="index">{{item}}</li>
   		</ol>
    </template>
</Student>

Student.vue
<template>
	<div>
        <h3>xxx</h3>
        #向使用该插槽的组件传值
        <slot :data="games">没有传递结构时，显示</slot>
    </div>
</template>
<script>
	new Vue({
       data(){
           return{
               games:['GTA5','荒野','4399']
           }
       } 
    });
</script>