springboot+vue完成发送接口请求显示响应头信息

目录
  • 基于 springboot+vue 的测试平台
    • 一、后端实现
    • 二、前端实现
      • 1. 返回的数据放到 vuex 中
      • 2. 从 vuex 中获取数据并展示

基于 springboot+vue 的测试平台

（练手项目）开发继续更新。

在接口编辑页中点击发送接口请求，除了显示响应体外，还可以显示响应头等辅助信息，今天完成这个功能的开发。

一、后端实现

后端主要是修改一下处理接口发送请求的方法apiTestRun，之前这个方法返回的直接就是一个响应体，现在修改成返回更多的内容。

如图所示，注释掉的部分是之前的返回。

在 hutool 的 http 客户端中，httpResponse对象是包含了很多信息的，这里目前只先用这几个：body、cookies、responseStatus、responseHeaders。获取到之后放到一个新的对象里返回出去。

不过前端的页面目前也只需要用body和responseHeaders这2个，前者是替换到之前的显示，后者就是今天新增的功能所需要的。

二、前端实现

1. 返回的数据放到 vuex 中

在 vuex 中，我把接口返回的信息从接口请求对象中拿了出来，保存的时候就不做落库了。

所以，现在发送请求成功后，要把获取到的信息赋值给 vuex 中的对应字段。因为返回内容改了，所以body的赋值也要重新改下，再加上新增的respHeaders赋值即可。

2. 从 vuex 中获取数据并展示

新建一个组件ResponseHeaders，在这里获取到 vuex 中的数据并展示出来。

<template>
  <el-card class="box-card">
    <div v-for="(i, v) in headersObj" :key="v" class="text item">
      {{ v + '：' + i }}
    </div>
  </el-card>
</template>
<script>
export default {
  name: 'ResponseHeaders',
  data() {
    return {
      headersObj: {}
    }
  },
  computed: {
    respHeaders() {
      return this.$store.state.apiDefinition.responseInfo.respHeaders
    }
  },
  watch: {
    respHeaders: {
      handler() {
        this.headersObj = this.respHeaders[0]
      },
      immediate: true,
      deep: true
    }
  }
}
</script>

这里直接使用 elementui 中的<el-card>组件简单显示出来即可。

最后，新建的这个组件ResponseHeaders放到一个父组件ResponseInfoBase中。

<template>
  <div>
    <el-divider content-position="left">响应内容</el-divider>
    <el-tabs v-model="activeName">
      <el-tab-pane label="响应体" name="respBody">
        <ResponseBody />
      </el-tab-pane>
      <el-tab-pane label="响应头" name="respHeaders">
        <ResponseHeaders />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import ResponseBody from '@/views/apiManagement/definition/responseContent/ResponseBody'
import ResponseHeaders from '@/views/apiManagement/definition/responseContent/ResponseHeaders'
export default {
  name: 'ResponseInfoBase',
  components: { ResponseBody, ResponseHeaders },
  data() {
    return {
      activeName: 'respBody'
    }
  }
}
</script>

这个父组件是集中存放关于接口响应相关内容的地方，另一个响应体ResponseBody也是在这里，并且使用<el-tabs>来显示。

最新代码都已更新

前端：

https://github.com/wessonlan/bloomtest-web

后端

https://github.com/wessonlan/bloomtest-backend

以上就是springboot+vue完成发送接口请求显示响应头信息的详细内容，更多关于springboot vue接口发送响应头显示的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • springboot+vue完成编辑页面发送接口请求功能

    springboot+vue完成编辑页面发送接口请求功能

    目录 前言 功能实现 前言 基于 springboot+vue 的测试平台(练手项目)开发继续更新. 今天终于把已做的功能都重构完成了. 其中前端又做了个小调整,就是入参动态增删的控件,本来我是3个tab复用一个组件,后来不断发现一些问题,最后我决定还是分开写吧. 今天另一个重点是重做了编辑页发送接口请求的后端功能.这个功能重构之前是有的,但是现在我觉得之前那些做兼容不够. 因为我最近在工作中接入飞书的一些开放API,发现存在一些接口的入参是组合来的,比如 post 请求中,既有查询参数,也有请

  • springboot整合security和vue的实践

    springboot整合security和vue的实践

    目录 环境 1.security参考资料 认证流程原理: 2.springboot整合security要点 2.1获取登录用户信息 2.2自定义登入登出url 2.3自定义Handler返回json 2.4记住我功能 2.5验证码功能 2.6限制登录次数 2.7密码加密 2.8后台提供接口,返回前端json,整合vue做前端登入登出 3.测试 环境 springboot1.5.9 完整代码,内有sql,先建库,在运行sql建表,sql中已插入测试的数据. https://github.com/2

  • springboot结合vue实现增删改查及分页查询

    springboot结合vue实现增删改查及分页查询

    1:首先.创建一个springboot项目,这里我使用以及构建好基本框架的脚手架,打开是这个样子: Result类:已经封装好了三种返回类型的包装类:code,msg,data 2:创建数据库叫mytest(可以自己取名字) CREATE TABLE `user` ( `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '序号', `name` varchar(20) COLLATE utf8mb4_unicode_ci DEFAULT NULL CO

  • 使用VUE+SpringBoot+EasyExcel 整合导入导出数据的教程详解

    使用VUE+SpringBoot+EasyExcel 整合导入导出数据的教程详解

    目录 1 前端 2 数据库 3 后端 3.1 contrller 3.2 mapper 3.3 bean 3.4 listener 3.5 config 3.6 配置文件 4 启动测试 创建一个普通的maven项目即可 项目目录结构 1 前端 存放在resources/static 下 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo

  • 一文教会你如何搭建vue+springboot项目

    一文教会你如何搭建vue+springboot项目

    目录 前言 开发使用的软件 vue项目搭建 环境配置 cmd命令 vue ui 创建项目 vue项目制作方向梳理 通过软件vscode打开项目 vue 配置 vue-router 如何配置 axios ui框架 引入 结构 router配置 request.js get和post请求 vue.config.js vue完成 springboot 创建springboot项目 依赖 项目结构 启动类配置 配置 跨域 数据库配置.服务端口 数据交互 springboot运行顺序 controller

  • springboot+vue完成发送接口请求显示响应头信息

    springboot+vue完成发送接口请求显示响应头信息

    目录 基于 springboot+vue 的测试平台 一.后端实现 二.前端实现 1. 返回的数据放到 vuex 中 2. 从 vuex 中获取数据并展示 基于 springboot+vue 的测试平台 (练手项目)开发继续更新. 在接口编辑页中点击发送接口请求,除了显示响应体外,还可以显示响应头等辅助信息,今天完成这个功能的开发. 一.后端实现 后端主要是修改一下处理接口发送请求的方法apiTestRun,之前这个方法返回的直接就是一个响应体,现在修改成返回更多的内容. 如图所示,注释掉的部分

  • springboot vue测试平台接口定义及发送请求功能实现

    springboot vue测试平台接口定义及发送请求功能实现

    目录 基于 springboot+vue 的测试平台开发 一.http客户端选型 二.后端接口实现 1. controller 层 2. service 层 三.前端实现 四.修改遗留 bug 基于 springboot+vue 的测试平台开发 继续更新 添加的接口,我要来调试确定是否是通的,那么要发送接口请求,今天来实现这个功能,先预览一下: 捋一下思路,分为三步走: 点击发送按钮,调用后端接口后端接口处理内部,发送http接口请求后端接口把响应返回给前端展示 一.http客户端选型 为了更方

  • springboot+vue+对接支付宝接口+二维码扫描支付功能（沙箱环境）

    1. 什么是支付宝接口(沙箱环境)? 记录时间:2020年10月15日3:55 现如今,手机支付已相当普遍,而作为开发人员应该对手机支付操作有所了解.而支付宝接口是支付宝提供的一个接口,用来对接软件应用程序在进行金钱交易使用.然后对于编程爱好者而言,想学习这一点就有点难,因为要想使用支付宝接口,必须前提是使用软件应用程序,软件应用程序需要向支付宝申请,提交一系列资料,这一点是实现不了的.这就对开发者增加了一定的难度,因为产品没有上线,然后需要对接支付宝接口就是很大的问题,所以出现了沙箱环境,具有

  • springboot基于过滤器实现接口请求耗时统计操作

    Spring Boot中实现一个过滤器相当简单,实现javax.servlet.Filter接口即可. 下面以实现一个记录接口访问日志及请求耗时的过滤器为例: 1.定义ApiAccessFilter类,并实现Filter接口 @Slf4j @WebFilter(filterName = "ApiAccessFilter", urlPatterns = "/*") public class ApiAccessFilter implements Filter { @Ov

  • SpringBoot整合spring-retry实现接口请求重试机制及注意事项

    SpringBoot整合spring-retry实现接口请求重试机制及注意事项

    目录 一.重试机制 二.重试机制要素 三.重试机制注意事项 四.SpringBoot整合spring-retry 1)添加依赖 2)添加@EnableRetry注解 3)添加@Retryable注解 4)Controller测试代码 5)发送请求 6)补充:@Recover 一.重试机制 由于网络不稳定或网络抖动经常会造成接口请求失败的情况,当我们再去尝试就成功了,这就是重试机制. 其主要目的就是要尽可能地提高请求成功的概率,但一般情况下,我们请求第一次失败,代码运行就抛出异常结束了,如果想再次

  • vue如何从接口请求数据

    这两天学习了vue如何从接口请求数据,所以,今天添加一点小笔记. <!doctype html> <html> <head> <meta charset="UTF-8"> <title>获取图片列表</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,m

  • SpringBoot在一定时间内限制接口请求次数的实现示例

    SpringBoot在一定时间内限制接口请求次数的实现示例

    需要用到的知识:注解.AOP.ExpiringMap(带有有效期的映射) 我们可以自定义注解,把注解添加到我们的接口上.定义一个切面,执行方法前去ExpiringMap查询该IP在规定时间内请求了多少次,如超过次数则直接返回请求失败. 需要用到的依赖 <!-- AOP依赖 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-sta

  • springboot vue测试平台接口定义前后端新增功能实现

    springboot vue测试平台接口定义前后端新增功能实现

    目录 开发继续更新 一.后端部分 二.前端部分 1. rest参数 2. 请求体 3. 请求参数 4. 请求接口 基于 springboot+vue 的测试平台 开发继续更新 上节画了大概的前端页面,今天主要来实现后端接口,然后调通前后端实现接口新增功能.先预览下效果: 老规矩,分为前后端讲解. 一.后端部分 在 ApiDefinitionController 类中新增一个处理方法,处理接口的新增请求: @PostMapping("/add") public Result add(@R

  • Vue如何调用接口请求头增加参数

    目录 Vue调用接口请求头增加参数 Vue取消接口请求 接口js文件 页面中引用 总结 Vue调用接口请求头增加参数 import axios from 'axios' import qs from 'qs' let api_secret = '935bda53552e49cd56fc' // 基础配置 if (process.env.NODE_ENV === 'production') { // axios.defaults.baseURL = 'https://' //线上版本域名 // a

随机推荐