基于 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)簽里的暫時(shí)不需要改，我們只要修改下<script>里的代碼。

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

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

1. 觸發(fā)接口

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

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

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

綁定一個(gè)方法queryModuleList。

2. 調(diào)用接口

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

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

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

頁面展示效果正常。

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

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

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

1. 后端增加獲取所有項(xiàng)目接口

暫時(shí)因?yàn)闆]有引入用戶權(quán)限這塊，所以直接先拿所有的項(xiàng)目。

在后端實(shí)現(xiàn)一個(gè)對應(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)在點(diǎn)擊下拉就可以看到項(xiàng)目了。

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

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

4. 測試一下

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

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

功能正常。

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