测试平台开发
关注
分享
扫一扫
文章平均质量分 82
把苹果咬哭的测试笔记
喜欢分享软件测试、开发相关的各种知识。
展开
-
【测试开花】一、调通前后端环境实现登录
一、前端环境搭建在前端框架vue-element-admin这个项目中，有一个简洁轻量型的项目vue-admin-template，这里面初始化的内容少，适合初学者，防止一上来就被那么多的代码弄晕。快速安装# 克隆项目git clone https://github.com/PanJiaChen/vue-admin-template.git# 进入项目目录cd vue-elemen...原创 2021-09-13 23:10:00 · 856 阅读 · 0 评论 -
【测试开花】动动手的测试平台来了！
一、前言前阵子对于 spring 技术栈做了一些快速的了解，最近萌生出了动动手开发一个测试平台的念头(开发大佬请跳过)。目的就是一个：提高动手能力，更好的消化学习的知识，从而进一步提升自己。至于测试平台在公司中应用的实用性如何？据我观察，这个问题在相当长的一段时间内都不会有一致的答案，所以这里就不展开讨论了，仅仅是为了找个锻炼开发技能的项目而已。如果能够实际应用到工作中去，并且还能有所收...原创 2021-09-13 17:58:00 · 116 阅读 · 0 评论 -
【测试开花】四、项目管理-前端-实现项目列表、分页功能
基于 springboot+vue 的测试平台开发继续更新。今天来完成项目列表的前端部分。一、前后端调通开发前端页面，框架里有 2 个地方需要改动：src/views: 这里是开发页面的地方，也就是 vue 文件，可以按功能模块新建子目录来进行分类。src/api: vue 页面里请求的后端接口的js文件统一都写在这里。接下来，针对项目列表接口localhost:8080/blo...原创 2021-09-19 11:15:00 · 198 阅读 · 0 评论 -
【测试开花】三、项目管理-后端-实现列表接口（含分页、模糊查询）
基于 springboot+vue 的测试平台开发继续更新。打开项目管理，就需要看到列表里展示项目数据，比如这样(截图是这个前端框架的demo，仅作示意)：那么对应到我们平台的项目管理功能，就需要有：列表展示添加的项目数据可以通过项目名称查询指定的项目新增项目编辑项目其他功能...新增项目的接口已经实现，接下来实现项目列表接口。这个列表接口，我需要它可以同时满足分页以及条...原创 2021-09-16 18:25:00 · 628 阅读 · 0 评论 -
【测试开花】二、项目管理-后端-实现新增接口
基于 springboot+vue 的测试平台开发继续更新。接下来开发项目管理，是一个很常规的功能：有列表页、查询、新增、编辑，删除暂时先不做。首先来做新增项目的功能，先实现后端接口。一、编写实体类 Project定义实体类的属性，对应着数据库对应表里的字段。package com.pingguo.bloomtest.pojo;import com.baomidou.mybatis...原创 2021-09-15 22:32:00 · 399 阅读 · 0 评论 -
【测试开发】十六、接口测试-接口定义-实现发送接口请求功能
基于 springboot+vue 的测试平台开发继续更新。添加的接口，我要来调试确定是否是通的，那么要发送接口请求，今天来实现这个功能，先预览一下：捋一下思路，分为三步走：点击发送按钮，调用后端接口后端接口处理内部，发送http接口请求后端接口把响应返回给前端展示一、http客户端选型为了更方便快捷的开发功能，直接选用 hutool 框架中封装好的 http客户端。官方介...原创 2021-11-06 22:08:00 · 571 阅读 · 2 评论 -
【测试开发】十、接口测试-前后端-实现添加树结点功能
基于 springboot+vue 的测试平台开发继续更新。一、前端Tree树形控件的append方法在elementUI 树控件下有个append方法，可以用来为 Tree 中的一个节点追加一个子节点。目前我们已经完成了树列表的接口，可以在 append 方法中输出一下传入的 data 里到底是什么。console.log('传入的node：' + JSON.stringify(da...原创 2021-10-03 16:23:00 · 422 阅读 · 0 评论 -
【测试开发】十五、接口测试-接口定义-实现接口编辑功能
基于 springboot+vue 的测试平台开发继续更新。额，昨天还说编辑不着急做，但是我发现如果不做，那么在做接口发送功能的时候，我需要反复新增新的接口来调试，那就先做了。一、后端后端要增加2个接口：根据接口ID查询、更新接口。1. 查询接口@GetMapping("/getApi") public Result getApiById(Long id) { retu...原创 2021-10-30 23:42:00 · 165 阅读 · 0 评论 -
【测试开发】九、接口测试-前后端-实现模块树列表功能
基于 springboot+vue 的测试平台开发继续更新。上一篇完成了模块树的列表接口，接下来可以和前端页面联调了。一、存放接口的js文件老样子，新建js文件，把要调用的后端接口请求封装在 src/api/apiModule.js这里：import request from '@/utils/request'export function getModuleList(project...原创 2021-10-01 22:40:00 · 128 阅读 · 2 评论 -
【测试开发】八、接口测试-后端-模块树列表接口实现，使用HutoolUtil中TreeUtil快速处理树形结构...
国庆节快乐！基于 springboot+vue 的测试平台开发继续更新。上次完成了接口定义功能的前端页面，那么后端现在开始逐一实现对应的功能，首先就是提供模块列表接口，这个模块是支持子层级的，所以大概结构是这样：[ { id: 1, label: '默认', children: [ { id: 4, label: '二级...原创 2021-10-01 13:00:00 · 529 阅读 · 3 评论 -
【测试开花】七、接口测试-前端-模块树和接口列表
基于 springboot+vue 的测试平台开发继续更新。一、功能简介今天的目标是画一个接口管理列表的前端页面。本来我也想去弄个简单的原型图先，但是搜了个网页工具一时半会也不会用，作罢。最终决定直接用 elementUI 的组件拼一个出来。直到最后完成用了大半天时间，很显然这个页面对我来说还是有点复杂的。比起项目管理的一个table页，这里的内容多了很多。自然也就遇到了不少之前不太会的...原创 2021-09-26 18:13:00 · 158 阅读 · 0 评论 -
【测试开花】六、项目管理-前后端-实现编辑功能
基于 springboot+vue 的测试平台开发继续更新。今天实现项目列表的编辑功能：点击【编辑】按钮，打开对话框，显示此条记录的信息修改对话框表单内容，点击对话框【保存】按钮，更新此条记录一、打开编辑页面显示数据1. 编辑按钮之前复制的 table 组件，里面带有 2 个按钮，修改其中一个为【编辑】按钮。绑定一个点击事件handleUpdate(scope.row)，这个...原创 2021-09-22 12:23:00 · 164 阅读 · 0 评论 -
【测试开发】十四、接口测试-接口定义功能-前后端-实现新增
基于 springboot+vue 的测试平台开发继续更新。上节画了大概的前端页面，今天主要来实现后端接口，然后调通前后端实现接口新增功能。先预览下效果：老规矩，分为前后端讲解。一、后端部分在 ApiDefinitionController 类中新增一个处理方法，处理接口的新增请求：@PostMapping("/add") public Result add(@RequestBo...原创 2021-10-29 20:10:00 · 306 阅读 · 0 评论 -
【测试开发】十二、接口测试-实现接口列表功能-递归查询子节点下的接口
基于 springboot+vue 的测试平台开发继续更新。模块树节点的开发暂告一段落，现在开发右边接口相关的部分，今天先完成列表的功能。功能是这样，当点击树的某个节点时候，右侧列表展示这个节点下的所有接口，带分页(最终效果图)。需要注意的是，因为节点下还有子节点，所以列表的功能需要使用递归来查询。一、后端1. 建表想了一些字段，可能后续还会有些改动，暂时先这样：CREATE T...原创 2021-10-16 11:47:00 · 271 阅读 · 2 评论 -
【测试开花】五、项目管理-前端-实现查询、新增功能
基于 springboot+vue 的测试平台开发继续更新。一、查询功能在之前的项目列表接口里，支持使用项目名称模糊查询，现在来实现前端。1. input 输入框到组件库里找个输入框：复制代码，修改代码：v-model: 绑定了下面 data 中的projectQuery.projectName。style="width:20%": 调整输入框宽度。size="small"...原创 2021-09-21 09:28:00 · 477 阅读 · 0 评论 -
【测试开发】十三、接口测试-接口定义功能-前端-实现动态增删表单
基于 springboot+vue 的测试平台开发继续更新。目前已经进入到接口定义功能的开发阶段，首先我还是直接在前段画了个大概的页面，先预览下：不过目前只是画了这个页面都主要功能，细节未尽事宜待具体开发的时候再进一步完善。从上面动态图上已经显示了大概情况，主要是创建接口的功能，其中还支持发送调试。发送请求的功能就直接参考 postman，用起来习惯。页面实现整个编辑页面是放在一个对...原创 2021-10-23 22:14:00 · 100 阅读 · 0 评论 -
【测试开发】十一、接口测试-前后端-实现树节点编辑、删除功能
基于 springboot+vue 的测试平台开发继续更新。一、编辑功能1. 编辑页外显点击树节点的编辑按钮，打开对话框，展示原有的节点名称。本来树形控件里没有自带的编辑操作，我直接加了一个按钮在上面，绑定点击事件调用edit(data)方法。为了确认 data 可用，我在edit方法中打印了一下 data 的内容，是有我需要的字段的:id 可以传给后端接口用于查询表里的数据，n...原创 2021-10-04 06:57:00 · 263 阅读 · 0 评论 -
【测试平台开发】十七、接口编辑页面实现下拉级联选择，绑定接口所属模块...
基于 springboot+vue 的测试平台开发继续更新。停更得有半年，最近待业家中没有理由不继续更新了。本来是打算做别的功能，但是我的重新调试环境的时候发现了bug，搞半天原来是因为没实现接口与模块的绑定，导致点击左侧模块树之后列表页就没数据。气死我了，那先来把这个坑填上。先看一下最后的功能效果动图。因为完善这个功能要涉及一些之前功能的改动，所以接下来以实际的开发修改过程来记录内容(......原创 2022-03-21 14:51:00 · 464 阅读 · 0 评论 -
【测试平台开发】十八、vue组件化重构前端代码
基于 springboot+vue 的测试平台开发继续更新(人在魔都 T_T)。这期其实并不是一个详细的开发过程记录，主要还是针对本次前端重构来聊聊几个关注点。目前重构的总进度在80%，重构完的页面没什么变化，再回顾一下。一、为什么重构目前项目的功能开发重点还是在接口管理这一大块，内容多，任务重，可当我着手准备继续开发新功能的时候发现了个重大的问题。我之前接口相关的功能都写在一个vu......原创 2022-04-17 16:11:00 · 352 阅读 · 0 评论 -
【测试平台开发】十九、前端vue重构 — computed、watch、组件通信等常用知识整理...
基于 springboot+vue 的测试平台开发继续更新。当前项目进度的前端重构已经完成了，在重构之余也对一些交互做了优化等。在本次的重构过程中感觉还是有不少收获，尤其是对于一些vue的前端知识的应用。今天不做具体的开发记录分享，整理一下过程中用到的一些vue知识点，结合实际项目代码举例，方便后续回顾，也供有需要的童鞋参考。主要可以分为 2 个大类：常规的、组件通信相关。一、常规知识点......原创 2022-05-10 09:27:00 · 156 阅读 · 0 评论 -
【测试平台开发】二十、完成编辑页发送接口请求功能
基于 springboot+vue 的测试平台(练手项目)开发继续更新。今天终于把已做的功能都重构完成了。其中前端又做了个小调整，就是入参动态增删的控件，本来我是3个tab复用一个组件，后来不断发现一些问题，最后我决定还是分开写吧。今天另一个重点是重做了编辑页发送接口请求的后端功能。这个功能重构之前是有的，但是现在我觉得之前那些做兼容不够。因为我最近在工作中接入飞书的一些开放API，发......原创 2022-05-15 20:32:00 · 176 阅读 · 0 评论 -
【测试平台开发】21. 完成发送接口请求显示响应头信息
基于 springboot+vue 的测试平台(练手项目)开发继续更新。在接口编辑页中点击发送接口请求，除了显示响应体外，还可以显示响应头等辅助信息，今天完成这个功能的开发。一、后端实现后端主要是修改一下处理接口发送请求的方法apiTestRun，之前这个方法返回的直接就是一个响应体，现在修改成返回更多的内容。如图所示，注释掉的部分是之前的返回。在 hutool 的 http 客户......原创 2022-05-17 12:08:00 · 439 阅读 · 0 评论 -
【测试平台开发】22. 接口断言功能-前端vue组件开发
基于 springboot+vue 的测试平台(练手项目)开发继续更新。接下来准备开发请求断言功能。关于这个功能要实现哪些需求，长什么样子，我参考了下其他优秀的业界工具，比如apifox、metersphere等。于是决定还是先紧着最常用的来开发：JSONPath、响应时间、文本，而这些当中，又以JSONPath为优先。老规矩，还是先看一下这个前端组件效果。一、组件的关系上面功能效果......原创 2022-05-25 22:22:00 · 644 阅读 · 0 评论 -
【测试平台开发】23. 接口断言功能-保存接口断言和编辑回显
基于 springboot+vue 的测试平台(练手项目)开发继续更新。上一章开发了接口断言的前端，本章完成接口断言的保存。起初接口相关的断言数据想保存在单独的表里，后来觉得后续像接口另存为用例，运行测试等场景还得去关联查询，最后还是决定继续存放在保存接口信息表的request请求信息中。一、实现保存实现保存的话就简单了，因为我之前的接口request信息是放在 vuex 中，那么在st......原创 2022-06-16 08:14:00 · 1184 阅读 · 0 评论