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

文档部分

这边使用是开源的API

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

返回格式 : json/images

请求方式:  get/post

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

请求参数

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

返回参数

返回参数列表
名称类型说明
codestring返回的状态码
imgUrlstring返回图片地址
msgstring返回错误提示消息

返回实例

{"code": 1,"imgurl": "https:\/\/ws2.sinaimg.cn\/large\/005zWjpngy1fuvgjtiihyj31400p0ajp.jpg"
}

 实例

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

实现方式

html 部分

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

js部分

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

实现步骤 

html代码

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

//可以让元素水平排列 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 头像组件
 

//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部分

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

import {ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

定义请求参数和返回参数

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

 调用方法

const handleSelect =(index)=>{if (index === '1') {// 如果第一项被点击(但它被禁用了),这里不会执行return;}postAvatar.value.sort = index;let data = qs.stringify(postAvatar.value);
console.log(selectedAvatarUrl.value)// 调用 API 获取头像 URLaxios.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; // 更新图片 URLElMessage.success("头像加载成功");} else {ElMessage.error(response.data.msg);}}).catch((error) => {ElMessage.error("加载头像时发生错误:" + error.message);});
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/846518.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

3DMAX建筑生长动画插件PolyFX安装使用方法

3DMAX建筑生长动画插件PolyFX安装使用教程 PolyFX插件是一个功能强大的工具&#xff0c;它可以将对象分解为片段并根据需要设置动画。它有许多用于微调动画的选项和一些附加工具。这是制作宣传视频、游戏开发等的绝佳解决方案。 【版本要求】 3ds max 2010-2025&#xff08;不…

西门子电梯控制保姆级教程

一、电梯运行控制 1.电梯控制系统结构 可以理解是通过ip进行访问的 2.基于PLCSIM Adv与电梯仿真软件的控制环境搭建 虽然都是用一台电脑来控制&#xff0c;但是还是用以太网来连接 在FC块里面也要用两个DB块来放输入和输出 二、电梯对象的分析 在eet里面&#xff0c;用手动控制…

里氏替换原则经典反例:正方形不是长方形

里氏替换原则指出&#xff1a;“继承必须确保超类所拥有的性质在子类中仍然成立”&#xff0c;在程序中的表现就是某个接口能接受超类对象为参数&#xff0c;那么它也必须应该能接受子类对象为参数&#xff0c;且程序不会出现异常。也就是说子类对象应该能够替换掉超类对象&…

力扣136.只出现一次的数字

给你一个 非空 整数数组 nums &#xff0c;除了某个元素只出现一次以外&#xff0c;其余每个元素均出现两次。找出那个只出现了一次的元素。你必须设计并实现线性时间复杂度的算法来解决此问题&#xff0c;且该算法只使用常量额外空间。 示例 1 &#xff1a;输入&#xff1a;n…

探讨大米自动化生产线包装设备的智能化发展趋势

随着科技的飞速发展&#xff0c;智能化已经成为各行各业转型升级的重要方向。在大米生产领域&#xff0c;自动化生产线包装设备的智能化发展更是引领着粮食产业的未来潮流。星派将从智能化技术、市场需求、发展趋势等方面&#xff0c;探讨大米自动化生产线包装设备的智能化发展…

从0开发一个Chrome插件:创建第一个Chrome插件

前言 这是《从0开发一个Chrome插件》系列的第四篇文章,本系列教你如何从0去开发一个Chrome插件,每篇文章都会好好打磨,写清楚我在开发过程遇到的问题,还有开发经验和技巧。 专栏: 从0开发一个Chrome插件:什么是Chrome插件? 从0开发一个Chrome插件:开发Chrome插件的必…

LeetCode 算法:找到字符串中所有字母异位词c++

原题链接&#x1f517;&#xff1a;找到字符串中所有字母异位词 难度&#xff1a;中等⭐️⭐️ 题目 给定两个字符串 s 和 p&#xff0c;找到 s 中所有 p 的 异位词 的子串&#xff0c;返回这些子串的起始索引。不考虑答案输出的顺序。 异位词 指由相同字母重排列形成的字符…

Python高阶学习记录

文章导读 阅读本文需要一定的python基础&#xff0c;部分知识点是对python入门篇学习记录和python并发编程学习记录的深入探究&#xff0c;本文记录的Python知识点包括函数式编程&#xff0c;装饰器&#xff0c;生成器&#xff0c;迭代器&#xff0c;正则表达式&#xff0c;内存…

eNSP——两台电脑通过一根网线直连通信

一、拓扑结构 二、电脑配置 ip和子网掩码&#xff0c;配置两台电脑处于同一网段 三、测试 四、应用 传文件等操作&#xff0c;可以在一台电脑上配置FTP服务器

Java零基础-顺序结构

哈喽&#xff0c;各位小伙伴们&#xff0c;你们好呀&#xff0c;我是喵手。运营社区&#xff1a;C站/掘金/腾讯云&#xff1b;欢迎大家常来逛逛 今天我要给大家分享一些自己日常学习到的一些知识点&#xff0c;并以文字的形式跟大家一起交流&#xff0c;互相学习&#xff0c;一…

高清矩阵是什么?

在数学中&#xff0c;矩阵是一个按照长方阵列排列的复数或实数集合&#xff0c;最早来自于方程组的系数及常数所构成的方阵。如图为m行n列的矩阵&#xff1a; 由此延伸可以想到矩阵图片是把一个三维空间分切成多个行和列的区域进行图像捕获&#xff0c;将捕获图像再进行拼合成为…

关于苹果发布IOS18系统,以及Siri升级贾维斯

随着科技的不断进步&#xff0c;手机操作系统也在持续升级&#xff0c;为用户提供更加智能化、便捷化的体验。近期&#xff0c;苹果公司即将推出的iOS 18系统引起了广泛关注。作为iPhone历史上的重大更新&#xff0c;iOS 18系统带来了众多新功能&#xff0c;将进一步提升iPhone…

2024-6-2 石群电路-21

2024-6-2&#xff0c;星期日&#xff0c;天气&#xff1a;阴&#xff0c;心情&#xff1a;晴。今天没什么特别的事情发生&#xff0c;心情还是一如既往的好&#xff0c;明天就周一啦&#xff0c;虽然我暂时不用上班&#xff0c;但是希望大家新的一周元气满满~ 今日观看了石群老…

STL中vector动态二维数组理解(杨辉三角)

题目链接&#xff1a;118.杨辉三角 题目描述&#xff1a; 给定一个非负整数 numRows&#xff0c;生成「杨辉三角」的前 numRows 行。 在「杨辉三角」中&#xff0c;每个数是它左上方和右上方的数的和。 题目指要&#xff1a; 本题的主要目的是理解vector<vector<int&…

18 跨团队 没有汇报线的人和事就是推不动?

在“05 | 大项目&#xff1a;把握关键点&#xff0c;谋定而后动”和“11 | 勤沟通&#xff1a;在信任的基础上&#xff0c;让沟通简单”两讲中&#xff0c;我提过“跨团队”这件事&#xff0c;很多同学带团队之后&#xff0c;无法回避的一个问题就是“跨团队协作”&#xff0c;…

【Linux】System V 消息队列(不重要)

一、消息队列的原理 一个进程给另一个进程发送类型数据块的方式每一个数据快都被认为是有一个类型的&#xff0c;接收者进程接收的数据快可以有不同的类型值 二、消息队列的接口 和共享内存的接口很像&#xff1a; 消息队列的创建 创建消息队列我们需要用msgget函数&#x…

logging二次封装

import logging import os import time from logging.handlers import RotatingFileHandlerclass Logger():logs_dir os.path.dirname(os.path.dirname(os.path.abspath(__file__))) \\report\\logsdef __init__(self, name):self.logger logging.getLogger(name)#设置级别…

JavaScript函数进阶学习

文章目录 JavaScript函数进阶函数提升作用流程 函数参数动态参数剩余参数展开运算符 箭头函数基本语法箭头函数参数箭头函数的this 遍历数组的forEach方法语法 JavaScript函数进阶 函数提升 函数有时可以先调用再声明。 作用流程 函数提升的作用流程与变量提升类似&#xf…

移动端框架:加速移动应用开发与提升跨平台兼容性

在当今快速发展的移动应用领域&#xff0c;开发者们面临着如何快速构建、维护并发布跨平台应用的挑战。为了应对这一挑战&#xff0c;移动端框架应运而生&#xff0c;它们不仅加速了移动应用的开发流程&#xff0c;还提升了应用的跨平台兼容性&#xff0c;并确保了应用性能与原…

C++的算法:动态规划算法

动态规划(Dynamic Programming,简称DP)是一种在数学、计算机科学和经济学中使用的,通过把原问题分解为相对简单的子问题的方式来求解复杂问题的方法。动态规划常常适用于有重叠子问题和最优子结构性质的问题。 动态规划的基本步骤: 1. 描述问题的最优解的结构:确定问题的…