axios

使用Vue-cli配置代理

App.vue

<template>
  <div id="app">
    <button @click="getmsg">获取信息</button>
  </div>
</template>

<script>
import axios from 'axios'


export default {
  name: 'App',
  methods: {
    getmsg(){
      axios.get('http://localhost:8081/axios/user/all').then(
        respones => {
          console.log('请求成功了',respones.data)
        },
        error => {
          console.log('请求失败了',error.message)
        }
      )
    }
  },
}
</script>

方法一

在vue.config.js中添加如下配置：

devServer:{
  proxy:"http://localhost:8080"
}

1. 优点：配置简单，请求资源时直接发给前端（8080）即可。
2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）

方法二

编写vue.config.js配置具体代理规则：

module.exports = {
	devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api1': ''}
      },
      '/api2': {// 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
   changeOrigin默认值为true
*/

1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
2. 缺点：配置略微繁琐，请求资源时必须加前缀。

案例

myList.vue

<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>
export default {
    name:'myList',
    data() {
        return {
            info:{
            isFirst:true,
            isLoading:false,
            errMsg:'',
            users: []
            }
        };
    },
    mounted() {
        this.$bus.$on('updataListData',(dataObj) => {
            this.info = {...this.info,...dataObj}//ES6语法
        })
    },
}
</script>

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

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

.card-text {
  font-size: 85%;
}

</style>

mySearch.vue

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

<script>
import axios from "axios";
export default {
  name: "mySearch",
  data() {
    return {
      keyword: "",
    };
  },
  methods: {
    SearchUser() {
        //请求前更新List数据
      this.$bus.$emit('updataListData',{isFirst:false,isLoading:true,errMsg:'',users:[]})
      axios.get(`http://api.github.com/search/users?q=${this.keyword}`).then(
        respones => {
          console.log('请求成功了')
          //请求成功后
          this.$bus.$emit('updataListData',{isLoading:false,errMsg:'',users:respones.data.items})
        },
        error => {
          console.log('请求失败了',error.message)
          //请求失败后
          this.$bus.$emit('updataListData',{isLoading:false,errMsg:error.message,users:[]})
        }
      );
    },
  },
};
</script>

<style>
</style>

App.vue

<template>
  <div class="container">
    <my-search/>
    <my-list/>
  </div>
</template>

<script>

import mySearch from "./components/mySearch.vue";
import myList from "./components/myList.vue";

export default {
  components: { mySearch , myList}, //不能用main作为标签名，就换一个名字
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

页面展示

插槽slot

1. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件
2. 分类：默认插槽、具名插槽、作用域插槽
3. 使用方式：

默认插槽

父组件中：

<Category>
   <div>html结构1</div>
</Category>

子组件中：

<template>
    <div>
       <!-- 定义插槽 -->
       <slot>插槽默认内容...</slot>
    </div>
</template>

具名插槽

父组件中：

<Category>
    <template slot="center">
      <div>html结构1</div>
    </template>

    <template v-slot:footer>
       <div>html结构2</div>
    </template>
</Category>

子组件中：

<template>
    <div>
       <!-- 定义插槽 -->
       <slot name="center">插槽默认内容...</slot>
       <slot name="footer">插槽默认内容...</slot>
    </div>
</template>

作用域插槽

1. 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）
2. 具体编码：

父组件中：

<Category>
	<template scope="scopeData">
		<!-- 生成的是ul列表 -->
		<ul>
			<li v-for="g in scopeData.games" :key="g">{{g}}</li>
		</ul>
	</template>
</Category>

<Category>
	<template slot-scope="scopeData">
		<!-- 生成的是h4标题 -->
		<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
	</template>
</Category>

子组件中：

<template>
    <div>
        <slot :games="games"></slot>
    </div>
</template>

<script>
    export default {
        name:'Category',
        props:['title'],
        //数据在子组件自身
        data() {
            return {
                games:['红色警戒','穿越火线','劲舞团','超级玛丽']
            }
        },
    }
</script>