Vue框架引入Axios

news2025/1/17 1:07:10

首先已经创建好了 Vue 框架,安装好了 node.js。
没有完成的可按照此博客搭建:搭建Vue项目
之后打开终端,使用命令。

1、命令安装 axios 和 vue-axios
npm install axios --save
npm install vue-axios --save
2、package.json 查看版本

在 package.json 文件里可查看下载好的依赖版本。
在这里插入图片描述

3、在 main.js 完整引入
import axios from 'axios'
import VueAxios from 'vue-axios'
// VueAxios 与 axios 的位置不能交换,否则出现 TypeError: Cannot read property 'protocol' of undefined 
Vue.use( VueAxios , axios)

在这里插入图片描述

4.使用

初始化方法:

methods:{
	getList(){
		this.axios.get('http://localhost:8000/user/getList',{
			params:{
				page:this.query.page,
				size:this.query.size,
				name:this.query.name
			}
		}).then((resp)=>{
			console.log(resp);
			this.tableData = resp.data.content.list;
			this.total = resp.data.content.total;
		})
	},
}

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

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

相关文章

Binder系列-service_manager.c

1. service_manager的任务 open 驱动告诉驱动,它是“servicemanager”在一个循环里 从驱动读取数据 解析数据 调用,根据code执行注册服务或者获取服务 (图来自韦老师的视频) 2.代码流程 2.1.open驱动 //framework…

elasticsearch列一:索引模板的使用

概述 近期一直在负责es这块,就想着和大家分享一些使用经验,我们从存储、查询、优化、备份、运维等几个方面来做分享。今天咱们先看下如何更加合理的存储数据。 初见索引模板 记得刚接触es还是18年那会,项目上线后因一些原因导致日志这部分的…

深入理解JVM虚拟机第三十二篇:详解JVM当中本地方法栈

😉😉 欢迎加入我们的学习交流群呀! ✅✅1:这是孙哥suns给大家的福利! ✨✨2:我们免费分享Netty、Dubbo、k8s、Mybatis、Spring等等很多应用和源码级别的高质量视频和笔记资料,你想学的我们这里都有! 🥭🥭3:QQ群:583783824 📚📚 工作VX:BigTreeJava 拉你…

059:vue中使用 AJAX来读取来自XML文件的信息

第059个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下,本专栏提供行之有效的源代码示例和信息点介绍,做到灵活运用。 (1)提供vue2的一些基本操作:安装、引用,模板使…

SpreadJS 集成使用案例

SpreadJS 集成案例 介绍: SpreadJS 基于 HTML5 标准,支持跨平台开发和集成,支持所有主流浏览器,无需预装任何插件或第三方组件,以原生的方式嵌入各类应用,可以与各类后端技术框架相结合。SpreadJS 以 纯前…

Python之路:网络工程师的自动化进阶(第2版)

💂 个人网站:【 海拥】【神级代码资源网站】【办公神器】🤟 基于Web端打造的:👉轻量化工具创作平台💅 想寻找共同学习交流的小伙伴,请点击【全栈技术交流群】 I. 引言 随着网络技术的不断发展,…

H5向微信小程序发送信息(小程序web-view打开H5)

引入weixin-js-sdk npm i weixin-js-sdk 页面引入 // 引入wxjsimport wx from "weixin-js-sdk"; 点击触发方法 methods: {goweap(id){console.log(wx);// H5传递数据 (navigateBack)wx.miniProgram.navigateBack({delta: 1});wx.min…

混沌工程的核心原则是什么?

在软件开发和系统运维领域,一种新兴的实践逐渐崭露头角,那就是混沌工程。混沌工程的核心理念是通过有计划的、控制的实验引入混沌,以验证和改善系统的稳健性。本文将介绍混沌工程的定义及核心原则是什么! 什么是混沌工程? 混沌工程是一种系统…

【理论】STM32定时器时间计算公式 +【实践】TIM中断1s计时一次

前言:定时器TIM的详细知识点见我的博文:11.TIM定时中断-CSDN博客 STM32定时器时间计算公式 公式解释: ARR(TIM_Period):自动重装载值,是定时器溢出前的计数值 PSC(TIM_Prescaler&…

k8s的二进制部署(源码包部署)

实验条件: 主机名 IP地址 组件 作用 master01 20.0.0.17 kube-apiserver、kube-controller-manager、kube-scheduler、etcd k8s部署 master02 20.0.0.27 kube-apiserver、kube-controller-manager、kube-scheduler node01 20.0.0.37 kubelet、kube-pro…

工具系列:TimeGPT_(8)使用不规则时间戳进行时间序列预测

文章目录 介绍不规则时间戳的单变量时间预测不规则时间戳的外生变量时间预测 介绍 在处理时间序列数据时,时间戳的频率是一个关键因素,可以对预测结果产生重大影响。像每日、每周或每月这样的常规频率很容易处理。然而,像工作日这样的不规则…

OpenAPI,已支持表单数据格式校验

OpenAPI 路径 开放平台 功能简介 「OpenAPI」- 支持表单数据格式校验。 通过「OpenAPI-新增表单数据」接口,新增数据时,若数据格式不匹配,会导致无法新增。 例如,数字不能新增到日期格式的表单字段。 请参考数据格式传参&a…

IPv4归属地信息查询方法与应用

IPv4地址归属地信息查询是网络管理和安全领域的关键工具。本文将介绍IPv4地址的概念,探讨IPv4归属地信息的重要性,并详细介绍几种查询IPv4归属地信息的方法以及其应用场景。 第一部分:IPv4地址简介 1.1 什么是IPv4地址 IPv4(In…

HTML 网页设计 简约风格 注册界面

成品如下 html <!DOCTYPE html> <html><head><meta charset"utf-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Science科幻注册界面</title><link href"…

游戏服务器列表-增量处理

前言 服务器列表比较简单 固定表/开服表&#xff08;一般只会增加及合并),操作频率很低 一般由 服务器ID IP NAME 开服时间 为什么要自己写个&#xff0c; MySQL的增量备份日志&#xff0c;相对太复杂了 看下 一条UPDATE 语句 随便找了表 修改了 10002 level 1 ->2 得用专门…

uniapp原生插件 - android原生插件打包流程 ( 避坑指南一)

【彩带- 避坑知识点】: 当时开发中安卓插件打包成功后&#xff0c;uniapp引用插件aar&#xff0c;用云打包 &#xff0c;总是提示不包含插件。原因是因为module的androidManifest.xml文件没有注册activity。 这一步 很重要&#xff0c;一定要注册。 --------------------------…

Mybatis枚举类型处理和类型处理器

专栏精选 引入Mybatis Mybatis的快速入门 Mybatis的增删改查扩展功能说明 mapper映射的参数和结果 Mybatis复杂类型的结果映射 Mybatis基于注解的结果映射 文章目录 专栏精选摘要引言正文枚举类型映射简单枚举映射枚举顺序映射复杂枚举映射 类型处理器 总结 摘要 在这篇…

【C++】开源:cpp-httplib HTTP协议库配置与使用

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍cpp-httplib HTTP协议库配置与使用。 无专精则不能成&#xff0c;无涉猎则不能通。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&a…

vmware虚拟机中Nat、桥接模式和仅主机的差别

NAT 在NAT模式下&#xff0c;主机3是Kali和Win两个操作系统的宿主机&#xff0c;那么Kali和Win可以连接到外网&#xff0c;也可以和主机3进行互联&#xff0c;但是主机1和主机2不能连接到Kali和Win。 桥接 在桥接模式下&#xff0c;主机3是Kali和Win两个操作系统的宿主机&…

PyTorch实战:基于Seq2seq模型处理机器翻译任务(模型预测)

文章目录 引言数据预处理加载字典对象en2id和zh2id文本分词 加载训练好的Seq2Seq模型模型预测完整代码结束语 引言 随着全球化的深入&#xff0c;翻译需求日益增长。传统的人工翻译方式虽然质量高&#xff0c;但效率低&#xff0c;成本高。机器翻译的出现&#xff0c;为解决这…