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

axios 各种方式的请求 示例

GET请求

示例一:

  • 服务端代码
@GetMapping("/f11")
public String f11(Integer pageNum, Integer pageSize) {return pageNum + " : " + pageSize;
}
  • 前端代码
<template><div class="home"><button @click="getFun1">发送get请求</button></div>
</template>
<script>import axios from 'axios'export default {name: 'Home',methods: {getFun1 () {axios.get('http://localhost/blog/f11?pageNum=12&pageSize=8').then(res => {console.log(res)})}}}
</script>

示例二:

  • 服务端代码
@GetMapping("/f12")
public String f12(Integer pageNum, Integer pageSize, HttpServletRequest request) {String token = request.getHeader("token");return pageNum + " : " + pageSize + " : " + token;
}
  • 前端代码
<template><div class="home"><button @click="getFun2">发送get请求</button></div>
</template>
<script>import axios from 'axios'export default {name: 'Home',methods: {getFun2 () {axios.get('http://localhost/blog/f12', {params: {pageNum: 12,pageSize: 8},headers: {token: 'asdf123456'}}).then(res => {console.log(res)})}}}
</script>

GET方式采用接口方式携带参数,比如上面示例最终请求服务器端的url是:
在这里插入图片描述

POST请求

示例一:

  • 服务端代码
@PostMapping("/f21")
public String f21(@RequestBody String param) {return param;
}
  • 前端代码
<template><div class="home"><button @click="postFun1">发送post请求</button></div>
</template>
<script>import axios from 'axios'export default {name: 'Home',data () {return {queryInfo1: {query: {username: 'zhangsan',password: '1234'}}}},methods: {postFun1 () {let _this = thisaxios.post('http://localhost/blog/f21', _this.queryInfo1).then(res => {console.log(res)})},}}
</script>

结果:
在这里插入图片描述
在这里插入图片描述

示例二:

  • 服务端代码
@PostMapping("/f21")
public String f21(@RequestBody String param) {return param;
}
  • 前端代码
<template><div class="home"><button @click="postFun2">发送post请求</button></div>
</template>
<script>import axios from 'axios'export default {name: 'Home',data () {return {queryInfo2: {username: 'zhangsan',password: '1234'}}},methods: {postFun2 () {let _this = thisaxios.post('http://localhost/blog/f21', {data: _this.queryInfo2}).then(res => {console.log(res)})}}}
</script>

结果:
在这里插入图片描述
在这里插入图片描述

示例三:

  • 服务端代码
@PostMapping("/f23")
public String f23(Integer aa, Integer bb,@RequestBody String query) {return aa + ": " + bb + ": " + query;
}
  • 前端代码
<template><div class="home"><button @click="postFun3">发送post请求</button></div>
</template>
<script>import axios from 'axios'export default {name: 'Home',data () {return {queryInfo2: {username: 'zhangsan',password: '1234'}}},methods: {postFun3 () {let _this = thisaxios.post('http://localhost/blog/f23', _this.queryInfo2, {params: { //params表示url中传递的参数,它会拼接在url后面aa: 11,bb: 22}}).then(res => {console.log(res)})}}}
</script>

请求的url为:http://localhost/blog/f23?aa=11&bb=22 ,结果:
在这里插入图片描述
在这里插入图片描述

注意上面三个示例中传递到后台的username和password参数采用下面方式后台是无法获取到的:

@PostMapping("/f22")
public String f22(String username, String password) {return username + " : " + password;
}

原因是axios.post默认情况下传递到后台的数据是JSON格式的,通过设置POST请求头,可以告诉服务器请求主体的数据格式为kv的形式,比如:a=aaaa&b=bbbb。

示例:设置POST请求的格式

  • 后台代码
@PostMapping("/f21")
public String f21(@RequestBody String param) {return param;
}
  • 前端代码
<template><div class="home"><button @click="postFun1">发送post请求</button><button @click="postFun2">发送post请求</button></div>
</template>
<script>import axios from 'axios'axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'import qs from 'qs'export default {name: 'Home',methods: {postFun1 () {let params = new URLSearchParams()params.append('username', 'zhangsan')params.append('password', '1234')axios.post('http://localhost/blog/f22', params).then(res => {console.log(res)})},postFun2 () {let params = qs.stringify({'username': 'zhangsan','password': 1234})axios.post('http://localhost/blog/f22', params).then(res => {console.log(res)})},}}
</script>

前端会将参数以kv字符串的形式发送到后台:username=zhangsan&password=1234。上面示例前端网页中请求的也可以用下面控制器接收:

@PostMapping("/f22")
public String f22(String username, String password) {return username + " : " + password;
}

Put

示例一:

  • 前端
let _this = this
_this.$axios.put(`/user/${user.id}/status`).then(res => {  //注意,此处使用的是反斜杠console.log(res)
})
  • 后端
@PutMapping("/user/{userId}/status")
public Result changStatus(@PathVariable("userId") Integer userId){}

示例二:

  • 前端
const param = {userId:1
}
_this.$axios.put('/user/update',param).then(res=>{console.log(res)
})
  • 后端
@PutMapping("/user/update")
public Result changStatus(@PathVariable("userId") Integer userId){}

patch

前端

const param={ids:[1,3,5,8]
}
_this.$axios.patch('/user/p',param).then(res=>{console.log(res)
}),

Delete

前端

_this.$axios.delete('/user/delete',{params:{id:1}}).then(res=>{console.log(res)})

相关文章:

axios 各种方式的请求 示例

GET请求 示例一&#xff1a; 服务端代码 GetMapping("/f11") public String f11(Integer pageNum, Integer pageSize) {return pageNum " : " pageSize; }前端代码 <template><div class"home"><button click"getFun1…...

基于开源模型搭建实时人脸识别系统(四):人脸质量

续人脸识别实战之基于开源模型搭建实时人脸识别系统&#xff08;三&#xff09;&#xff1a;人脸关键点、对齐模型概览与模型选型_CodingInCV的博客-CSDN博客 不论对于静态的人脸识别还是动态的人脸识别&#xff0c;我们都会面临一个问题&#xff0c;就是输入的人脸图像的质量可…...

【开发笔记】ubuntu部署指定版本的前后端运行环境(npm nodejs mysql)

目录 1 背景2 环境要求3 部署流程3.1 npm的安装3.2 nodejs的安装3.3 MySQL的安装 4 可能的问题 1 背景 在远程服务器上的Ubuntu系统中&#xff0c;部署指定版本的前后端项目的运行环境 2 环境要求 npm 9.5.1Nodejs v18.16.1MySQL 8.0.33 3 部署流程 3.1 npm的安装 通过安…...

用于优化开关性能的集成异质结二极管的4H-SiC沟道MOSFET

标题&#xff1a;4H-SiC Trench MOSFET with Integrated Heterojunction Diode for Optimizing Switching Performance 摘要 本研究提出了一种新型的4H-SiC沟道MOSFET&#xff0c;其在栅槽底部集成了异质结二极管&#xff08;HJD-TMOS&#xff09;&#xff0c;并通过TCAD模拟进…...

优化个人博客总结

前面学习完怎么搭建个人博客&#xff0c;后面要做的就是排版优化自己的博客了&#xff0c;今天通过教程学习到了然后更爱美化其中的效果&#xff0c;还通过改写代码来带到基本的效果展示&#xff0c;同时也把最开始学习的计算速成课的笔记输出在上面&#xff0c;这也是一个很好…...

从零构建深度学习推理框架-9 再探Tensor类,算子输入输出的分配

再探Tensor类&#xff1a; 第二节中我们编写的Tensor类其实并不能满足我们的使用需要&#xff0c;我们将在这一节以代码阅读的方式来看看一个完全版本的Tensor应该具备怎样的要素&#xff0c;同时我们对Tensor类的分析来看看在C中一个设计好的类应该是怎么样的。 Tensor<fl…...

Vue使用element-ui

main.js配置 //引入Vue import Vue from vue //引入App import App from ./App.vue//完整引入 //引入ElementUI组件库 // import ElementUI from element-ui; //引入ElementUI全部样式 // import element-ui/lib/theme-chalk/index.css;//按需引入 import { Button,Row,DatePi…...

使用ApplicationRunner简化Spring Boot应用程序的初始化和启动

ApplicationRunner这个接口&#xff0c;我们一起来了解这个组件&#xff0c;并简单使用它吧。&#x1f92d; 引言 在开发Spring Boot应用程序时&#xff0c;应用程序的初始化和启动是一个重要的环节。ApplicationRunner是Spring Boot提供的一个有用的接口&#xff0c;可以帮助…...

Vue 2.x 项目升级到 Vue 3详细指南【修改清单】

文章目录 前言0.迁移过程1. 安装 Vue 32. 逐一处理迁移中的警告3. 迁移全局和内部 API4. 迁移 Vue Router 和 Vuex5. 处理其他的不兼容变更 1. Vue3特性1. Composition API2. 更好的性能3. 更好的 TypeScript 支持4. 多个根元素5. Suspense 组件6. Teleport 组件7. 全局 API 的…...

【算法日志】贪心算法刷题:重叠区问题(day31)

代码随想录刷题60Day 目录 前言 无重叠区间&#xff08;筛选区间&#xff09; 划分字母区间&#xff08;切割区间&#xff09; 合并区间 前言 今日的重点是掌握重叠区问题。 无重叠区间&#xff08;筛选区间&#xff09; int eraseOverlapIntervals(vector<vector<in…...

基于Jenkins构建生产CICD环境、jenkins安装

目录 Jenkins简介 安装配置Jenkins Jenkins简介 Jenkins是一个用Java编写的开源的持续集成工具。在与Oracle发生争执后&#xff0c;项目从Hudson项目独立。官方网站&#xff1a;https://jenkins.io/。 Jenkins提供了软件开发的持续集成服务。它运行在Servlet容器中&#xff…...

基于Java SpringBoot+vue+html 的地方美食系统(2.0版本)

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W,csdn、博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 文章目录 1 简介2 技术栈3 系统流程的分析3.1 用户管理的流程3.2个人中心管理流程3.3登录流程 4系统设计…...

opencv-gpu版本编译(添加java支持,可选)实现硬解码

目录 opencv gpu版本编译&#xff0c;实现硬解码&#xff0c;加速rtsp视频流读取1、准备文件2、复制 NVCUVID 头文件到 cuda 安装目录 include3、安装相关依赖4、 执行cmake5、编译安装6、测试 opencv gpu版本编译&#xff0c;实现硬解码&#xff0c;加速rtsp视频流读取 前置条…...

数据分析问答总结

一、SQL窗口函数 1.是什么 OLAP&#xff08;Online Anallytical Processing联机分析处理&#xff09;&#xff0c;对数据库数据进行实时分析处理。 2.基本语法&#xff1a; <窗口函数>OVER &#xff08;PARTITION BY <用于分组的列名> ORDER BY <用于排序的…...

Python学习笔记_实战篇(二)_django多条件筛选搜索

多条件搜索在很多网站上都有用到&#xff0c;比如京东&#xff0c;淘宝&#xff0c;51cto&#xff0c;等等好多购物教育网站上都有&#xff0c;当然网上也有很多开源的比楼主写的好的多了去了&#xff0c;仅供参考&#xff0c;哈哈 先来一张效果图吧&#xff0c;不然幻想不出来…...

【生态经济学】利用R语言进行经济学研究技术——从数据的收集与清洗、综合建模评价、数据的分析与可视化、因果推断等方面入手

查看原文>>>如何快速掌握利用R语言进行经济学研究技术——从数据的收集与清洗、综合建模评价、数据的分析与可视化、因果推断等方面入手 近年来&#xff0c;人工智能领域已经取得突破性进展&#xff0c;对经济社会各个领域都产生了重大影响&#xff0c;结合了统计学、…...

xml中的vo是干什么用的

在Java中&#xff0c;VO&#xff08;Value Object&#xff09;是一种常见的设计模式&#xff0c;用于表示纯粹的数据对象。VO 通常用于在不同层或模块之间传递数据&#xff0c;并且它们的主要目的是封装和组织数据&#xff0c;而不包含业务逻辑。 VO 在Java中的具体作用有以下…...

现代企业数据泄露的原因分析与建议

近年来&#xff0c;随着信息技术的飞速发展&#xff0c;数据已经成为现代企业不可或缺的发展资源。然而&#xff0c;随之而来的数据泄露危机&#xff0c;给个人、企业甚至整个社会带来了巨大的风险与威胁。本文将综合探讨企业数据泄露的主要途径和原因&#xff0c;并提出防护建…...

飞天使-kubeadm安装一主一从集群

文章目录 安装前准备安装前准备配置yum源等安装前准备docker安装 安装kubeadm配置kubeadm验证集群 参考链接 安装前准备 cat >> /etc/hosts <<EOF 192.168.100.30 k8s-01 192.168.100.31 k8s-02 EOF hostnamectl set-hostname k8s-01 #所有机器按照要求修改 ho…...

string类写时拷贝

文章目录 1.string类拷贝构造函数的现代写法2.string类写时拷贝vs和g下string结构的不同vs下string的结构&#xff1a;g下string的结构 3.总结 1.string类拷贝构造函数的现代写法 string类拷贝构造函数的传统写法&#xff1a; string(const string& s){if (this ! &s)…...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

JVM虚拟机:内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机(Java Virtual Machine 简称:JVM)是运行所有 Java 程序的抽象计算机,是 Java 语言的运行环境,实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息,使得 Java 程序只需生成在 JVM 上运行的目标代码(字节码),就可以…...

Git常用命令完全指南:从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

android RelativeLayout布局

<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...

永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器

一、原理介绍 传统滑模观测器采用如下结构&#xff1a; 传统SMO中LPF会带来相位延迟和幅值衰减&#xff0c;并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF)&#xff0c;可以去除高次谐波&#xff0c;并且不用相位补偿就可以获得一个误差较小的转子位…...