VuePress网站如何使用axios请求第三方接口

19d4a00e5e6ab07957b5e7f0328c5353.jpeg

前言

VuePress是一个纯静态网站生成器,也就是它是无后端,纯前端的,那想要在VuePress中,发送ajax请求,请求一些第三方接口,有时想要达到自己一些目的

VuePress中,使用axios请求第三方接口,需要先安装axios,然后引入,最后使用

本文包括

  • VuePress中安装和使用axios,直接使用与挂载在根实例下使用

  • 解决跨域的问题,VuePress中使用axios请求第三方接口时,会出现跨域问题

  • 使用axios请求第三方接口时,如何携带参数,完成请求

安装axios

npm install axios@0.21.1 -S

注意事项

如果使用axios报错,则尝试降低axios版本

组件内使用axios

在单文件见组件中引用axios,然后使用axios.get()axios.post()发送get请求或post请求

<template><div><el-button type="primary" @click="handleBtnGetJoke" :disabled="isDisabled">请求数据</el-button><el-button type="danger" @click="handleBtnClearData" v-if="aDatas.length > 0?true:false">清空数据</el-button><ul v-if="aDatas.length > 0?true:false"><li class="joke-list" v-for="item in aDatas":key="item.hashId">{{ item.content }}</li><div class="loading" v-if="aDatas.length > 0?true:false"> <el-button size="mini"  type="primary" @click="handleBtnLoading" >加载</el-button></div></ul> </div>
</template><script>import axios from 'axios';export default {name: 'vuepressAxios',data() {return {aDatas: [],isDisabled: false,page: 1,pagesize: 5,}},methods: {async handleBtnGetJoke() {this.isDisabled = true;const params = {key: "aa1b7ad08be2a09a4e0d2d46897e2dc8",page: this.page,pagesize: this.pagesize,}// const response = await axios.get('/api/joke/content/text.php',{params});const response = await this.$axios.get('/api/joke/content/text.php',{params});console.log(response);if(response.status === 200) {this.isDisabled = false;this.$message.success('数据请求成功');const { data } = response;this.aDatas = this.aDatas.concat(data.result.data);}else {this.$message.error('数据请求失败');}},handleBtnClearData() {this.aDatas = [];},handleBtnLoading() {this.page++;this.handleBtnGetJoke();}}}
</script><style lang="scss" scoped>
.joke-list {list-style-type: decimal;list-style-position: outside;padding: 5px 0;border-bottom: dashed 1px #ccc;
}.loading {margin: 0 auto;text-align:center;
}
</style>

解决跨域问题

如果你在组件中ajax发起请求时axios.get('http://v.juhe.cn/joke/content/text.php',{params:{key:'xxx'}})

此时会报错Access to XMLHttpRequest at 'http://v.juhe.cn/joke/content/text.php?key=xxx' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

进入.vuepress/config.js,配置文件中

module.exports = {title: 'itclanCoder', // 博客标题description: 'itclanCoder,itclanCoder的技术博客,itclan', // 博客描述,利于SEOkeywords: 'itclanCoder的技术博客, itclanCoder', // 关键字// ...其他省略devServer: {    // 添加这个devServer配置  proxy: {     '/api': {       target: 'http://v.juhe.cn',     // 这里填写具体的真实服务器接口地止   changeOrigin: true,            // 允许跨域  pathRewrite: {          '^/api': ''       }      }, }  }
};

当在Vue组件中访问/api开头时,前端会自动的代理到target目标地止上,这样就完成了转向代理,解决了开发环境下跨域的问题的

网上有的说,在根目录下创建vue.config.jsdevServer配置配置到vue.config.js中,我试了,发现不起作用,不知道为什么,有知道的朋友可以告诉我一下,谢谢

如果想要全局进行使用axios,把它挂载到Vue根实例下,则可以全局引入,如果不这样,那在组件当中,在使用axios之前,每次都需要按需引入的

为了解决这个问题,可以,一次性注入的,将axios对象挂载在Vueprototype下的,这样,在实例组件下都是有axios对象的

全局引入axios

docs/.vuepress/enhanceApp.js中引入

import axios from 'axios'
export default ({ Vue }) => {Vue.prototype.$axios = axios;
}

那在组件中,使用时,只需要this.$axios.get(),或this.$axios.post(),就可以了的,无需单文件组件前每次都引入axios了的

其实,引入Jquery也是同样类似的,凡是想要挂载在Vue组件根实例下公有属性和方法,都可以这么做

前后端开发接口联调对接参数

2023-09-13

0be2d159385162b39b4e1b7b60d94d66.jpeg

填写问卷就能赚奖金

2023-09-12

524a3649832f4345a77f684f2a6b68c8.jpeg

Vue中实现全景房看图3D

2023-09-11

d15e9b279eba8496045d115d552019cb.jpeg

老太太阿姨收割机秀才被封

2023-09-10

4e37da2361b0b1926f91709d0060da79.jpeg

聊一下酱香拿铁,瑞幸与茅台强强联手

2023-09-09

87c0ad82e07d0eec1e2a77ef62d694e4.jpeg

Vue中实现3D得球自动旋转

2023-09-08

338329fd30ef000bf52f64074ab3e954.jpeg

Vue中如何实现城市3D分布图

2023-09-07

e6c17d9eb15dbc2e6556c69fe2a24793.jpeg

4d9eac9ae2775ec97bccfa7a428dd2b8.png

(能绘画,能问答)

9f3221c2f01a143ced2ce7037bc3e388.png

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

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

相关文章

R语言实现样本量的估算(2)

本文默认α0.05(sig.level)&#xff0c;β0.2(power)&#xff0c;根据研究需要可调整。 导入包 library(pwr) &#xff08;1&#xff09;已知标准差和预期差异 1、单样本t检验&#xff1a;某治疗措施预期提高某物质水平8mg/L&#xff0c;标准差为10mg/L。 #单样本t检验 pw…

[架构之路-219]:工程师成长为优秀架构师的路径

目录 一、基本概念的澄清 1.1 业务business - 客户、市场、分析师 1.2 分析analysis - 分析师、架构师 1.3 设计design - 架构师、设计师、专家 1.5 分析与设计的比较 1.5 编码coding/programming - 专家、资深程序员、程序员 二、架构师具备的技能 三、软件架构师的认…

爬虫框架Scrapy学习笔记-2

前言 Scrapy是一个功能强大的Python爬虫框架&#xff0c;它被广泛用于抓取和处理互联网上的数据。本文将介绍Scrapy框架的架构概览、工作流程、安装步骤以及一个示例爬虫的详细说明&#xff0c;旨在帮助初学者了解如何使用Scrapy来构建和运行自己的网络爬虫。 爬虫框架Scrapy学…

【Linux学习笔记】权限

1. 普通用户和root用户权限之间的切换2. 权限的三个w2.1. 什么是权限&#xff08;what&#xff09;2.1.1. 用户角色2.1.2. 文件属性 2.2. 怎么操作权限呢&#xff1f;&#xff08;how&#xff09;2.2.1. ugo-rwx方案2.2.2. 八进制方案2.2.3. 文件权限的初始模样2.2.4. 进入一个…

并发编程——synchronized

文章目录 原子性、有序性、可见性原子性有序性可见性 synchronized使用synchronized锁升级synchronized-ObjectMonitor 原子性、有序性、可见性 原子性 数据库事务的原子性&#xff1a;是一个最小的执行的单位&#xff0c;一次事务的多次操作要么都成功&#xff0c;要么都失败…

mtk安卓启动动画与drm简解

mtk-drm初始化 mtk-drm commit送显流程&#xff08;一&#xff09; 背景 在使用安卓双屏时&#xff0c;发现两个屏幕不是同时点亮的&#xff0c;两个屏幕不是直连到soc的显示接口&#xff0c;是通过ti方案941-948这种方案连接的&#xff0c;需要配置才能显示到屏幕&#xff0c…

蓝桥杯 题库 简单 每日十题 day6

01 删除字符 题目描述 给定一个单词&#xff0c;请问在单词中删除t个字母后&#xff0c;能得到的字典序最小的单词是什么&#xff1f; 输入描述 输入的第一行包含一个单词&#xff0c;由大写英文字母组成。 第二行包含一个正整数t。 其中&#xff0c;单词长度不超过100&#x…

记录selenium和chrome使用socks代理打开网页以及查看selenium的版本

使用前&#xff0c;首先打开socks5全局代理。 之前我还写过一篇关于编程中使用到代理的情况&#xff1a; 记录一下python编程中需要使用代理的解决方法_python 使用全局代理_小小爬虾的博客-CSDN博客 在本文中&#xff0c;首先安装selenium和安装chrome浏览器。 参考我的文章…

【Spring IOC容器加载过程】

Spring IOC容器加载分为以下几个步骤&#xff1a; 定位配置文件&#xff1a;首先需要定位Spring配置文件&#xff0c;Spring提供了多种方式&#xff0c;如通过ClassPath、FileSystem等方式进行定位。 加载配置文件&#xff1a;在定位到配置文件后&#xff0c;通过BeanDefiniti…

用VS Code运行C语言(安装VS Code,mingw的下载和安装)

下载并安装VS code。 安装扩展包&#xff1a; 此时&#xff0c;写完代码右键之后并没有运行代码的选项&#xff0c;如图&#xff1a; 接下来安装编译器mingw。 下载链接&#xff1a; https://sourceforge.net/projects/mingw-w64/ 得到压缩包&#xff1a; 解压&#xff1a; …

外呼系统和呼叫中心系统的优势和特点

在金融投资、教育培训、保险、互联网、旅游、房地产、广告等行业服务或产品电话营销中&#xff1b;在节日促销、招商加盟、活动通知等项目中&#xff1b;作为企业的管理者的您&#xff0c;是否还在因为销售人员效率低&#xff0c;人员成本高等问题头疼? 其实&#xff0c;您只…

滚雪球学Java(26):Java进制转换

&#x1f3c6;本文收录于「滚雪球学Java」专栏&#xff0c;专业攻坚指数级提升&#xff0c;助你一臂之力&#xff0c;带你早日登顶&#x1f680;&#xff0c;欢迎大家关注&&收藏&#xff01;持续更新中&#xff0c;up&#xff01;up&#xff01;up&#xff01;&#xf…

19异常的学习笔记

异常 很重要&#xff0c;有利于我们平时处理问题 异常就是代表程序出现了问题 常见的异常比如说 数组越界除法除0 异常的体系是什么 java.lang.Throwable Error Exception RuntimeException 其他异常 Error 代表的是系统级别的错误&#xff0c;也就是一旦系统出现问题&…

由于数字化转型对集成和扩展性的要求,定制化需求难以满足,百数低代码服务商该如何破局?

当政策、技术环境的日益成熟&#xff0c;数字化转型逐步成为企业发展的必选项&#xff0c;企业数字化转型不再是一道选择题&#xff0c;而是决定其生存发展的必由之路。通过数字化转型升级生产方式、管理模式和组织形式&#xff0c;激发内生动力&#xff0c;成为企业顺应时代变…

最新适合小白前端 Javascript 高级常见知识点详细教程(每周更新中)

1. window.onload 窗口或者页面的加载事件&#xff0c;当文档内容完全加载完成会触发的事件&#xff08;包括图形&#xff0c;JS脚本&#xff0c;CSS文件&#xff09;&#xff0c;就会调用处理的函数。 <button>点击</button> <script> btn document.q…

python项目2to3方案预研

目录 官方工具2to3工具安装参数解释基本使用工具缺陷 future工具安装参数解释基本使用工具缺陷 python-modernize工具安装参数解释基本使用工具缺陷 pyupgrade工具安装参数解释基本使用工具缺陷 对比 官方工具2to3 2to3 是Python官方提供的用于将Python 2代码转换为Python 3代…

如何在 CentOS 8 上安装 OpenCV?

OpenCV( 开源计算机视觉库)是一个开放源代码计算机视觉库&#xff0c;支持所有主要操作系统。它可以利用多核处理的优势&#xff0c;并具有 GPU 加速功能以实现实时操作。 OpenCV 的用途非常广泛&#xff0c;包括医学图像分析&#xff0c;拼接街景图像&#xff0c;监视视频&am…

单例模式(饿汉模式 懒汉模式)与一些特殊类设计

文章目录 一、不能被拷贝的类 二、只能在堆上创建类对象 三、只能在栈上创建类对象 四、不能被继承的类 五、单例模式 5、1 什么是单例模式 5、2 什么是设计模式 5、3 单例模式的实现 5、3、1 饿汉模式 5、3、1 懒汉模式 &#x1f64b;‍♂️ 作者&#xff1a;Ggggggtm &#x…

VM虚拟机CentOS7.9x64 LVM硬盘扩容

软件版本&#xff1a;VMWare Workstation14 虚拟机CentOS 7.9X64位 GParted 0.33.0 一、虚拟机安装gparted软件 sudo yum install epel-release sudo yum install gparted sudo yum install yum-utils git gnome-common gcc-c sudo yum-builddep gparted 二、关闭虚拟机&a…

一、Java简介

基础知识 1.1.Java简介1.1.1.什么是Java语言1.1.2.Java应用的领域1.1.3.Java版本1.1.4.如何学好Java1.1.5.Java API文档1.1.6.Java语言特性 —————————————————————————————————————————————————— —————————————…