基於 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，儲存的介面先存放在頂級節點下，後續這裡還需要實現一個選擇樹，用來繫結具體模組。

編輯的功能先不急，接下來先實現傳送請求的功能，方便除錯介面。預計工作量都在後端，剛好到週末了，可以集中開發一下。