Vue3实践之全局请求URL配置和请求参数说明

Vue3实践之全局请求URL配置和请求参数说明

全局请求URL配置

1、首先需要导入router和axios

import router from "@/router";

2、创建app,将router挂载到app上

const app = createApp(App)
app.use(router).use(elementIcons).mount('#app')

3、设置全局请求路径以及


//设置全局请求地址
let VUE_APP_BASE_DEV_API = 'http://localhost:8092'
let VUE_APP_BASE_PRODUCT_API = "http://localhost:8092"//将axios实例绑定到$http属性上
app.config.globalProperties.$http = axios//设置请求url
axios.defaults.baseURL = VUE_APP_BASE_DEV_API
//设请求头
axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8'
//
axios.defaults.headers.post['Accept'] = 'application/json'

4、在vue中使用

	 //post请求this.$http.post('/scheduler/add-task', this.myJobData).then(reponse => {console.log('response:', reponse);}, error => {console.log('error', error)});

请求参数说明

  • Params对象
    • 当需要向 URL 查询字符串添加参数时,可以使用 params 字段。这些参数会被序列化并附加到请求 URL 的末尾。适用于 GET 请求等不支持在请求体中传递数据的方法
    • 对于数组或对象类型的参数,Axios 内部使用 URLSearchParams 或 qs 库(如果已配置)进行序列化。默认情况下,数组会以 arr[]=value1&arr[]=value2 的形式传递。如果需要自定义序列化规则,可以使用第三方库(如 qs)自行处理
  • data对象(适用于 POST、PUT、PATCH 请求)
    • 对于需要在请求体中传递数据的 HTTP 方法(如 POST、PUT、PATCH),可以使用 data 字段。数据可以是 JSON 对象、FormData 对象、字符串或者其他格式,具体取决于 Content-Type 设置

Post请求示例

	 //this.myJobData就是上面所说的data对象this.$http.post('/scheduler/add-task', this.myJobData).then(reponse => {console.log('response:', reponse);}, error => {console.log('error', error)});

Get请求示例

      this.$http.get('/scheduler/list', {params: {id: '123', name: '张三'}}).then(response => {console.log('data:', response.data.data)console.log('data:', response.data)this.tableData = response.data}, error => {console.log(error.message);});

不管是何种请求,后端接收时需要保证属性名一致或者使用注解指定请求参数的名称。

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

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

相关文章

安装苹果ipa的方法

1、如何生成udid udid获取工具 https://www.betaqr.com/tools 提示下载后 2、爱思助手安装苹果app mac下载爱思助手,数据线连接手机,把ipa包拖到爱思助手app应用选项里 3、新手机调试需要先选中设备,再注册

VMwear桥接网络正确配置+静态IP设置

1.桥接网络配置 很多时候在VMware安装完虚拟机之后,会发现配置的桥接网络没有起作用,如果是Linux下输入ifconfig发现只有ipv6的地址而没有ipv4,说明没有桥接没有启用成功,需要按照以下方式来设置 在VMware的左上角打开编辑&#…

Redis(持久化 -- RDB AOF)

持久化 通常我们认为持久化为: 重启进程/重启主机之后, 数据仍然存在不丢失 把数据存储在硬盘上 – 持久 把数据存储在内存中 – 不持久 Redis 持久化 redis 是一个内存数据库, 也就是说本身是不持久的(但是快[效率高]), 于是 Redis 提供了持久化机制 — RDB 和 AOF 二者都是对…

H.265网页无插件播放EasyPlayer.js流媒体播放器常见问题及解答

EasyPlayer属于一款高效、精炼、稳定且免费的流媒体播放器,可支持多种流媒体协议播放,无须安装任何插件,起播快、延迟低、兼容性强,使用非常便捷。 今天我们来汇总下用户常见的几个问题及解答。 1、EasyPlayer.js播放多路H.265视…

Android 输入法框架

输入法属于输入系统的一部分,区别于输入系统只能向系统产生时间,输入法能向系统输入具体的内容,下面来认识输入法的大体框架,以下内容参考清华大学出版社出版的《Android图形显示系统》。 输入法框架包含3个组件,各组件…

python画图Matplotlib和Seaborn

python画图Matplotlib和Season 一、Matplotlib1、介绍2、安装3、内容二、Seaborn1、介绍2、安装3、内容一、Matplotlib Matplotlib官网 1、介绍 Matplotlib 是一个 Python 的绘图库,用于创建高质量的二维图表和一些基本的三维图表。它广泛应用于科学计算、数据分析、工程学和…

基于springboot+vue实现的的成人教育教务系统

作者主页:Java码库 主营内容:SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app等设计与开发。 收藏点赞不迷路 关注作者有好处 文末获取源码 技术选型 【后端】:Java 【框架】:spring…

uview2 表单Form校验validate不生效处理方法

先贴官网实例&#xff1a; <template><view class""><u-form :model"form" ref"uForm"><u-form-item label"姓名" prop"name"><u-input v-model"form.name" /></u-form-item&g…

AI时代,搜索引擎的巨头地位恐怕不保了

兄弟们&#xff0c;你们使用搜索网站的频率有降低吗&#xff1f; ChatGPT 已经流行了一年多了&#xff0c;这期间数个大模型都发展了起来。 搜索引擎本质上也属于问答系统&#xff0c;所以&#xff0c;在大模型成熟之后&#xff0c;我使用搜索的频率越来越低了。 主要是因为…

python实现pdf的页面替换

利用第三方库PyPDF2&#xff0c;下面例子中进行的是将 origin.pdf 的第17页替换为 s17.pdf 的第1页&#xff1a; import PyPDF2def replace_pages(original_pdf_path, replacement_pages):with open(original_pdf_path, rb) as original_file:original_pdf PyPDF2.PdfReader(…

水牛社:互联网赚钱秘籍,免费项目,你真敢要吗?

免费是最贵的。真正理解并使用这句话的只有少数人&#xff0c;今天在网上分享一下免费项目背后的逻辑&#xff0c;抛开现象&#xff0c; 本质是最重要的。 我从事互联网工作15年。不管是过去还是现在&#xff0c;总有人喜欢问有没有免费项目&#xff1f; 其实我平时懒得回答…

java基础语法(13)

1. final关键字 final概述 学习了继承后&#xff0c;我们知道&#xff0c;子类可以在父类的基础上改写父类内容&#xff0c;比如&#xff0c;方法重写。那么我们能不能随意的继承API中提供的类&#xff0c;改写其内容呢&#xff1f;显然这是不合适的。为了避免这种随意改写的情…

pkg打包nodejs程序用动态require路由出现问题

动态路由问题 pkg打包的时候会自动生成一个虚拟路径/snapshot/…会导致你的路径出现一些问题 而项目中依据route文件夹下的文件动态use相应的router&#xff0c;这就需要动态require&#xff0c;但是这个require的路径会被虚拟路径代替导致取不到&#xff0c;所以可以使用写死…

理解vue2中的watch监听

vue实例组件初始化过程中&#xff0c;在执行initState(vm)方法初始化状态时&#xff0c;判断options.watch有值时会进行initWatch(vm, options.watch)处理&#xff0c;然后对watch对象中的每个watch属性执行createWatcher方法 function initState(vm) {// 传入的watchif (opti…

华为OD机试 - 最多颜色的车辆(Java JS Python C C++)

须知 哈喽,本题库完全免费,收费是为了防止被爬,大家订阅专栏后可以私信联系退款。感谢支持 文章目录 须知题目描述输入描述输出描述解析代码题目描述 在一个狭小的路口,每秒只能通过一辆车,假设车辆的颜色只有 3 种,找出 N 秒内经过的最多颜色的车辆数量。 三种颜色编…

线程与Task的区别 async和await关键字

任务Task和线程Thread的区别&#xff1a; 1、任务是架构在线程之上的&#xff0c;也就是说任务最终还是要抛给线程去执行。 2、任务跟线程不是一对一的关系&#xff0c;比如开10个任务并不是说会开10个线程&#xff0c;这一点任务有点类似线程池&#xff0c;但是任务相比线程池…

C++初阶---vector(STL)

1、vector的介绍和使用 1.1、vector的介绍 1. vector是表示可变大小数组的序列容器。 2. 就像数组一样&#xff0c;vector也采用的连续存储空间来存储元素。也就是意味着可以采用下标对vector的元素 进行访问&#xff0c;和数组一样高效。但是又不像数组&#xff0c;它的大小是…

为什么你选择成为一名程序员?

成为一名程序员&#xff0c;是基于多种因素的考量。 首先&#xff0c;对技术和创新的热爱是关键因素之一。编程是一种创造的过程&#xff0c;能够将抽象的想法转化为实际的应用程序和系统&#xff0c;这种创造的满足感令人着迷。 其次&#xff0c;编程领域的广阔发展前景也是…

MATLAB 普通场景的道路点云分割 (方法一)(56)

MATLAB 普通场景的道路点云分割(方法一) (56) 一、分割原理二、算法实现1.代码一、分割原理 基于这样一个认识:大部分情况下,点云都是分块去处理的,在某块点云场景中,点云区域不大,地面基本是水平分布的,不会有较大的坡度,因此将其认为是一个法向与Z轴大致平行的平…

前端开发语言种类说明

前端开发主要涉及的语言包括HTML、CSS、JavaScript&#xff0c;以及TypeScript和JQuery等流行工具和框架。这些语言和技术的详细介绍如下&#xff1a;12 HTML&#xff08;HyperText Markup Language&#xff09;。HTML是用于构建Web页面的标记语言&#xff0c;用于定义页面的结…