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

springboot?vue測(cè)試平臺(tái)接口定義前后端新增功能實(shí)現(xiàn)

 更新時(shí)間:2022年05月26日 15:07:31   作者:把蘋(píng)果咬哭的測(cè)試筆記  
這篇文章主要介紹了springboot?vue測(cè)試平臺(tái)接口定義前后端新增功能實(shí)現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

基于 springboot+vue 的測(cè)試平臺(tái)

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

上節(jié)畫(huà)了大概的前端頁(yè)面,今天主要來(lái)實(shí)現(xiàn)后端接口,然后調(diào)通前后端實(shí)現(xiàn)接口新增功能。先預(yù)覽下效果:

老規(guī)矩,分為前后端講解。

一、后端部分

在 ApiDefinitionController 類(lèi)中新增一個(gè)處理方法,處理接口的新增請(qǐng)求:

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

對(duì)應(yīng)的在 service 層實(shí)現(xiàn) add 方法:

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

保存的實(shí)現(xiàn)不難,這里面加了幾個(gè)重要參數(shù)的為空判斷。

二、前端部分

在上節(jié)畫(huà)的頁(yè)面當(dāng)中,還留有 rest參數(shù)和請(qǐng)求體這 2 個(gè) tabs沒(méi)畫(huà),先補(bǔ)全。

1. rest參數(shù)

這里主要是針對(duì) restful 風(fēng)格接口的請(qǐng)求,比如/bloomtest/project/list/1/10,這時(shí)候后面的1 和 10,就要在參數(shù)里設(shè)置變量去取了。

形式還是跟前面的 請(qǐng)求頭 和 query參數(shù)一樣的:

對(duì)應(yīng)的增加這個(gè)字段:

關(guān)于這里面的 key,是組件里需要的,我試過(guò)去掉,但是會(huì)有問(wèn)題。暫時(shí)先留著,存進(jìn)來(lái)目前不影響我后續(xù)的操作。

2. 請(qǐng)求體

這個(gè)請(qǐng)求體內(nèi)容,目前只考慮一般都情況,需要對(duì)其進(jìn)行 json 格式化展示。我依然在 github 上找現(xiàn)成的組件,結(jié)果找到了一個(gè)vue-json-editor。

這個(gè)組件是支持編輯的,我上節(jié)里使用在返回展示的不可以編輯。

npm install vue-json-editor --save

安裝好之后,在vue文件中導(dǎo)入使用。

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

在我的代碼里使用也很簡(jiǎn)單,直接找到要放這個(gè)輸入框的地方,把代碼copy進(jìn)去修改。

v-model 雙向綁定的字段:mode="'code'",則是默認(rèn)顯示的模式,如下

功能雖然有了,但是樣式和顏色我不太喜歡,我試圖去修改源碼想調(diào)整下,但是不行,暫時(shí)先這樣,以后再說(shuō)。

3. 請(qǐng)求參數(shù)

因?yàn)槲艺麖堩?yè)面里分了好多個(gè)不同的 form 表單,所以我現(xiàn)在要有個(gè)地方處理一下,搜集這些表單的內(nèi)容,放在一個(gè)地方,用于最后的接口請(qǐng)求。

新增一個(gè)方法 handleSaveRequest ,給里面的字段賦值:

注意,在方法里有個(gè)判斷。就是在這 3 個(gè) tabs 中,我點(diǎn)擊的哪一個(gè),就會(huì)把其中添加的內(nèi)容賦值給this.saveApiRequest.request:

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

4. 請(qǐng)求接口

首先還是要在 apiDefinition.js 新增這個(gè)接口:

接著就是導(dǎo)入:

最后實(shí)現(xiàn)新增接口的方法saveApi,當(dāng)然了,在【保存】按鈕上的@click="saveApi"點(diǎn)擊事件不能少了。

在這個(gè)saveApi方法里,要做這么幾件事:

先調(diào)用方法handleSaveRequest,給請(qǐng)求參數(shù)賦值請(qǐng)求接口,并提示結(jié)果關(guān)閉新增的對(duì)話框刷新列表

這樣接口的新增功能就實(shí)現(xiàn)了,不過(guò)這里模塊的地方暫時(shí)默認(rèn)寫(xiě)死了個(gè)0,保存的接口先存放在頂級(jí)節(jié)點(diǎn)下,后續(xù)這里還需要實(shí)現(xiàn)一個(gè)選擇樹(shù),用來(lái)綁定具體模塊。

編輯的功能先不急,接下來(lái)先實(shí)現(xiàn)發(fā)送請(qǐng)求的功能,方便調(diào)試接口。預(yù)計(jì)工作量都在后端,剛好到周末了,可以集中開(kāi)發(fā)一下,更多關(guān)于springboot vue測(cè)試接口前后端新增的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

最新評(píng)論