当前位置: 首页 > 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;而我已经在一个企业干了五年的功能测试…...

网络编程(Modbus进阶)

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

TDengine 快速体验(Docker 镜像方式)

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

YSYX学习记录(八)

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...