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

目录
  • 基于 springboot+vue 的测试平台
    • 一、存放接口的js文件
    • 二、在vue文件中调用接口
      • 1. 触发接口
      • 2. 调用接口
    • 三、实现选择项目功能
      • 1. 后端增加获取所有项目接口
      • 2. 前端调用接口
      • 3. 选择项目触发模块树接口
      • 4. 测试一下

基于 springboot+vue 的测试平台

开发继续更新。

上一篇完成了模块树的列表接口，接下来可以和前端页面联调了。

一、存放接口的js文件

老样子，新建js文件，把要调用的后端接口请求封装在 src/api/apiModule.js这里：

import request from '@/utils/request'

export function getModuleList(projectId) {
  return request({
    url: `/bloomtest/module/list/${projectId}`,
    method: 'get'
  })
}

二、在vue文件中调用接口

我把vue文件名改了下，之前叫index.vue，现在换成了src/views/apiManagement/moduleTreeTable.vue。

对应的把src/router/index.js里的路径也改好，换成重命名之后的 vue 文件名。

接下来修改 vue 里之前拷贝来的代码，<template>标签里的暂时不需要改，我们只要修改下<script>里的代码。

在 return 里，tree组件绑定的是 data ，之前直接写死的数据，现在删掉，就是一个空数组[]。

因为 data 数组中需要的数据，我实现的后端接口返回是完全满足的，所以直接写方法调用即可。

1. 触发接口

按正常来说，我到了这个接口定义列表页，需要选择好一个项目，然后列表展示这个项目下的模块树和接口列表。

但是这里还需要写一个对应的功能，来选择具体项目，暂时先不做。

那么我把触发模块树接口的事件放在【创建接口】这个按钮上，点击按钮就会请求接口。

绑定一个方法queryModuleList。

2. 调用接口

在 method 里实现方法queryModuleList，在里面完成接口的调用。

目前项目id直接写死一个3，方便调试。这里还加了一行打印console.log(this.data)，也可以在控制台看到接口的返回。

打开 F12 ，点击【创建接口】按钮，查看调用结果。

页面展示效果正常。

三、实现选择项目功能

上面为了快速调试模块树功能，展示用【创建按钮】触发请求，现在实现这个选择项目的功能。

功能很简单，就是在打开接口定义页面的时候请求接口获取到所有项目，然后下拉列表可以搜索选择其中的项目。

1. 后端增加获取所有项目接口

暂时因为没有引入用户权限这块，所以直接先拿所有的项目。

在后端实现一个对应的接口/bloomtest/project/list/all。

@GetMapping("/list/all")
    public Result getProjectAll() {
        return Result.success(projectService.getProjectAll());
    }
public List<Project> getProjectAll() {
        QueryWrapper<Project> queryWrapper = new QueryWrapper<>();
        return projectDAO.selectList(queryWrapper);
    }

测试返回正常。

2. 前端调用接口

在src/api/projectManagement.js中新增接口：

export function getProjectAll() {
  return request({
    url: '/bloomtest/project/list/all',
    method: 'get'
  })
}

导入到 vue 中。

在vue文件中 methods 中新增方法getAllProject：

请求返回的列表赋值给this.options，之前是写死的数据，现在换成空数组。

对应组件里的字段也要换成接口返回的字段。

最后在created里调用方法。

现在点击下拉就可以看到项目了。

3. 选择项目触发模块树接口

这个选择器组件有个事件change，选中值发生变化时触发，所以把之前的【创建按钮】绑定的点击事件调用的方法，用到这里即可。

4. 测试一下

先选择下项目2，只会有一个默认项目。

再选择项目3，之前调试用的项目id，里面有层级数据。

功能正常。

以上就是springboot vue接口测试前后端实现模块树列表功能的详细内容，接下来，将开发树结点的增删改，更多关于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前后端接口测试树结点添加功能

    目录 基于springboot+vue的测试平台开发 一.前端Tree树形控件的append方法 二.后端实现节点新增接口 1. controller 层 2. service 层 三.前后端联调 四.编辑节点名称 1. 打开对话框 2. 新增节点 3. 测试 基于springboot+vue的测试平台开发 继续更新. 一.前端Tree树形控件的append方法 在elementUI 树控件下有个append方法,可以用来为 Tree 中的一个节点追加一个子节点. 目前我们已经完成了树列表的接口

  • 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 的测试平台开发 一.后端 1. 建表 2. 列表接口 二.前端 1. 准备工作 2. 请求接口 3. 测试效果 4. 发现问题 基于 springboot+vue 的测试平台开发 继续更新 模块树节点的开发暂告一段落,现在开发右边接口相关的部分,今天先完成列表的功能. 功能是这样,当点击树的某个节点时候,右侧列表展示这个节点下的所有接口,带分页(最终效果图). 需要注意的是,因为节点下还有子节点,所以列表的功能需要使用递归来查询. 一.后端 1. 建表

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

  • 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实现前后端分离的实战记录

    一,前端VUE项目 这里使用VUE UI创建一个VUE项目 命令行输入vue ui进入 手动配置项目 选中这三个 点击下一步->点击创建项目 用IDEA打开刚才创建的项目 IDEA中的安装vue插件并重启 IDEA控制台中输入vue add axios安装axios 新建一个Show.vue 在index,js的routes中配置它的路由 编写Show,vue向后端请求数据并展示 <template> <div> <table> <tr> <td

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

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

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

  • Springboot运用vue+echarts前后端交互实现动态圆环图

    Springboot运用vue+echarts前后端交互实现动态圆环图

    目录 前言 一.环境配置 1.1 安装acharts 1.2 全局引用 二.圆环图前端实现 2.1 先在vue页面添加渲染盒子 2.2 前端逻辑实现部分 2.3 展示(可按自己需求更改前端样式) 三.前后端数据交互实现 3.1 创建数据库 3.2 后台代码的编写 前言 我们做项目的时候,常常需要一些统计图来展示我们的数据,作为web开发人员,会实现统计图是我们必会的技能.我将带大家来实现动态饼图的实现 一.环境配置 1.1 安装acharts //npm也一样 cnpm install echa

  • SpringBoot+mybatis+Vue实现前后端分离项目的示例

    SpringBoot+mybatis+Vue实现前后端分离项目的示例

    目录 一.SpringBoot环境搭建 1.项目的数据库 2.项目所需依赖 3.application.yml文件 4.入口类 二.vue实现前后端分离 1.前端页面 2.springBoot控制层 3.mapper文件 4.项目完整源代码 vue前后端分离实现功能:员工的增删改(先实现数据回显之后,再进行修改)查 一.SpringBoot环境搭建 1.项目的数据库 /* Navicat Premium Data Transfer Source Server : windows Source S

  • 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

  • spring boot+vue 的前后端分离与合并方案实例详解

    springboot和vue结合的方案网络上的主要有以下两种: 1. [不推荐]在html中直接使用script标签引入vue和一些常用的组件,这种方式和以前传统的开发是一样的,只是可以很爽的使用vue的双向数据绑定,这种方式只适合于普通的全栈开发. 2.[推荐]使用vue官方的脚手架创建单独的前端工程项目,做到和后端完全独立开发和部署,后端单独部署一个纯restful的服务,而前端直接采用nginx来部署,这种称为完全的前后端分离架构开发模式,但是在分离中有很多api权限的问题需要解决,包括部

  • python框架django中结合vue进行前后端分离

    python框架django中结合vue进行前后端分离

    目录 一:创建django项目 二:安装vue 三:设置vue项目 四:vue项目写完后,打包vue项目,然后修改django配置,将vue集成到django中 五:修改django的主目录的urls文件 六:启动django服务,访问localhost:8000 则可以出现vue的首页 七:有时候并不能直接访问出首页,原因是路径不对 八:vue打包之后经常会出现fontawesome图标库不能使用的情况 一:创建django项目 django-admin startproject mysite

随机推荐