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

目录
  • 前言
  • 功能实现

前言

基于 springboot+vue 的测试平台(练手项目)开发继续更新。

今天终于把已做的功能都重构完成了。

其中前端又做了个小调整，就是入参动态增删的控件，本来我是3个tab复用一个组件，后来不断发现一些问题，最后我决定还是分开写吧。

今天另一个重点是重做了编辑页发送接口请求的后端功能。这个功能重构之前是有的，但是现在我觉得之前那些做兼容不够。

因为我最近在工作中接入飞书的一些开放API，发现存在一些接口的入参是组合来的，比如 post 请求中，既有查询参数，也有请求体。

于是我重新梳理一下，尽量支持了各种参数组合：

  • 不带任何参数
  • 只有 param 查询参数
  • 只有 rest 路径参数
  • 只有 body 参数
  • 同时 param + body
  • 同时 rest + body

请求方法的话，暂时还是先支持 get 与 post 这2种最常见的。最后，把各种判断情况分支都走了一遍，确认没啥问题。

功能实现

接下来记录下功能的实现。思路很简单：

一些必要参数的获取与处理不同请求方法的判断进一步判断不同的参数组合情况，来进行发送http接口的处理。

用的 http 客户端是hutool框架的，代码位置在项目的这里，93行往后。

首先，主方法前面处理一些必要的入参信息，比如 method、header、以及获取表单里的参数。

接下来进入到请求方法的判断，然后进一步判断目前前端提交过来的各种类型的参数情况，这里抽出去写了 2 个判空的方法。

以 get 方法为例，现在我可以判断出实际提交来的参数都有谁。

判断出参数类型，就可以针对性处理了，这里最麻烦的就是 rest 路径参数的处理，我前端提交来的路径参数是用花括号包着的{name}，所以要对url重新处理一下。

拼接完成后，就可以直接发起请求了。

这里要注意的是，在hutool的 http 客户端中，我入参使用body()的时候会把form()的参数覆盖掉，所以在处理请求体参数组合的情况下，只能把查询参数或者路径参数，都处理在请求 url 上。比如，这里是为了处理param+body的组合，手动把param参数拼接到 url 上。

其他就没什么特别的了，在 post 中我觉得没必要支持那么多种情况，所以只兼容了 3 种情况。

目前只是一个功能实现的诉求，还缺少一些异常的处理，后续慢慢补上。接下来会继续新功能的开发，过程中也会带着改一些我记录下来的 bug 。

前后端的最新代码都已经更新到分支上

前端：

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

后端

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

以上就是springboot+vue完成编辑页发送接口请求功能的详细内容，更多关于编辑页发送接口请求的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 完整音乐播放系统基于Java Springboot + Vue + MyBatis

    完整音乐播放系统基于Java Springboot + Vue + MyBatis

    目录 摘要 主要设计 功能设计 主要技术 功能截图 用户端首页 登录注册 歌单信息 歌手信息 我的音乐 评论点赞 管理员端 首页 用户管理 歌手管理 歌单管理 部分代码 数据库设计 用户表 评论表 收藏表 歌手歌曲表 歌手表 项目总结 视频演示: springboot+vue音乐网站 摘要 网络技术以及计算机的发展,网友们对网络的要求也日益长高,平常在网上听话用一大堆下载软件下载下来也要管理,又占空间,比如那流行歌曲,下载了听了又要删很不方便·而网络音乐库的实现改变了这一状况.它本身就是一个数字

  • SpringBoot+Vue+Axios+BootStrap实现图书的增删改查功能示例

    SpringBoot+Vue+Axios+BootStrap实现图书的增删改查功能示例

    目录 一.开发工具 二.项目结构 三.编写项目 四.运行项目 由于是初学Vue.Axios,可能在界面和功能上存在着一些问题,但这些并不妨碍使用.如果有对编程感兴趣的朋友,可以试着做一做.这个由于是第一次做,不太熟练.在后续的过程中会不断的完善. 一.开发工具 IntelliJ IDEA Ultimate 2021.1 apache-maven-3.5.4 MySQL5.7 JDK 1.8.0_281 二.项目结构 三.编写项目 1.创建数据库 SET NAMES utf8mb4; SET FO

  • springboot+vue制作后台管理系统项目

    springboot+vue制作后台管理系统项目

    目录 一.所使用的环境配置: 二.项目简介 三.知识点总结(代码和配置) SpringBoot: 1.Mybatis-Plus配置文件,实现分页查询:MybatisPlusConfig 2.跨域配置文件:CorsConfig 3.请求返回类!:Result 4.pom.xml配置文件 Vue: 其余知识点总结: 总结: 学习资源来自于B站UP,up他讲的非常详细,对于熟悉两大框架很有用. 我的作业源代码在文章末尾,欢迎有需要的同学,学习参考使用,内置SQL文件,导入后,开启springboot和

  • Java SpringBoot+vue+实战项目详解

    Java SpringBoot+vue+实战项目详解

    目录 1.<锋迷商城>业务流程设计-接⼝规范 1.1 前后端分离与单体架构流程实现的区别 1.1.1单体架构 1.1.2 前后端分离架构 1.2 接口介绍 1.2.1接口概念 1.2.2接口规范 1.3 Swagger 1.3.1作用 1.3.2 Swagger整合 1.3.3 Swagger注解说明 1.3.4 Swagger-ui 插件 1.4 RESTful 总结 1.<锋迷商城>业务流程设计-接⼝规范 在企业项⽬开发中,当完成项⽬的需求分析.功能分析.数据库分析与设计之后,

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

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

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

  • springboot+vue组件开发实现接口断言功能

    springboot+vue组件开发实现接口断言功能

    目录 基于 springboot+vue 的测试平台 一.组件的关系 二.组件的开发 1. ApiAssertions 2. ApiAssertionsEdit 3. ApiAssertionJsonPath 基于 springboot+vue 的测试平台 (练手项目)开发继续更新. 接下来准备开发请求断言功能.关于这个功能要实现哪些需求,长什么样子,我参考了下其他优秀的业界工具,比如apifox.metersphere等. 于是决定还是先紧着最常用的来开发:JSONPath.响应时间.文本,而

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

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

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

  • springboot vue项目管理前后端实现编辑功能

    springboot vue项目管理前后端实现编辑功能

    目录 基于springboot+vue 的测试平台开发 一.打开编辑页面显示数据 1. 编辑按钮 2. 编写 handleUpdate 方法处理数据外显 二.保存编辑页面的内容 1. 后端增加 update 接口 2. 前端页面修改 基于springboot+vue 的测试平台开发 继续更新 今天实现项目列表的编辑功能: 点击[编辑]按钮,打开对话框,显示此条记录的信息修改对话框表单内容,点击对话框[保存]按钮,更新此条记录 一.打开编辑页面显示数据 1. 编辑按钮 之前复制的 table 组件

  • SpringBoot+Vue前后端分离实现请求api跨域问题

    前言 最近过年在家无聊,刚好有大把时间学习Vue,顺便做了一个增删查改+关键字匹配+分页的小dome,可是使用Vue请求后端提供的Api的时候确发现一个大问题,前后端分离了,但是请求的时候也就必定会有跨域这种问题,那如何解决呢? 前端解决方案 思路:由于Vue现在大多数项目但是用脚手架快速搭建的,所以我们可以直接在项目中创建一个vue.config.js的配置文件,然后在里面配置proxy代理来解决,话不多说,直接上代码 module.exports = { devServer: { proxy

  • springboot vue项目管理后端实现接口新增

    springboot vue项目管理后端实现接口新增

    目录 基于 springboot+vue 的测试平台开发继续更新. 一.编写实体类 Project 二.创建数据表 修改 application.properties 中的配置 三.编写 ProjectDAO 接口 四.编写 ProjectService 类 自定义异常类 五.编写 ProjectController 类 六.测试新增接口 /project/add 基于 springboot+vue 的测试平台开发继续更新. 接下来开发项目管理,是一个很常规的功能:有列表页.查询.新增.编辑,删

  • springboot vue项目后端列表接口分页模糊查询

    springboot vue项目后端列表接口分页模糊查询

    目录 基于 springboot+vue 的测试平台开发 一.分页插件 二.实现接口 1. 编写 Service 层 2. 编写 Controller 层 三.测试接口 1. 测试分页 2. 测试条件查询 基于 springboot+vue 的测试平台开发 继续更新 打开项目管理,就需要看到列表里展示项目数据,比如这样(截图是这个前端框架的demo,仅作示意): 那么对应到我们平台的项目管理功能,就需要有: 列表展示添加的项目数据 可以通过项目名称查询指定的项目 新增项目 编辑项目 其他功能..

  • springboot vue测试前端项目管理列表分页功能实现

    springboot vue测试前端项目管理列表分页功能实现

    目录 基于 springboot+vue 的测试平台开发 一.前后端调通 1. 请求后端接口 2. 项目列表页面 3. 调整接口返回的时间格式问题 二.实现列表数据显示 1. 使用element UI组件库 2. 修改复制来的代码 三.实现分页 1.使用 组件 2. 给分页相关字段赋值 3. 关于 .sync 修饰符 基于 springboot+vue 的测试平台开发 继续更新 今天来完成项目列表的前端部分. 一.前后端调通 开发前端页面,框架里有 2 个地方需要改动: src/views: 这

  • PHP使用file_get_contents发送http请求功能简单示例

    本文实例讲述了PHP使用file_get_contents发送http请求功能.分享给大家供大家参考,具体如下: 服务器端模拟 POST/GET 等请求,使用 CURL 很容易办到(例如前面一篇<php使用CURL模拟GET与POST向微信接口提交及获取数据的方法>),那么如果不使用 CURL 库,又该怎么办呢? $data = array( 'test'=>'bar', 'baz'=>'boom', 'site'=>'www.nimip.com', 'name'=>'

  • Nodejs 发送Post请求功能(发短信验证码例子)

    直接上代码 sms.js var http = require('http'); var querystring = require('querystring'); function SmsCode() { //发短信 this.send = function (req0, res0) { var code = "3212"; var txt = "您的验证码是:"+code+".请不要把验证码泄露给其他人.如非本人操作,可不用理会!"; var

随机推荐