基于springboot与axios的整合问题

目录
  • springboot与axios的整合
    • 1.get请求
    • 2.post请求
  • springboot与axios遇到的坑
    • spring boot
    • axios

springboot与axios的整合

使用axios的时候一定要引用它的js包(可用npm命令:npm install axios)

1.get请求

 // 为给定 ID 的 user 创建请求
        axios.get('/demo/name')
            .then(function (response) {
                console.log(response.data);
            })
            .catch(function (error) {
                console.log(error);
            });

response用于接收后端的数据,而response.data正好对应后端传入的 hello

后端接收

  @RequestMapping(value = "/name",method = RequestMethod.GET)
    @ResponseBody
    public String Testname(){
        return "hello";
    }

2.post请求

这是一段前端发送请求代码,利用axios发送post请求

<button type="button"  onclick="openUrl()">testaxios</button>
<script>
    function openUrl(){
        axios({
            method: 'post',
            url: '/demo/user',
            data: {
                ID: 'Fred',
                lastName: 'Flintstone'
            }
        });
    }
</script>

通过chrome浏览器解析,往后端传递的数据类型为Request Payload。

如何想接收这段数据,就需要用到@RequestBody注解

 @RequestMapping(value = "/user",method = RequestMethod.POST)
    @ResponseBody
    public void Test(@RequestBody HashMap<String,String> map){
        System.out.println(map.get("ID"));
    }

这种写法,你就可以通过健值对的形式获取了

springboot与axios遇到的坑

spring boot

  • @RequestParam

适用于content-type不等于application/json的post请求,post请求需要用qs.stringify()序列化数据

适用于get请求(好像只能传基本类型)

  • @RequestBody

适用于content-type等于application/json的post请求

axios

  • get
axios.get(
'/api',
{
 params: { //必须要这么写

})
  • post
axios.post(
'/api',
{}或者params//参数名随意)

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 详解springboot shiro jwt实现权限管理

    springboot + shiro + jwt (详情解析+代码实现)加密接口 设置权限 首先需要把shiro的几个配置类给下载好(我已经把需要的配置类给放到了github和网盘之中) 先讲完各个配置类的作用,后面讲具体流程 ShiroConfig.java 类主要是设置了过滤器 和shiro自己的session,假如这个类没有放行就只有token才能访问后端接口 UserRealm.java 类主要是检测用户权限和授予权限,对用户名的验证 JWTFilter.java 类主要是防止别人访问你

  • SpringBoot集成vue的开发解决方案

    最近由于工作要求:前端采用vue开发,后端采用springboot开发,前后端分离开发,最后前端页面又整合到后端来.经历多次采坑,总结以下方案: vue build后的文件部署到springboot目录 vue打包后,会生成dist目录 springboot静态资源目录如下: SpringBoot处理静态资源和页面,设置如下: @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registr

  • 关于SpringBoot与Vue交互跨域问题解决方案

    目录 浏览器同源策略 一.VUE前端配置代理解决跨域 (1)Vue中让浏览器请求携带cookie (2)vue中配置代理解决跨域 第一步,设置统一访问路径 第二步.配置跨域代理 第三步.测试请求 二.springboot后端配置解决跨域 Hello,你好呀,我是灰小猿,一个超会写bug的程序猿! 浏览器同源策略 为什么会出现跨域问题? 首先一个定义一定要了解,就是浏览器的同源策略, 什么是浏览器的同源策略, 简单来说就是浏览器发送请求的协议.域名和端口要和服务器接收请求的协议.域名以及端口一致.

  • 基于springboot与axios的整合问题

    目录 springboot与axios的整合 1.get请求 2.post请求 springboot与axios遇到的坑 spring boot axios springboot与axios的整合 使用axios的时候一定要引用它的js包(可用npm命令:npm install axios) 1.get请求 // 为给定 ID 的 user 创建请求 axios.get('/demo/name') .then(function (response) { console.log(response.

  • 基于springboot实现整合shiro实现登录认证以及授权过程解析

    这篇文章主要介绍了基于springboot实现整合shiro实现登录认证以及授权过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.添加shiro的依赖 <dependency> <groupId>org.apache.shiro</groupId> <artifactId>shiro-spring-boot-web- starter</artifactId> <version&g

  • 基于SpringBoot整合oauth2实现token认证

    这篇文章主要介绍了基于SpringBoot整合oauth2实现token 认证,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 session和token的区别: session是空间换时间,而token是时间换空间.session占用空间,但是可以管理过期时间,token管理部了过期时间,但是不占用空间. sessionId失效问题和token内包含. session基于cookie,app请求并没有cookie . token更加安全(每次请

  • 基于SpringBoot整合SSMP的详细教程

    目录 基于SpringBoot实现SSMP整合 整合JUnit 整合MyBatis 整合MyBatis-Plus 总结 基于SpringBoot实现SSMP整合 SpringBoot之所以好用,就是它能方便快捷的整合其他技术,这里我们先介绍四种技术的整合: 整合JUnit 整合MyBatis 整合MyBatis-Plus 整合Druid 整合JUnit ​ SpringBoot技术的定位用于简化开发,再具体点是简化Spring程序的开发.所以在整合任意技术的时候,如果你想直观感触到简化的效果,你

  • 基于SpringBoot与Mybatis实现SpringMVC Web项目

    一.热身 一个现实的场景是:当我们开发一个Web工程时,架构师和开发工程师可能更关心项目技术结构上的设计.而几乎所有结构良好的软件(项目)都使用了分层设计.分层设计是将项目按技术职能分为几个内聚的部分,从而将技术或接口的实现细节隐藏起来. 从另一个角度上来看,结构上的分层往往也能促进了技术人员的分工,可以使开发人员更专注于某一层业务与功能的实现,比如前端工程师只关心页面的展示与交互效果(例如专注于HTML,JS等),而后端工程师只关心数据和业务逻辑的处理(专注于Java,Mysql等).两者之间

  • java编程之基于SpringBoot框架实现扫码登录

    目录 项目简介 实现思路 二次认证的原因 实现步骤 用户访问网页端,选择扫码登录 使用手机扫码,二维码状态改变 手机确认登录 效果演示 完整代码已上传到GitHub. Web端体验地址:http://47.116.72.33/(只剩一个月有效期) apk下载地址:https://github.com/zhangjiwei1221/qrscan/releases/tag/0.0.1. 用户名:非空即可,密码:123456,效果见文末,整体实现如有不妥之处,欢迎交流讨论 实现部分参考二维码扫码登录是

  • springboot restTemplate连接池整合方式

    目录 springboot restTemplate连接池整合 restTemplate 引入apache httpclient RestTemplate配置类 RestTemplate连接池配置参数 测试带连接池的RestTemplate RestTemplate 配置http连接池 springboot restTemplate连接池整合 restTemplate 使用http连接池能够减少连接建立与释放的时间,提升http请求的性能.如果客户端每次请求都要和服务端建立新的连接,即三次握手将

  • 基于Springboot实现JWT认证的示例代码

    目录 一.了解JWT 概念 作用 1.1 为什么授权要使用jwt 二.JWT结构 2.1 header 2.2 payload 2.3 signature 三.使用JWT 3.1 上手 3.2 封装工具类 3.3 整合springboot 最近一直想写一个类似于待办的东西,由于不想用传统的session,就卡住了,后来在各种群里扯皮,发现除了用缓存之外,还可以通过 JWT 来实现. 一.了解JWT 概念 json web token 用于在各方之间以 json 对象安全地传输信息,比如在前端和后

  • 关于springboot响应式编程整合webFlux的问题

    在servlet3.0标准之前,是每一个请求对应一个线程.如果此时一个线程出现了高延迟,就会产生阻塞问题,从而导致整个服务出现严重的性能情况,因为一旦要调用第三方接口,就有可能出现这样的操作了.早期的处理方式只能是手工控制线程. 在servlet3.0标准之后,为了解决此类问题,所以提供了异步响应的支持.在异步响应处理结构中,可以将耗时操作的部分交由一个专属的异步线程进行响应处理,同时请求的线程资源将被释放,并将该线程返回到线程池中,以供其他用户使用,这样的操作机制将极大的提升程序的并发性能.

  • SpringBoot+Spring Data JPA整合H2数据库的示例代码

    目录 前言 Maven依赖 Conroller 实体类 Repository 数据库脚本文件 配置文件 启动项目 访问H2数据库 查看全部数据 H2数据库文件 运行方式 前言 H2数据库是一个开源的关系型数据库.H2采用java语言编写,不受平台的限制,同时支持网络版和嵌入式版本,有比较好的兼容性,支持相当标准的sql标准 提供JDBC.ODBC访问接口,提供了非常友好的基于web的数据库管理界面 官网:http://www.h2database.com/ Maven依赖 <!--jpa-->

随机推荐