vue axios应用

编写小的demo应用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应用

1.index.html

2.main.js

3.App.vue

4.Search.vue

5.Main.vue

最新文章

热门文章