Vue--github案例--搜索

基本配置

除了注册相应的组件外，需要引入bootstrap，但是bootstrap中用到不需要用的字体，这时候如果用放在src/assets/css中并import则vue会严格检查并报错，所以这时候要么把字体也下下来，要么可以放在public中，即public/css/bootstrap.css，因为没用到字体，就放在public中。
在public下的index.html中用link引入，因为所有组件最后都放入了index里的app内。
<link rel="styleSheet" type="text/css" href="<%= BASE_URL %>css/bootstrap.css">
页面效果

github登不上去，图片没出来。。

实例

服务器地址
https://api.github.com/search/users?q=${this.textMessage}
其中的${this.textMessage}就是搜索框中的信息，用v-model即可获取

这其中还涉及到第一次访问，加载文字，以及错误信息。

MyList组件：

<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.errorMsg">{{ info.errorMsg }}</h1>
  </div>
</template>

<script>
export default {
  name: "MyList",
  data() {
    return {
      info: {
        isFirst: true,
        isLoading: false,
        errorMsg: "",
        users: [],
      },
    };
  },
  mounted() {
    this.$bus.$on("getInfo", (dataObj) => {
      //动态替换
      this.info = { ...this.info, ...dataObj };
    });
  },
};
</script>

<style scoped>
.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>

MySearch组件：

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

<script>
import axios from "axios";
export default {
  name: "MySearch",
  data() {
    return {
      textMessage: "",
    };
  },
  methods: {
    searchInfo() {
      this.$bus.$emit("getInfo", {
        isFirst: false,
        isLoading: true,
        errorMsg: "",
        users: [],
      });
      axios
        .get(`https://api.github.com/search/users?q=${this.textMessage}`)
        .then(
          (response) => {
            console.log("收到数据了", response.data.items);
            this.$bus.$emit("getInfo", {
              isLoading: false,
              errorMsg: "",
              users: response.data.items,
            });
          },
          (error) => {
            this.$bus.$emit("getInfo", {
              isLoading: false,
              errorMsg: error.message,
              users: [],
            });
          }
        );
    },
  },
};
</script>

<style>
</style>