vue axios应用

编写小的demo应用axios异步请求.
效果图示:
vue axios应用
功能: 用户在输入框中输入信息进行搜索,并搜索状态随之改变(四种状态).

项目目录:
vue axios应用
代码:

1.index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue_demo</title>
    <link rel="stylesheet" href="./static/css/bootstrap.css">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

2.main.js

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


new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

3.App.vue

<template>
  <div class="container">
    <Search/>
    <users-main/>
  </div>
</template>

<script>
  import Search from './components/Search'
  import Main from './components/Main'

  export default {

    data () {
      return {

      }
    },

    components: {
      Search,
      UsersMain: Main
    }

  }
</script>

<style>

</style>

4.Search.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="searchName"/>
      <button @click="search">Search</button>
    </div>
  </section>
</template>

<script>
  import PubSub from 'pubsub-js'

  export default {
    data() {
      return {
        searchName: ''
      }
    },
    methods: {
      search() {
        // 获取输入信息
        const searchName = this.searchName.trim()
        // console.log(searchName)
        if (searchName){  // 当不为空字符串时
          PubSub.publish('searchInfo', searchName)  // 发布搜索的消息:消息名和数据
        }
      }
    }
  }
</script>

<style>

</style>

5.Main.vue

<template>
  <div>
    <h2 v-if="firstView">请输入用户名进行搜素</h2>
    <h2 v-if="loading">Loading...</h2>
    <h2 v-if="errorMsg">{{errorMsg}}</h2>
    <div class="row">
      <div class="card" v-for="(user,index) in users" :key="index">
        <a :href="user.url" target="_blank">
          <img :src="user.avatar_url" style='width: 100px'/>
        </a>
        <p class="card-text">{{user.name}}</p>
      </div>

    </div>
  </div>
</template>

<script>
  import PubSub from 'pubsub-js'
  import axios from 'axios'

  export default {
    data() {
      return {
        firstView: true,
        loading: false,
        users: null,  // [{url: '', avatar_url: '', name: ''}]
        errorMsg: ''
      }
    },
    mounted() {
      // 订阅搜索的消息,绑定监听; 在点击search按钮后发送ajax请求
      PubSub.subscribe('searchInfo',(msg, searchName) =>{
        // 定义url
        const url = ` https://api.github.com/search/users?q=${searchName}`

        // 更新状态(请求中)
        this.firstView = false
        this.loading = true
        this.users = null   // 这里需重新设置为null,不然加载时会显示上一次users信息
        this.errorMsg = ''

        // 发送ajax请求
        axios.get(url).then(response => {
          // 请求成功
          const result = response.data
          const users = result.items.map(item => ({
            url: item.html_url,
            avatar_url: item.avatar_url,
            name: item.login
          }))

          // 更新状态(成功)
          this.loading = false
          this.users = users

        }).catch(error => {
          // 请求失败(失败)
          this.loading = false
          this.errorMsg = '请求失败'

        })
      })
    }
  }
</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>

vue axios应用

上一篇:Django 同步数据库的时候app中的models的表没有成功创建


下一篇:苹果用户转入mate30,被恶心到了