基于 springboot+vue 的測試平臺

開發(fā)繼續(xù)更新。

上一篇完成了模塊樹的列表接口，接下來可以和前端頁面聯(lián)調(diào)了。

一、存放接口的js文件

老樣子，新建js文件，把要調(diào)用的后端接口請求封裝在 src/api/apiModule.js這里：

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

二、在vue文件中調(diào)用接口

我把vue文件名改了下，之前叫index.vue，現(xiàn)在換成了src/views/apiManagement/moduleTreeTable.vue。

對應(yīng)的把src/router/index.js里的路徑也改好，換成重命名之后的 vue 文件名。

接下來修改 vue 里之前拷貝來的代碼，<template>標(biāo)簽里的暫時不需要改，我們只要修改下<script>里的代碼。

在 return 里，tree組件綁定的是 data ，之前直接寫死的數(shù)據(jù)，現(xiàn)在刪掉，就是一個空數(shù)組[]。

因為 data 數(shù)組中需要的數(shù)據(jù)，我實現(xiàn)的后端接口返回是完全滿足的，所以直接寫方法調(diào)用即可。

1. 觸發(fā)接口

按正常來說，我到了這個接口定義列表頁，需要選擇好一個項目，然后列表展示這個項目下的模塊樹和接口列表。

但是這里還需要寫一個對應(yīng)的功能，來選擇具體項目，暫時先不做。

那么我把觸發(fā)模塊樹接口的事件放在【創(chuàng)建接口】這個按鈕上，點擊按鈕就會請求接口。

綁定一個方法queryModuleList。

2. 調(diào)用接口

在 method 里實現(xiàn)方法queryModuleList，在里面完成接口的調(diào)用。

目前項目id直接寫死一個3，方便調(diào)試。這里還加了一行打印console.log(this.data)，也可以在控制臺看到接口的返回。

打開 F12 ，點擊【創(chuàng)建接口】按鈕，查看調(diào)用結(jié)果。

頁面展示效果正常。

三、實現(xiàn)選擇項目功能

上面為了快速調(diào)試模塊樹功能，展示用【創(chuàng)建按鈕】觸發(fā)請求，現(xiàn)在實現(xiàn)這個選擇項目的功能。

功能很簡單，就是在打開接口定義頁面的時候請求接口獲取到所有項目，然后下拉列表可以搜索選擇其中的項目。

1. 后端增加獲取所有項目接口

暫時因為沒有引入用戶權(quán)限這塊，所以直接先拿所有的項目。

在后端實現(xiàn)一個對應(yīng)的接口/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. 前端調(diào)用接口

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

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

導(dǎo)入到 vue 中。

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

請求返回的列表賦值給this.options，之前是寫死的數(shù)據(jù)，現(xiàn)在換成空數(shù)組。

對應(yīng)組件里的字段也要換成接口返回的字段。

最后在created里調(diào)用方法。

現(xiàn)在點擊下拉就可以看到項目了。

3. 選擇項目觸發(fā)模塊樹接口

這個選擇器組件有個事件change，選中值發(fā)生變化時觸發(fā)，所以把之前的【創(chuàng)建按鈕】綁定的點擊事件調(diào)用的方法，用到這里即可。

4. 測試一下

先選擇下項目2，只會有一個默認(rèn)項目。

再選擇項目3，之前調(diào)試用的項目id，里面有層級數(shù)據(jù)。

功能正常。

以上就是springboot vue接口測試前后端實現(xiàn)模塊樹列表功能的詳細(xì)內(nèi)容，接下來，將開發(fā)樹結(jié)點的增刪改，更多關(guān)于springboot vue前后端模塊樹列表的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論