Vue_Ajax请求------axios入门小案例

迈不过友情╰ 2022-11-03 04:24 191阅读 0赞

### 通过小项目演示使用vue-axios如何和后端进行通信！ ###

vue项目中通常使用的两个ajax库！
    	1：插件vue-resource(不推荐使用，常用在vue1.0)
    	2：axios（推荐使用！！！！！）

1.  案例内容：

#####  #####

目标：根据关键字 V  在后台GitHub中进行搜索，搜索到最受欢迎的带v的仓库（肯定是vue了）
               然后点击链接，就回跳转到相应的主页中!
    具体：是一个异步效果，没有请求到时，显示loading状态，返回后显示相应链接

1.  具体结构代码如下：

###### 1：新建vue项目（这里使用vue cli3脚手架创建） ######

vue create exercise_axios

###### 2：页面结构（未渲染，只做演示） ######

<template>
      <div>
      	//请求链接为空，继续loading显示
        <div v-if="!repoUrl">loading...</div>
        <div v-else>
          github中最多标记的仓库是<a :href="repoUrl">{ {  repoName }}</a>
        </div>
      </div>
    </template>

###### 3：页面逻辑结构如下 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70]

###### 4：接口信息分析与代码对应 ######

const url = 'https://api.github.com/search/repositories?q=v&sort=stars'
        查看接口对应的数据，来分析请求代码如何完成

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 1]  
对应的代码逻辑：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 2]

###### 5：发送请求代码 ######

逻辑结构以及代码展示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 3]

###### 6：实例结果展示： ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 4]

###### 7：验证失败请求： ######

更改链接代码查找规则如下：
    search----> search11----->理想结果，弹出alert警告
    const url = 'https://api.github.com/search11/repositories?q=v&sort=stars'

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 5]

实例完整代码：

<template>
      <div>
        <div v-if="!repoUrl">loading...</div>
        <div v-else>
          <p>成功查找到数据如下：</p>
          github中最多标记的仓库是<a :href="repoUrl">{ {  repoName }}</a>
        </div>
      </div>
    </template>
    
    <script>
    import axios from 'axios'
    export default { 
      name: 'App',
      components: { 
    
      },
      data () { 
        return { 
          repoUrl: '',
          repoName: ''
        }
      },
      // 发送ajax请求一般都是在声明周期回调函数中进行 三个阶段：初始化  更新 死亡
      mounted () { 
        // 使用vue-resource发送ajax请求数据
        const url = 'https://api.github.com/search11/repositories?q=v&sort=stars'
        // 使用axios发送ajax请求
        axios.get(url).then(
          response => { 
            const result = response.data
            const mostRepo = result.items[0]
            this.repoUrl = mostRepo.html_url
            this.repoName = mostRepo.name
          }).catch(() => { 
            alert('查找失败了');
          })
      }
    
    }
    </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>

至此：vue-axios测试小案例结束，记录学习，感谢观看！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70]: /images/20221024/387b71b66711491c99bf76375ce8c633.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 1]: /images/20221024/befe3c05b0634698a3e56bb01a2b184a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 2]: /images/20221024/200d6334590a46dba971b6051ede82c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 3]: /images/20221024/195b435287204bfc92e568f128760c4e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 4]: /images/20221024/5e7e31cdfcbe41318424701ea05b6ddc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 5]: /images/20221024/d6521209951b41d6a869514b6577259a.png