(三十七)vue 项目中常用的2个Ajax库
文章目录
- 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"/> <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"/> <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>
相关文章:
(三十七)vue 项目中常用的2个Ajax库
文章目录axios实现vue-resource实现上一篇:(三十六)Vue解决Ajax跨域问题 先看一个github搜索案例 有一个搜索框,输入相关用户名,就能模糊搜索出用户,展现到下方 第一步:我们用到了第三方样式库…...
Python打包调试问题解决
使用pyinstaller打包,发现问题:代码运行时调试的结果不一致代码中设定的图标打包后没有显示出来打包代码程序test.py为入口函数main()所在的文件pyinstaller -F -w -i test.ico test.py 不会出现控制台,图标为test.ic…...
计算机SCI期刊自引率一般是多少? - 易智编译EaseEditing
论文常用来指进行各个学术领域的研究和描述学术研究成果的文章,是探讨问题进行学术研究的一种手段,又是描述学术研究成果进行学术交流的一种工具,包括学年论文、毕业论文、学位论文、科技论文、成果论文等。 一般来说,论文的自引…...
力扣(LeetCode)417. 太平洋大西洋水流问题(2023.02.19)
有一个 m n 的矩形岛屿,与 太平洋 和 大西洋 相邻。 “太平洋” 处于大陆的左边界和上边界,而 “大西洋” 处于大陆的右边界和下边界。 这个岛被分割成一个由若干方形单元格组成的网格。给定一个 m x n 的整数矩阵 heights , heights[r][c]…...
Python解题 - CSDN周赛第30期 - 天然气订单
本期比赛的在线测试系统好像出了点问题,导致很多选手最后提交的分数是0,而问哥也遇到好几次提交后一直显示“运行中”而没有结果的情况。鉴于之前遇到过类似情况,不停地刷新页面才得以继续。但是此问题已经存在并持续了好几期,极大…...
移动WEB开发一、基础知识
零、文章目录 文章地址 个人博客-CSDN地址:https://blog.csdn.net/liyou123456789个人博客-GiteePages:https://bluecusliyou.gitee.io/techlearn 代码仓库地址 Gitee:https://gitee.com/bluecusliyou/TechLearnGithub:https:…...
07 二叉树
开始系统学习算法啦!为后面力扣和 蓝桥杯的刷题做准备!这个专栏将记录自己学习算法是的笔记,包括 概念, 算法运行过程,以及 代码实现,希望能给大家带来帮助,感兴趣的小伙伴欢迎评论区留言或者私…...
从 ClickHouse 到 Apache Doris,腾讯音乐内容库数据平台架构演进实践
导读:腾讯音乐内容库数据平台旨在为应用层提供库存盘点、分群画像、指标分析、标签圈选等内容分析服务,高效为业务赋能。目前,内容库数据平台的数据架构已经从 1.0 演进到了 4.0 ,经历了分析引擎从 ClickHouse 到 Apache Doris 的…...
linux线程的基本知识
这里用的是Linux的pthread线程库,需要加pthread线程库。 线程的创建 第一个参数是线程id的地址。第二个参数是线程属性,一般为NULL。第三个是要执行的函数。第四个是函数的参数,一般也为NULL 线程的等待,第一个参数是线程的id,第…...
docker swarm 集群服务编排部署指南(docker stack)
Docker Swarm 集群管理 概述 Docker Swarm 是 Docker 的集群管理工具。它将 Docker 主机池转变为单个虚拟 Docker 主机,使得容器可以组成跨主机的子网网络。Docker Swarm 提供了标准的 Docker API,所有任何已经与 Docker 守护程序通信的工具都可以使用…...
ESP开发环境搭建
一、windows中搭建 esp-idf tool(可选),下载连接如下:https://dl.espressif.com/dl/esp-idf/?idf4.4 下载安装tools后进入vscode进行插件安装(未离线下载idf工具也可以通过第二步通过插件下载安装) 1. vscode安装编译环境 ESP-IDF 需要安装一些必备工…...
内网安全——ssH协议WindowsLinux密码获取hashcat
目录 (一)横向移动-Linux把场-ssH协议&RSA密匙凭证 (二)Windows-密码获取-在线离线读取&密文破解&a...
【编程入门】应用市场(安卓版)
背景 前面已输出多个系列: 《十余种编程语言做个计算器》 《十余种编程语言写2048小游戏》 《17种编程语言10种排序算法》 《十余种编程语言写博客系统》 《十余种编程语言写云笔记》 《N种编程语言做个记事本》 目标 为编程初学者打造入门学习项目,使…...
【图像分类】卷积神经网络之LeNet5网络模型结构详解
写在前面: 首先感谢兄弟们的关注和订阅,让我有创作的动力,在创作过程我会尽最大能力,保证作品的质量,如果有问题,可以私信我,让我们携手共进,共创辉煌。 1. 前言 LeNet5算法是LeCun在1998年提出的卷积神经网络模型。大约90年代,由于支持向量机等算法的发现,深度学习…...
2023-JavaWeb最新整理面试题-TCP、Tomcat、Servlet、JSP等
Java基础面试题 一、JavaWeb专题 1.HTTP响应码有哪些 1、1xx(临时响应) 2、2xx(成功) 3、3xx(重定向):表示要完成请求需要进一步操作 4、4xx(错误):表示请…...
【云原生kubernetes】k8s Ingress使用详解
一、什么是Ingress 在上一篇关于k8s之service的使用一篇中提到,Service对集群之外暴露服务的主要方式有两种,NotePort和LoadBalancer,但这两种方式,都有一定的缺点,具体来说: NodePort 会占用很多集群机器…...
[数据结构]:顺序表(C语言实现)
目录 前言 顺序表实现 01-开发环境 02-文件布局 03-代码 01-主函数 02-头文件 03-SeqListCommon.cpp 04-SeqListPositionOperation.cpp 05-SeqListValueOperation.cpp 结语 前言 此专栏包含408考研数据结构全部内容,除其中使用到C引用外,全为…...
【大厂高频必刷真题100题】《有序矩阵中第 K 小的元素》 真题练习第27题 持续更新~
有序矩阵中第 K 小的元素 给你一个 n x n 矩阵 matrix ,其中每行和每列元素均按升序排序,找到矩阵中第 k 小的元素。 请注意,它是 排序后 的第 k 小元素,而不是第 k 个 不同 的元素。 你必须找到一个内存复杂度优于 O(n^2) 的解决方案。 示例 1: 输入:matrix = [[1,5,9…...
两年外包生涯做完,感觉自己废了一半....
先说一下自己的情况。大专生,17年通过校招进入湖南某软件公司,干了接近2年的点点点,今年年上旬,感觉自己不能够在这样下去了,长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了五年的功能测试…...
今日科技热点速览
🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售,主打更强图形性能与沉浸式体验,支持多模态交互,受到全球玩家热捧 。 🤖 人工智能持续突破 DeepSeek-R1&…...
华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建
华为云FlexusDeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色,华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型,能助力我们轻松驾驭 DeepSeek-V3/R1,本文中将分享如何…...
IP如何挑?2025年海外专线IP如何购买?
你花了时间和预算买了IP,结果IP质量不佳,项目效率低下不说,还可能带来莫名的网络问题,是不是太闹心了?尤其是在面对海外专线IP时,到底怎么才能买到适合自己的呢?所以,挑IP绝对是个技…...
Java毕业设计:WML信息查询与后端信息发布系统开发
JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发,实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构,服务器端使用Java Servlet处理请求,数据库采用MySQL存储信息࿰…...
GitHub 趋势日报 (2025年06月06日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...
Linux系统部署KES
1、安装准备 1.版本说明V008R006C009B0014 V008:是version产品的大版本。 R006:是release产品特性版本。 C009:是通用版 B0014:是build开发过程中的构建版本2.硬件要求 #安全版和企业版 内存:1GB 以上 硬盘…...
leetcode73-矩阵置零
leetcode 73 思路 记录 0 元素的位置:遍历整个矩阵,找出所有值为 0 的元素,并将它们的坐标记录在数组zeroPosition中置零操作:遍历记录的所有 0 元素位置,将每个位置对应的行和列的所有元素置为 0 具体步骤 初始化…...
echarts使用graphic强行给图增加一个边框(边框根据自己的图形大小设置)- 适用于无法使用dom的样式
pdf-lib https://blog.csdn.net/Shi_haoliu/article/details/148157624?spm1001.2014.3001.5501 为了完成在pdf中导出echarts图,如果边框加在dom上面,pdf-lib导出svg的时候并不会导出边框,所以只能在echarts图上面加边框 grid的边框是在图里…...
简单介绍C++中 string与wstring
在C中,string和wstring是两种用于处理不同字符编码的字符串类型,分别基于char和wchar_t字符类型。以下是它们的详细说明和对比: 1. 基础定义 string 类型:std::string 字符类型:char(通常为8位)…...
aurora与pcie的数据高速传输
设备:zynq7100; 开发环境:window; vivado版本:2021.1; 引言 之前在前面两章已经介绍了aurora读写DDR,xdma读写ddr实验。这次我们做一个大工程,pc通过pcie传输给fpga,fpga再通过aur…...
