vue3-调用API实操-调用开源头像接口

文档部分

这边使用是开源的API

请求地址: **:**https://api.uomg.com/api/rand.avatar

返回格式 : json/images

请求方式: get/post

请求实例: https://api.uomg.com/api/rand.avatar?sort=男&format=json

请求参数

|--------|----|--------|---------------------------------|
| 名称 | 必填 | 类型 | 说明 |
| sort | 否 | string | 选择输出分类[男|女|动漫男|动漫女],为空随机输出 |
| format | 否 | string | 选择输出格式[json|images] |
[请求参数说明]

返回参数

|--------|--------|----------|
| 名称 | 类型 | 说明 |
| code | string | 返回的状态码 |
| imgUrl | string | 返回图片地址 |
| msg | string | 返回错误提示消息 |
[返回参数列表]

返回实例

javascript 复制代码
{
 "code": 1,
 "imgurl": "https:\/\/ws2.sinaimg.cn\/large\/005zWjpngy1fuvgjtiihyj31400p0ajp.jpg"
}

实例

实现效果 : 点击头像菜单栏可以更换不同的头像

实现方式

html 部分

  • 利用 element-plus中的<el-menu></el-menu> 更改请求参数
  • 绑定一个响应式变量显示在页面

js部分

  • 定义响应式变量
  • 接受请求参数
  • 定义一个返回的参数
  • 定义一个函数 利用 axios跨域 接受接口返回的值

实现步骤

html代码

mode="horizontal 可以让元素水平排列
@select="方法" 当选择该元素时候会调用该方法

html 复制代码
//可以让元素水平排列 mode="horizontal
//@select 当选择该元素时候会调用该方法
<el-menu  mode="horizontal"
            @select="handleSelect">
    <el-menu-item index="1" disabled>头像</el-menu-item>
    <el-menu-item index="男" >男</el-menu-item>
    <el-menu-item index="女" >女</el-menu-item>
    <el-menu-item index="动漫男" >动漫男</el-menu-item>
    <el-menu-item index="动漫女" >动漫女</el-menu-item>
  </el-menu>

接受响应回的参数

v-if ='布尔值' 用来是否在页面显示 true为显示 false为不显示
<el-avatar></el-avatar> 是element-plus 头像组件

html 复制代码
//v-if 用来是否在页面显示 true为显示 false为不显示
//<el-avatar></el-avatar> 是element-plus 头像组件
<div v-if="selectedAvatarUrl">
    <el-avatar :size="300" :src="selectedAvatarUrl" />
<!--    <img :src="selectedAvatarUrl" alt="Avatar" style="max-width: 100%; width: 500px; height: auto;"/>-->
  </div>

js部分

导包 (记得配置这些导包项)

javascript 复制代码
import {ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

定义请求参数和返回参数

java 复制代码
const selectedAvatarUrl = ref(''); // 用于存储选中的头像 URL
const postAvatar = ref({ sort: '', format: 'json' }); // 通常 API 不需要 format 参数,除非它确实需要

调用方法

javascript 复制代码
const handleSelect =(index)=>{


  if (index === '1') {
    // 如果第一项被点击(但它被禁用了),这里不会执行
    return;
  }
  postAvatar.value.sort = index;
  let data = qs.stringify(postAvatar.value);
console.log(selectedAvatarUrl.value)
  // 调用 API 获取头像 URL
  axios.get(`https://api.uomg.com/api/rand.avatar?`+data) // 假设 API 支持 sort 参数
      .then((response) => {
        // 假设 API 返回了一个包含图片 URL 的对象
        if (response.data.code==1) { // 根据你的 API 响应结构进行调整
          selectedAvatarUrl.value = response.data.imgurl; // 更新图片 URL
          ElMessage.success("头像加载成功");
        } else {
          ElMessage.error(response.data.msg);
        }
      })
      .catch((error) => {
        ElMessage.error("加载头像时发生错误:" + error.message);
      });
};
相关推荐
烛阴7 分钟前
JavaScript 的 8 大“阴间陷阱”,你绝对踩过!99% 程序员崩溃瞬间
前端·javascript·面试
lh_125438 分钟前
ECharts 地图开发入门
前端·javascript·echarts
jjw_zyfx39 分钟前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
Mikey_n1 小时前
前台调用接口的方式及速率对比
前端
周之鸥1 小时前
使用 Electron 打包可执行文件和资源:完整实战教程
前端·javascript·electron
我爱吃朱肉1 小时前
HTMLCSS模板实现水滴动画效果
前端·css·css3
机器视觉知识推荐、就业指导2 小时前
开源QML控件:进度条滑动控件(含源码下载链接)
前端·qt·开源·qml
前端snow2 小时前
前端全栈第二课:用typeorm向数据库添加数据---一对多关系
前端·javascript
難釋懷2 小时前
Shell脚本-for循环语法结构
前端·chrome
全栈老李技术面试2 小时前
【高频考点精讲】async/await原理剖析:Generator和Promise的完美结合
前端·javascript·css·vue·html·react·面试题