(三十七)vue 项目中常用的2个Ajax库

news/2024/4/15 8:37:47

文章目录

  • axios实现
  • vue-resource实现

上一篇:(三十六)Vue解决Ajax跨域问题

先看一个github搜索案例
有一个搜索框,输入相关用户名,就能模糊搜索出用户,展现到下方
请添加图片描述

在这里插入图片描述
第一步:我们用到了第三方样式库bootstrap,首先需要在public文件夹见一个css文件夹,放入样式库,然后在index.html页面进行引入
请添加图片描述

    <!-- 引入第三方样式 --><link rel="stylesheet" href="<%=BASE_URL%>css/bootstrap.css">

第二步:拆分组件,搜索跟文本框为一个组件Search,展示用户为一个组件List

axios实现

通用的 Ajax 请求库, 官方推荐,使用比较广泛
axios安装命令:npm i axios
App组件

<template><div class="container"><Search/><List/></div>
</template>
<script>
import Search from "@/components/Search";
import List from "@/components/List";
export default {name: "App",components: {List, Search},
}
</script>
<style>
</style>

Seach组件

<template><section class="jumbotron"><h3 class="jumbotron-heading">Search Github Users</h3><div><input type="text" placeholder="enter the name you search" v-model="keyWord"/>&nbsp;<button @click="searchUsers">Search</button></div></section>
</template><script>import axios from "axios";export default {// eslint-disable-next-line vue/multi-word-component-namesname: "Search",data(){return{keyWord:''}},methods:{searchUsers(){if (this.keyWord === ""){alert("输入不能为空")return}//请求前更新List的数据this.$bus.$emit('updateListData',{isFirst:false,isLoading:true,errMsg:'',users:[]})axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(response => {//请求成功后更新List的数据this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})},error => {console.log('请求失败',error.message)//请求后更新List的数据this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})})}}
}
</script>
<style scoped>
</style>

List组件

<template><div class="row"><!--展示用户列表--><div v-show="info.users.length" class="card" v-for="user in info.users" :key="user.login"><a :href="user.html_url" target="_blank"><img :src="user.avatar_url" style='width: 100px'/></a><p class="card-text">{{user.login}}</p></div><!--展示欢迎词--><h2 v-show="info.isFirst">欢迎使用</h2><!--展示加载中--><h2 v-show="info.isLoading">加载中....</h2><!--展示错误信息--><h2 v-show="info.errMsg">{{info.errMsg}}</h2></div>
</template><script>
export default {// eslint-disable-next-line vue/multi-word-component-namesname: "List",data(){return{info: {isFirst:true,isLoading:false,errMsg:'',users:[]}}},mounted() {this.$bus.$on('updateListData',(dataObj)=>{this.info = {...this.info,...dataObj}})}
}
</script><style scoped>
.album {min-height: 50rem; /* Can be removed; just added for demo purposes */padding-top: 3rem;padding-bottom: 3rem;background-color: #f7f7f7;
}.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-resource实现

vue-resource:是一个插件库,对ajax进行了封装,用法与axios差不多。
vue-resource安装命令:npm i vue-resource
使用这个插件之后Vue和VueComponent身上就多了个$http,通过$http.get$http.post进行Ajax请求
vue 插件库, vue1.x 使用广泛,官方已不维护
安装完之后,需要在mian.js进行引入

import vueResource from "vue-resource";
Vue.use(vueResource)

请添加图片描述
Seach组件改为:

<template><section class="jumbotron"><h3 class="jumbotron-heading">Search Github Users</h3><div><input type="text" placeholder="enter the name you search" v-model="keyWord"/>&nbsp;<button @click="searchUsers">Search</button></div></section>
</template><script>import axios from "axios";export default {// eslint-disable-next-line vue/multi-word-component-namesname: "Search",data(){return{keyWord:''}},methods:{searchUsers(){if (this.keyWord === ""){alert("输入不能为空")return}//请求前更新List的数据this.$bus.$emit('updateListData',{isFirst:false,isLoading:true,errMsg:'',users:[]})this.$http.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(response => {//请求成功后更新List的数据this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})},error => {console.log('请求失败',error.message)//请求后更新List的数据this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})})}}
}
</script><style scoped></style>

http://www.ppmy.cn/news/26719.html

相关文章

开发自己私有chatGPT(五)训练微调openai模型

微调 了解如何为应用程序自定义模型。 介绍 通过微调&#xff0c;您可以通过提供以下内容从通过 API 提供的模型中获得更多收益&#xff1a; 比提示设计更高质量的结果能够训练比提示所能容纳的更多示例由于提示时间较短&#xff0c;可以节省token更低的延迟请求GPT-3 已经对来…

java基础:数组详解。

一、什么是数组&#xff1f; 存放数据的容器&#xff0c;同一种类型数据的集合&#xff0c;其实数组就是一个容器。 二、数组的特点。 1.数组在存放数据的时候用下标表示&#xff0c;下标默认从0开始依次递增1 往后排列&#xff0c;我们可以通过下标进行获取值&#xff0c; …

逻辑回归—分类问题的操作顺序

对于二元分类问题来说&#xff0c;分类的结果和数据的特征之间仍呈现相关关系&#xff0c;但是y的值不再是连续的&#xff0c;是0&#xff5e;1的跃迁。但是在这个过程中&#xff0c;什么仍然是连续的呢&#xff1f;”是概率&#xff0c;概率是逐渐升高的&#xff0c;当达到一个…

聊聊8万8的私董会,很扎心

聊聊8万8的私董会&#xff0c;很扎心 道几句真心话&#xff0c;很扎心&#xff0c;但也很现实。 如果你喜欢刷抖音&#xff0c;这种感觉应该会更加明显。 股市哀鸿遍野&#xff0c;实体一地鸡毛&#xff0c;我们办公室楼下的门面换了一波又一波。 别说那些不起眼的小生意&a…

【数据集】CMIP6气候模式数据下载

1 CMIP6简介 目前,国际耦合模式比较计划(Coupled Model Intercomparison Project, CMIP) 已经发展到第六阶段(CMIP6)。CMIP6模式采用了较以往更加合理的参数化方案,综合考虑了大气中温室气体排放、气溶胶浓度及社会经济、科学技术发展及政府规划等多方面的综合影响,将提…

【每日一题Day125】LC1326灌溉花园的最少水龙头数目 | 动态规划 贪心

灌溉花园的最少水龙头数目【LC1326】 在 x 轴上有一个一维的花园。花园长度为 n&#xff0c;从点 0 开始&#xff0c;到点 n 结束。 花园里总共有 n 1 个水龙头&#xff0c;分别位于 [0, 1, ..., n] 。 给你一个整数 n 和一个长度为 n 1 的整数数组 ranges &#xff0c;其中 …

opencv学习整理--基础入门

文章目录读取和显示文件绘制线段&#xff0c;矩形&#xff0c;圆&#xff0c;椭圆&#xff0c;多边形&#xff0c;文字鼠标事件获取和修改图像像素&#xff0c;获取图像类型&#xff0c;ROI&#xff0c;图像通道拆分合并&#xff0c;图像融合图像缩放&#xff0c;平移&#xff…

【Fastdfs】| 入门连续剧——安装

作者&#xff1a;狮子也疯狂 专栏&#xff1a;《spring开发》 坚持做好每一步&#xff0c;幸运之神自然会降临在你的身上 目录一. &#x1f981; 前言Ⅰ. &#x1f407; 为什么要使用分布式文件系统&#xff1f;1.1 单机系统 vs 独立文件服务器1.2 分布式文件系统1.3 FastDFS引…

ISO 6721-1~12 ,塑料-电动机械性能的测定,2022更新

ISO 6721-1 :2019 Plastics - Determination of dynamic mechanical properties - Part 1: General principles ISO 6721-1 :2019 塑料 - 电动机械性能的测定. 第1部分:一般原理 ISO 6721-2 :2019 Plastics — Determination of dynamic mechanical properties — Part 2:…

C++入门:内联函数、auto关键字、基于范围for循环及指针空值nullptr

目录 一. 内联函数 1.1 内联函数的概念 1.2 内联函数的特性 1.3 内联函数和宏的优缺点对比 二. auto关键字&#xff08;C11&#xff09; 2.1 auto的功能 2.2 auto在使用时的注意事项 三. 基于范围的for循环&#xff08;C11&#xff09; 四. 指针空值nullptr&#xff08…

2023-02-20干活小计:

所以我今天的活开始了&#xff1a; In this paper, the authors target the problem of Multimodal Name Entity Recognition(MNER) as an improvement on NER(text only) The paper proposes a multimodal fusion based on a heterogeneous graph of texts and images to mak…

【C#个人错题笔记】

观前提醒 记录一些我不会或者少见的内容&#xff0c;不一定适合所有人 字符串拼接 int a3,b8; Console.WriteLine(ab);//11 Console.WriteLine("ab");//ab Console.WriteLine(a""b);//38 Console.WriteLine("ab"ab);//ab38 Console.WriteLine…

最全Linux驱动开发全流程详细解析(持续更新)

Linux驱动开发详细解析 一、驱动概念 驱动与底层硬件直接打交道&#xff0c;充当了硬件与应用软件中间的桥梁。 具体任务 读写设备寄存器&#xff08;实现控制的方式&#xff09;完成设备的轮询、中断处理、DMA通信&#xff08;CPU与外设通信的方式&#xff09;进行物理内存…

内网渗透(四十六)之横向移动篇-使用系统漏洞ms17010横向移动

系列文章第一章节之基础知识篇 内网渗透(一)之基础知识-内网渗透介绍和概述 内网渗透(二)之基础知识-工作组介绍 内网渗透(三)之基础知识-域环境的介绍和优点 内网渗透(四)之基础知识-搭建域环境 内网渗透(五)之基础知识-Active Directory活动目录介绍和使用 内网渗透(六)之基…

华为OD机试 - 最长连续交替方波信号 | 机试题算法思路 【2023】

最近更新的博客 华为OD机试 - 简易压缩算法(Python) | 机试题算法思路 【2023】 华为OD机试题 - 获取最大软件版本号(JavaScript) 华为OD机试 - 猜字谜(Python) | 机试题+算法思路 【2023】 华为OD机试 - 删除指定目录(Python) | 机试题算法思路 【2023】 华为OD机试 …

正点原子ARM裸机开发篇

裸机就是手动的操作硬件来实现驱动设备&#xff0c;后面会有驱动框架不需要这么麻烦 第八章 汇编 LED 灯实验 核心过程 通过汇编语言来控制硬件&#xff08;驱动程序&#xff09; 代码流程 1、使能 GPIO1 时钟 GPIO1 的时钟由 CCM_CCGR1 的 bit27 和 bit26 这两个位控制&…

网络安全高级攻击

对分类器的高层次攻击可以分为以下三种类型&#xff1a;对抗性输入&#xff1a;这是专门设计的输入&#xff0c;旨在确保被误分类&#xff0c;以躲避检测。对抗性输入包含专门用来躲避防病毒程序的恶意文档和试图逃避垃圾邮件过滤器的电子邮件。数据中毒攻击&#xff1a;这涉及…

linux开机自动运行python服务或者程序(转载)

进入看到AI那边写了个服务可以实现自动重启之类的 ai那边用的fastapi写的接口 后面可以研究一下 直接在调用函数如run.py封装接口 若想使用systemctl 命令则需要直接把写的 .serverce程序放到 /etc/systemd/system参考以下资料&#xff0c; https://blog.csdn.net/wo1823709…

JVM12 字节码指令集

1. 概述 2. 加载与存储指令 2.1. 局部变量压栈指令 iload 从局部变量中装载int类型值 lload 从局部变量中装载long类型值 fload 从局部变量中装载float类型值 dload 从局部变量中装载double类型值 aload 从局部变量中装载引用类型值&#xff08;refernce&#xff09; iload_0 从…

【C语言】初识结构体

Yan-英杰 悟已往之不谏 知来者之可追 目录 一、结构体的声明 二、结构体变量的定义和初始化 三、结构体成员的访问 四、结构体传参 一、结构体的声明 1.结构的基础知识 结构是一些值的集合&#xff0c;这些值称为成员变量。结构的每个成员可以是不同类型的变量。2.结构的…
最新文章