当前位置: 首页 > news >正文

(三十七)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"/>&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>

相关文章:

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

文章目录axios实现vue-resource实现上一篇&#xff1a;&#xff08;三十六&#xff09;Vue解决Ajax跨域问题 先看一个github搜索案例 有一个搜索框&#xff0c;输入相关用户名&#xff0c;就能模糊搜索出用户&#xff0c;展现到下方 第一步&#xff1a;我们用到了第三方样式库…...

Python打包调试问题解决

使用pyinstaller打包&#xff0c;发现问题&#xff1a;代码运行时调试的结果不一致代码中设定的图标打包后没有显示出来打包代码程序test.py为入口函数main&#xff08;&#xff09;所在的文件pyinstaller -F -w -i test.ico test.py 不会出现控制台&#xff0c;图标为test.ic…...

计算机SCI期刊自引率一般是多少? - 易智编译EaseEditing

论文常用来指进行各个学术领域的研究和描述学术研究成果的文章&#xff0c;是探讨问题进行学术研究的一种手段&#xff0c;又是描述学术研究成果进行学术交流的一种工具&#xff0c;包括学年论文、毕业论文、学位论文、科技论文、成果论文等。 一般来说&#xff0c;论文的自引…...

力扣(LeetCode)417. 太平洋大西洋水流问题(2023.02.19)

有一个 m n 的矩形岛屿&#xff0c;与 太平洋 和 大西洋 相邻。 “太平洋” 处于大陆的左边界和上边界&#xff0c;而 “大西洋” 处于大陆的右边界和下边界。 这个岛被分割成一个由若干方形单元格组成的网格。给定一个 m x n 的整数矩阵 heights &#xff0c; heights[r][c]…...

Python解题 - CSDN周赛第30期 - 天然气订单

本期比赛的在线测试系统好像出了点问题&#xff0c;导致很多选手最后提交的分数是0&#xff0c;而问哥也遇到好几次提交后一直显示“运行中”而没有结果的情况。鉴于之前遇到过类似情况&#xff0c;不停地刷新页面才得以继续。但是此问题已经存在并持续了好几期&#xff0c;极大…...

移动WEB开发一、基础知识

零、文章目录 文章地址 个人博客-CSDN地址&#xff1a;https://blog.csdn.net/liyou123456789个人博客-GiteePages&#xff1a;https://bluecusliyou.gitee.io/techlearn 代码仓库地址 Gitee&#xff1a;https://gitee.com/bluecusliyou/TechLearnGithub&#xff1a;https:…...

07 二叉树

开始系统学习算法啦&#xff01;为后面力扣和 蓝桥杯的刷题做准备&#xff01;这个专栏将记录自己学习算法是的笔记&#xff0c;包括 概念&#xff0c; 算法运行过程&#xff0c;以及 代码实现&#xff0c;希望能给大家带来帮助&#xff0c;感兴趣的小伙伴欢迎评论区留言或者私…...

3|物联网控制|计算机控制-刘川来胡乃平版|第4章:过程通道与人机接口-4.1数字量输入输出通道接口|课堂笔记|ppt

...

从 ClickHouse 到 Apache Doris,腾讯音乐内容库数据平台架构演进实践

导读&#xff1a;腾讯音乐内容库数据平台旨在为应用层提供库存盘点、分群画像、指标分析、标签圈选等内容分析服务&#xff0c;高效为业务赋能。目前&#xff0c;内容库数据平台的数据架构已经从 1.0 演进到了 4.0 &#xff0c;经历了分析引擎从 ClickHouse 到 Apache Doris 的…...

linux线程的基本知识

这里用的是Linux的pthread线程库&#xff0c;需要加pthread线程库。 线程的创建 第一个参数是线程id的地址。第二个参数是线程属性&#xff0c;一般为NULL。第三个是要执行的函数。第四个是函数的参数&#xff0c;一般也为NULL 线程的等待&#xff0c;第一个参数是线程的id,第…...

docker swarm 集群服务编排部署指南(docker stack)

Docker Swarm 集群管理 概述 Docker Swarm 是 Docker 的集群管理工具。它将 Docker 主机池转变为单个虚拟 Docker 主机&#xff0c;使得容器可以组成跨主机的子网网络。Docker Swarm 提供了标准的 Docker API&#xff0c;所有任何已经与 Docker 守护程序通信的工具都可以使用…...

ESP开发环境搭建

一、windows中搭建 esp-idf tool(可选),下载连接如下:https://dl.espressif.com/dl/esp-idf/?idf4.4 下载安装tools后进入vscode进行插件安装&#xff08;未离线下载idf工具也可以通过第二步通过插件下载安装&#xff09; 1. vscode安装编译环境 ESP-IDF 需要安装一些必备工…...

内网安全——ssH协议WindowsLinux密码获取hashcat

目录 (一)横向移动-Linux把场-ssH协议&RSA密匙凭证 (二)Windows-密码获取-在线离线读取&密文破解&a...

【编程入门】应用市场(安卓版)

背景 前面已输出多个系列&#xff1a; 《十余种编程语言做个计算器》 《十余种编程语言写2048小游戏》 《17种编程语言10种排序算法》 《十余种编程语言写博客系统》 《十余种编程语言写云笔记》 《N种编程语言做个记事本》 目标 为编程初学者打造入门学习项目&#xff0c;使…...

【图像分类】卷积神经网络之LeNet5网络模型结构详解

写在前面: 首先感谢兄弟们的关注和订阅,让我有创作的动力,在创作过程我会尽最大能力,保证作品的质量,如果有问题,可以私信我,让我们携手共进,共创辉煌。 1. 前言 LeNet5算法是LeCun在1998年提出的卷积神经网络模型。大约90年代,由于支持向量机等算法的发现,深度学习…...

2023-JavaWeb最新整理面试题-TCP、Tomcat、Servlet、JSP等

Java基础面试题 一、JavaWeb专题 1.HTTP响应码有哪些 1、1xx&#xff08;临时响应&#xff09; 2、2xx&#xff08;成功&#xff09; 3、3xx&#xff08;重定向&#xff09;&#xff1a;表示要完成请求需要进一步操作 4、4xx&#xff08;错误&#xff09;&#xff1a;表示请…...

【云原生kubernetes】k8s Ingress使用详解

一、什么是Ingress 在上一篇关于k8s之service的使用一篇中提到&#xff0c;Service对集群之外暴露服务的主要方式有两种&#xff0c;NotePort和LoadBalancer&#xff0c;但这两种方式&#xff0c;都有一定的缺点&#xff0c;具体来说&#xff1a; NodePort 会占用很多集群机器…...

[数据结构]:顺序表(C语言实现)

目录 前言 顺序表实现 01-开发环境 02-文件布局 03-代码 01-主函数 02-头文件 03-SeqListCommon.cpp 04-SeqListPositionOperation.cpp 05-SeqListValueOperation.cpp 结语 前言 此专栏包含408考研数据结构全部内容&#xff0c;除其中使用到C引用外&#xff0c;全为…...

【大厂高频必刷真题100题】《有序矩阵中第 K 小的元素》 真题练习第27题 持续更新~

有序矩阵中第 K 小的元素 给你一个 n x n 矩阵 matrix ,其中每行和每列元素均按升序排序,找到矩阵中第 k 小的元素。 请注意,它是 排序后 的第 k 小元素,而不是第 k 个 不同 的元素。 你必须找到一个内存复杂度优于 O(n^2) 的解决方案。 示例 1: 输入:matrix = [[1,5,9…...

两年外包生涯做完,感觉自己废了一半....

先说一下自己的情况。大专生&#xff0c;17年通过校招进入湖南某软件公司&#xff0c;干了接近2年的点点点&#xff0c;今年年上旬&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落&#xff01;而我已经在一个企业干了五年的功能测试…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

(转)什么是DockerCompose?它有什么作用?

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

【VLNs篇】07:NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

Python Ovito统计金刚石结构数量

大家好,我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构,但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法,可以持续统计各步的金刚石结构,具体代码如下: from ovito…...

TSN交换机正在重构工业网络,PROFINET和EtherCAT会被取代吗?

在工业自动化持续演进的今天&#xff0c;通信网络的角色正变得愈发关键。 2025年6月6日&#xff0c;为期三天的华南国际工业博览会在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为国内工业通信领域的技术型企业&#xff0c;光路科技&#xff08;Fiberroad&…...