编写小的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. vue axios 取消上次请求

    axios.defaults.timeout = 1000 * 5axios.defaults.baseURL = baseUrlvar CancelToken = axios.CancelToken ...

  2. vue axios拦截器 + 自编写插件 实现全局 loading 效果；

    项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...

  3. vue axios使用form-data的形式提交数据的问题

    vue axios使用form-data的形式提交数据vue axios request payload form data由于axios默认发送数据时,数据格式是Request Payload,而并 ...

  4. VUE AXIOS 跨域问题

    背景: 后台跨域使用通配符:context.Response.Headers.Add("Access-Control-Allow-Origin", "*"); ...

  5. vue axios 总结篇

    1.npm --save 和 --save-dev 有什么区别 发布到线上的叫生产环境~,在本地开发的时候叫开发环境,--save就是会打包到线上去并且在线上环境能用到的,比如你npm install ...

  6. 基于Vue + axios + WebApi + NPOI导出Excel文件

    一.前言 项目中前端采用的Element UI 框架, 远程数据请求,使用的是axios,后端接口框架采用的asp.net webapi,数据导出成Excel采用NPOI组件.其业务场景,主要是列表页 ...

  7. vue+axios新手实践实现登陆

    vue+axios新手实践实现登陆 https://segmentfault.com/a/1190000015201803 增加 利用HTML5的history.replacestate()修改当前页 ...

  8. vue+axios+elementUI文件上传与下载

    vue+axios+elementUI文件上传与下载 Simple_Learn 关注  0.5 2018.05.30 10:20 字数 209 阅读 15111评论 4喜欢 6 1.文件上传 这里主要 ...

  9. axios interceptors 拦截 , 页面跳转, token 验证 Vue+axios实现登陆拦截，axios封装(报错,鉴权,跳转,拦截,提示)

    Vue+axios实现登陆拦截,axios封装(报错,鉴权,跳转,拦截,提示) :https://blog.csdn.net/H1069495874/article/details/80057107 ...

  10. Vue+axios（interceptors） 实现http拦截 + router路由拦截 (双拦截)+ 请求自带loading效果

    axios interceptors 拦截器 //interceptors.js // vue axios配置 发起请求加载loading请求结束关闭loading // http request 请 ...

随机推荐

  1. Hystrix——让你的服务更稳一点

    摘要: 1.为什么要用Hystrix在分布式服务环境下,服务之间的调用关系变得错综复杂,你是否担心依赖的服务延迟导致自己的服务也被拖跨呢?是否在苦苦思考如何优雅的对依赖服务进行异步调用呢?是否希望当流 ...

  2. Python使用XML操作mapnik,实现复杂标注（Multi line text symbolizer）

    test.py import mapnik stylesheet = 'world_style.xml' image = 'world_style.png' m = mapnik.Map(1200, ...

  3. DOM例子小结（一）

    一.点击按钮切换图片 核心思路: 1.首先获取元素 2.为元素添加点击事件 3.当事件被触发时运行代码 <!DOCTYPE html> <html lang="en&quo ...

  4. PHP基础-表达式介绍

    表达式是 PHP 最重要的基石.在PHP 编程 中,几乎所写的任何东西都是一个表达式.简单但却最精确的定义一个表达式的方式就是“任何有值的东西”. 最基本的表达式形式是常量和变量.当键入“$a = 5 ...

  5. C++ 值传递、指针传递、引用传递

    1.值传递 (1)形参是实参的拷贝(这句话说明形参和实参是两个实体),改变形参的值并不会影响外部实参的值. (2)从被调用函数的角度来说,值传递是单向的(实参->形参),参数的值只能传入,不能传 ...

  6. codevs 1020 孪生蜘蛛 x

    题目描述 Description 在G城保卫战中,超级孪生蜘蛛Phantom001和Phantom002作为第三层防卫被派往守护内城南端一带极为隐秘的通道. 根据防护中心的消息,敌方已经有一只特种飞蛾 ...

  7. CodeForces 1200E Compress Words

    \(C_n^m\)的typora,点了一下启用源代码模式就把我已经写好的博客弄没了,就给我留个标题,自动保存也只给我保存了个标题--\(C_n^m\),wdnmd Time limit 1000 ms ...

  8. QtCreator常用之快捷键

    1. Ctrl(按住)+ Tab快速切换已打开的文件 2. 自动添加成员函数实体(.cpp)定义: 将光标移动到h文件中的方法声明. 按Alt(按住)+ Enter,再按回车键 将在cpp中添加该函数 ...

  9. EMC存储同时分配空间到两台LINUX服务器路径不一致导致双机盘符大小不一致

    操作系统:Centos linux6.6 当我们从EMC存储上划分空间同时分配给两台或者多台服务器上时,有的时候会出现在服务器上所生成的磁盘路径是不一致的,这样就会导致盘符名称不一致或者是盘符对应的大 ...

  10. jmeter正则表达式提取

    使用jmeter正则表达式提取器之前,首先 使用httpwatch 分析一下 我要要测试的系统正则管理的规则: 例如:我这里要关联的是一个ODS数据仓库平台的登录 1./sso/login..单点登录 ...