springboot?vue測試平臺接口定義前后端新增功能怎么實現

這篇文章主要講解了“springboot vue測試平臺接口定義前后端新增功能怎么實現”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“springboot vue測試平臺接口定義前后端新增功能怎么實現”吧！

開發繼續更新

上節畫了大概的前端頁面，今天主要來實現后端接口，然后調通前后端實現接口新增功能。先預覽下效果：

一、后端部分

在 ApiDefinitionController 類中新增一個處理方法，處理接口的新增請求：

@PostMapping("/add")
  public Result add(@RequestBody ApiDefinition request) {
      try {
          apiDefinitionService.add(request);
          return Result.success();
      } catch (Exception e) {
          return Result.fail(e.toString());
      }
  }

對應的在 service 層實現 add 方法：

public void add(ApiDefinition request) {
      if (StringUtils.isEmpty(request.getProjectId().toString())) {
          BtException.throwException("項目id為空");
      }
      if (StringUtils.isEmpty(request.getModuleId().toString())) {
          BtException.throwException("模塊id為空");
      }
      if (StringUtils.isEmpty(request.getName())) {
          BtException.throwException("接口名稱為空");
      }
      request.setCreateTime(new Date());
      request.setUpdateTime(new Date());
      apiDefinitionDAO.insert(request);
  }

保存的實現不難，這里面加了幾個重要參數的為空判斷。

二、前端部分

在上節畫的頁面當中，還留有 rest參數和請求體這 2 個 tabs沒畫，先補全。

1. rest參數

這里主要是針對 restful 風格接口的請求，比如/bloomtest/project/list/1/10，這時候后面的1 和 10，就要在參數里設置變量去取了。

形式還是跟前面的 請求頭 和 query參數一樣的：

對應的增加這個字段：

關于這里面的 key，是組件里需要的，我試過去掉，但是會有問題。暫時先留著，存進來目前不影響我后續的操作。

2. 請求體

這個請求體內容，目前只考慮一般都情況，需要對其進行 json 格式化展示。我依然在 github 上找現成的組件，結果找到了一個vue-json-editor。

這個組件是支持編輯的，我上節里使用在返回展示的不可以編輯。

npm install vue-json-editor --save

安裝好之后，在vue文件中導入使用。

這個組件里同樣也是支持一些功能的，不過我只需要能格式化即可，作者代碼里有一段 demo。

在我的代碼里使用也很簡單，直接找到要放這個輸入框的地方，把代碼copy進去修改。

v-model 雙向綁定的字段:mode="'code'"，則是默認顯示的模式，如下

功能雖然有了，但是樣式和顏色我不太喜歡，我試圖去修改源碼想調整下，但是不行，暫時先這樣，以后再說。

3. 請求參數

因為我整張頁面里分了好多個不同的 form 表單，所以我現在要有個地方處理一下，搜集這些表單的內容，放在一個地方，用于最后的接口請求。

新增一個方法 handleSaveRequest ，給里面的字段賦值：

注意，在方法里有個判斷。就是在這 3 個 tabs 中，我點擊的哪一個，就會把其中添加的內容賦值給this.saveApiRequest.request：

另外，還要注意的是，對于 apiHeader、request、response，還需要使用JSON.stringify()將其轉為 Json 字符串，方便后端保存。

4. 請求接口

首先還是要在 apiDefinition.js 新增這個接口：

接著就是導入：

最后實現新增接口的方法saveApi，當然了，在【保存】按鈕上的@click="saveApi"點擊事件不能少了。

在這個saveApi方法里，要做這么幾件事：

先調用方法handleSaveRequest，給請求參數賦值請求接口，并提示結果關閉新增的對話框刷新列表

這樣接口的新增功能就實現了，不過這里模塊的地方暫時默認寫死了個0，保存的接口先存放在頂級節點下，后續這里還需要實現一個選擇樹，用來綁定具體模塊。

感謝各位的閱讀，以上就是“springboot vue測試平臺接口定義前后端新增功能怎么實現”的內容了，經過本文的學習后，相信大家對springboot vue測試平臺接口定義前后端新增功能怎么實現這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！