欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

springboot?vue接口測試前后端實現(xiàn)模塊樹列表功能

 更新時間:2022年05月27日 08:40:51   作者:把蘋果咬哭的測試筆記  
這篇文章主要為大家介紹了springboot?vue接口測試前后端實現(xiàn)模塊樹列表功能,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

基于 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)模塊樹列表功能的詳細內(nèi)容,接下來,將開發(fā)樹結(jié)點的增刪改,更多關(guān)于springboot vue前后端模塊樹列表的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • Java中的5種同步輔助類介紹

    Java中的5種同步輔助類介紹

    你提交了一些任務(wù),但你想等它們都完成了再做另外一些事情;你提交了一些任務(wù),但是不想讓它們立刻執(zhí)行,等你喊123開始的時候,它們才開始執(zhí)行;等等這些場景,線程之間需要相互配合,或者等待某一個條件成熟執(zhí)行。這些場景想你就需要用到同步輔助類
    2014-04-04
  • Spring mvc是如何實現(xiàn)與數(shù)據(jù)庫的前后端的連接操作的?

    Spring mvc是如何實現(xiàn)與數(shù)據(jù)庫的前后端的連接操作的?

    今天給大家?guī)淼氖顷P(guān)于Spring mvc的相關(guān)知識,文章圍繞著Spring mvc是如何實現(xiàn)與數(shù)據(jù)庫的前后端的連接操作的展開,文中有非常詳細的介紹及代碼示例,需要的朋友可以參考下
    2021-06-06
  • Springboot自動裝配之注入DispatcherServlet的實現(xiàn)方法

    Springboot自動裝配之注入DispatcherServlet的實現(xiàn)方法

    這篇文章主要介紹了Springboot自動裝配之注入DispatcherServlet,Springboot向外界提供web服務(wù),底層依賴了springframework中的web模塊來實現(xiàn),那么springboot在什么時機向容器注入DispatcherServlet這個核心類的呢?帶著這個問題一起通過本文學(xué)習(xí)吧
    2022-05-05
  • PostConstruct注解標(biāo)記類ApplicationContext未加載空指針

    PostConstruct注解標(biāo)記類ApplicationContext未加載空指針

    這篇文章主要為大家介紹了@PostConstruct注解標(biāo)記類ApplicationContext未加載空指針示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-11-11
  • Springboot訪問html頁面的教程詳解

    Springboot訪問html頁面的教程詳解

    這篇文章主要介紹了Springboot訪問html頁面的教程,本文圖文并茂給大家介紹的非常詳細,需要的朋友可以參考下
    2018-03-03
  • java.util.Date與java.sql.Date的區(qū)別

    java.util.Date與java.sql.Date的區(qū)別

    這篇文章主要介紹了java.util.Date與java.sql.Date的區(qū)別的相關(guān)資料,需要的朋友可以參考下
    2015-07-07
  • 基于SpringBoot整合SSMP的詳細教程

    基于SpringBoot整合SSMP的詳細教程

    這篇文章主要介紹了SpringBoot整合SSMP的詳細教程,通過本文學(xué)習(xí)基于SpringBoot實現(xiàn)SSMP整合的詳細代碼,需要的朋友可以參考下
    2022-08-08
  • 詳解java各種集合的線程安全

    詳解java各種集合的線程安全

    這篇文章主要介紹了詳解java各種集合的線程安全,小編覺得挺不錯的,這里分享給大家,供需要的朋友參考。
    2017-10-10
  • springboot+Quartz實現(xiàn)任務(wù)調(diào)度的示例代碼

    springboot+Quartz實現(xiàn)任務(wù)調(diào)度的示例代碼

    本篇文章主要介紹了springboot + Quartz 實現(xiàn)任務(wù)調(diào)度的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-02-02
  • 詳解RabbitMQ中死信隊列和延遲隊列的使用詳解

    詳解RabbitMQ中死信隊列和延遲隊列的使用詳解

    這篇文章主要為大家介紹了RabbitMQ中死信隊列和延遲隊列的原理與使用,這也是Java后端面試中常見的問題,感興趣的小伙伴可以了解一下
    2022-05-05

最新評論