springboot vue接口测试前端动态增删表单功能实现

目录
  • 基于 springboot+vue 的测试平台开发
    • 页面实现
      • 1. 基础信息部分
      • 2. 请求参数部分
      • 3. 响应内容部分

基于 springboot+vue 的测试平台开发

继续更新

目前已经进入到接口定义功能的开发阶段，首先我还是直接在前段画了个大概的页面，先预览下：

不过目前只是画了这个页面都主要功能，细节未尽事宜待具体开发的时候再进一步完善。

从上面动态图上已经显示了大概情况，主要是创建接口的功能，其中还支持发送调试。发送请求的功能就直接参考 postman，用起来习惯。

页面实现

整个编辑页面是放在一个对话框里 dialog，然后往里填充其他部分，3大块：基础信息、请求参数、响应内容。

这 3 块分别有自己的重点地方：

基础信息：因为要绑定到模块，这里考虑增加一个模块树的选择(暂时没实现)。请求参数：这里要有个可以增删表单的功能。响应内容：用于展示接口返回的 json 数据格式化。

1. 基础信息部分

为了美化页面，还新使用了分割线的组件。

这里选择分割线+文字的样式，直接使用：

两行输入表单，我是写分开了，对应return里的字段要加加好。

2. 请求参数部分

请求参数部分首先是有几个 tab 页，然后在每个 tab 页里有自己对应的内容。分别是：

  • 请求头
  • query参数：用于url后问好?后的参数
  • rest参数：用于restful风格的/后的参数
  • 请求体：用于带有请求body的接口

在 elementUI 找到组件，修改好对应的 tab 名称即可。

接下来就是动态表单的部分，在 elementUI 里找到组件，复制代码，放到其中的 tab 页里。

接着还是修改代码了，这里有3个字段：参数名、参数值、字段描述：

对应字段：

另外还有 2 个方法，增加和删除：

这里暂时只把字段改改，其他先不动。

然后测试的时候发现一个优化点：当只剩下一行输入框的时候，不让继续删除。

3. 响应内容部分

这里 elementUI 组件里就没提供了，大奇提醒我之前他写的项目代码里有，我可直接用。不过后来我又在 github 上找到一个可以支持展开的，感觉也不错。

地址在这：https://github.com/chenfengjw163/vue-json-viewer/blob/master

安装：

npm install vue-json-viewer --save

在<script>标签里导入，还记得要引用这个组件components: { JsonViewer }

:value="jsonData"绑定的数据直接写死了一个看看效果。

这个组件还是支持不少功能的，详见作者提供的说明：

可以根据自己实际需要使用这些属性。

页面暂时先画到这，接下来进行后端的开发，更多关于springboot vue前端动态增删表单的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • springboot vue接口测试定义编辑功能的实现

    springboot vue接口测试定义编辑功能的实现

    目录 基于springboot+vue 的测试平台开发 一.后端 1. 查询接口 2. 更新接口 二.前端 1. 实现编辑外显 2. 实现接口更新 基于springboot+vue 的测试平台开发 继续更新 额,昨天还说编辑不着急做,但是我发现如果不做,那么在做接口发送功能的时候,我需要反复新增新的接口来调试,那就先做了. 一.后端 后端要增加2个接口:根据接口ID查询.更新接口. 1. 查询接口 @GetMapping("/getApi") public Result getApiB

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

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

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

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

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

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

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

  • springboot vue接口测试前端动态增删表单功能实现

    springboot vue接口测试前端动态增删表单功能实现

    目录 基于 springboot+vue 的测试平台开发 页面实现 1. 基础信息部分 2. 请求参数部分 3. 响应内容部分 基于 springboot+vue 的测试平台开发 继续更新 目前已经进入到接口定义功能的开发阶段,首先我还是直接在前段画了个大概的页面,先预览下: 不过目前只是画了这个页面都主要功能,细节未尽事宜待具体开发的时候再进一步完善. 从上面动态图上已经显示了大概情况,主要是创建接口的功能,其中还支持发送调试.发送请求的功能就直接参考 postman,用起来习惯. 页面实现

  • springboot vue接口测试HutoolUtil TreeUtil处理树形结构

    springboot vue接口测试HutoolUtil TreeUtil处理树形结构

    目录 基于springboot+vue的测试平台开发 一.引用 HutoolUtil 二.建表 三.后端接口实现 1. Controller 层 2. DAO层 3. Service 层 四.测试一下 1. 测试结构数据 2. 测试新增默认 基于springboot+vue的测试平台开发 继续更新 上次完成了接口定义功能的前端页面,那么后端现在开始逐一实现对应的功能,首先就是提供模块列表接口,这个模块是支持子层级的,所以大概结构是这样: [ { id: 1, label: '默认', child

  • springboot vue接口测试前后端树节点编辑删除功能

    springboot vue接口测试前后端树节点编辑删除功能

    目录 基于springboot+vue 的测试平台开发 一.编辑功能 1. 编辑页外显 2. 实现后端接口 3. 前后联调 4. 测试 二.删除功能 1. 后端接口 2. 前端实现 3. 测试 基于springboot+vue 的测试平台开发 继续更新. 一.编辑功能 1. 编辑页外显 点击树节点的编辑按钮,打开对话框,展示原有的节点名称. 本来树形控件里没有自带的编辑操作,我直接加了一个按钮在上面,绑定点击事件调用edit(data)方法. 为了确认 data 可用,我在edit方法中打印了一

  • springboot vue接口测试前后端实现模块树列表功能

    springboot vue接口测试前后端实现模块树列表功能

    目录 基于 springboot+vue 的测试平台 一.存放接口的js文件 二.在vue文件中调用接口 1. 触发接口 2. 调用接口 三.实现选择项目功能 1. 后端增加获取所有项目接口 2. 前端调用接口 3. 选择项目触发模块树接口 4. 测试一下 基于 springboot+vue 的测试平台 开发继续更新. 上一篇完成了模块树的列表接口,接下来可以和前端页面联调了. 一.存放接口的js文件 老样子,新建js文件,把要调用的后端接口请求封装在 src/api/apiModule.js这

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

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

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

  • 在 Vue 应用中使用 Netlify 表单功能的方法详解

    Netlify 带有内置表单处理功能,可以用来存储表单数据,下载 csv 文件,同时可以在接收到新的提交时发送邮件通知或者通过配置 webhook 发送请求. 它是通过在部署应用时直接解析 HTML 文件,识别 html 中的 form 标签来实现的,本文记录如何在一个 Vue 应用中使用表单功能. 开发 首先使用@vue/cli 新建一个 Vue 应用,完成一系列步骤后,运行应用 vue create my-awesome-app ... yarn serve 创建一个 form 表单 <!-

  • 详解Vue返回值动态生成表单及提交数据的办法

    目录 主要解决的问题 一.后端返回的数据,提交到后端的数据格式如下: 二.vue前端代码如下: 总结 主要解决的问题 1.vue在循环的时候需要动态绑定不同的v-model:vue动态的表单,数据怎么绑定呢? 2.动态表单上所有name属性对应的键值对的形式提交到后端 一.后端返回的数据,提交到后端的数据格式如下: // 后端返回的数据,根据返回类型用对应的组件 [ { "componentType": "input", "componentName&qu

  • jQuery使用动态渲染表单功能完成ajax文件下载

    复制代码 代码如下: // Ajax 文件下载 jQuery.download = function(url, data, method){ // 获取url和data if( url && data ){ // data 是 string 或者 array/object data = typeof data == 'string' ? data : jQuery.param(data); // 把参数组装成 form的 input var inputs = ''; jQuery.each

  • vue复合组件实现注册表单功能

    本文实例为大家分享了vue注册表单的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js"></script> </head> <body> <div id="cont

随机推荐