springboot vue接口測試前後端實現模塊樹列表功能

Posted on by

基於 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前後端模塊樹列表的資料請關註WalkonNet其它相關文章！

推薦閱讀：