springboot?vue測試平臺接口定義前后端新增功能實現(xiàn)
基于 springboot+vue 的測試平臺
開發(fā)繼續(xù)更新
上節(jié)畫了大概的前端頁面,今天主要來實現(xiàn)后端接口,然后調(diào)通前后端實現(xiàn)接口新增功能。先預(yù)覽下效果:
老規(guī)矩,分為前后端講解。
一、后端部分
在 ApiDefinitionController 類中新增一個處理方法,處理接口的新增請求:
@PostMapping("/add") public Result add(@RequestBody ApiDefinition request) { try { apiDefinitionService.add(request); return Result.success(); } catch (Exception e) { return Result.fail(e.toString()); } }
對應(yīng)的在 service 層實現(xiàn) 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); }
保存的實現(xiàn)不難,這里面加了幾個重要參數(shù)的為空判斷。
二、前端部分
在上節(jié)畫的頁面當(dāng)中,還留有 rest參數(shù)和請求體這 2 個 tabs沒畫,先補(bǔ)全。
1. rest參數(shù)
這里主要是針對 restful 風(fēng)格接口的請求,比如/bloomtest/project/list/1/10
,這時候后面的1 和 10,就要在參數(shù)里設(shè)置變量去取了。
形式還是跟前面的 請求頭 和 query參數(shù)一樣的:
對應(yīng)的增加這個字段:
關(guān)于這里面的 key,是組件里需要的,我試過去掉,但是會有問題。暫時先留著,存進(jìn)來目前不影響我后續(xù)的操作。
2. 請求體
這個請求體內(nèi)容,目前只考慮一般都情況,需要對其進(jìn)行 json 格式化展示。我依然在 github 上找現(xiàn)成的組件,結(jié)果找到了一個vue-json-editor
。
這個組件是支持編輯的,我上節(jié)里使用在返回展示的不可以編輯。
npm install vue-json-editor --save
安裝好之后,在vue文件中導(dǎo)入使用。
這個組件里同樣也是支持一些功能的,不過我只需要能格式化即可,作者代碼里有一段 demo。
在我的代碼里使用也很簡單,直接找到要放這個輸入框的地方,把代碼copy進(jìn)去修改。
v-model 雙向綁定的字段:mode="'code'",則是默認(rèn)顯示的模式,如下
功能雖然有了,但是樣式和顏色我不太喜歡,我試圖去修改源碼想調(diào)整下,但是不行,暫時先這樣,以后再說。
3. 請求參數(shù)
因為我整張頁面里分了好多個不同的 form 表單,所以我現(xiàn)在要有個地方處理一下,搜集這些表單的內(nèi)容,放在一個地方,用于最后的接口請求。
新增一個方法 handleSaveRequest ,給里面的字段賦值:
注意,在方法里有個判斷。就是在這 3 個 tabs 中,我點擊的哪一個,就會把其中添加的內(nèi)容賦值給this.saveApiRequest.request:
另外,還要注意的是,對于 apiHeader、request、response,還需要使用JSON.stringify()將其轉(zhuǎn)為 Json 字符串,方便后端保存。
4. 請求接口
首先還是要在 apiDefinition.js 新增這個接口:
接著就是導(dǎo)入:
最后實現(xiàn)新增接口的方法saveApi
,當(dāng)然了,在【保存】按鈕上的@click="saveApi"
點擊事件不能少了。
在這個saveApi
方法里,要做這么幾件事:
先調(diào)用方法handleSaveRequest
,給請求參數(shù)賦值請求接口,并提示結(jié)果關(guān)閉新增的對話框刷新列表
這樣接口的新增功能就實現(xiàn)了,不過這里模塊的地方暫時默認(rèn)寫死了個0,保存的接口先存放在頂級節(jié)點下,后續(xù)這里還需要實現(xiàn)一個選擇樹,用來綁定具體模塊。
編輯的功能先不急,接下來先實現(xiàn)發(fā)送請求的功能,方便調(diào)試接口。預(yù)計工作量都在后端,剛好到周末了,可以集中開發(fā)一下,更多關(guān)于springboot vue測試接口前后端新增的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
說說字符串轉(zhuǎn) OffSetDateTime 你真的會用嗎
這篇文章主要介紹了字符串轉(zhuǎn) OffSetDateTime 你真的會用嗎?具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2021-08-08Java內(nèi)存模型相關(guān)知識總結(jié)
這篇文章主要介紹了Java內(nèi)存模型相關(guān)知識總結(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10SpringCloud服務(wù)之間Feign調(diào)用不會帶上請求頭header的解決方法
在Spring?Cloud中,使用Feign進(jìn)行服務(wù)之間的調(diào)用時,默認(rèn)情況下是不會傳遞header的,這篇文章給大家介紹SpringCloud服務(wù)之間Feign調(diào)用不會帶上請求頭header的解決方法,感興趣的朋友一起看看吧2024-01-01Java多線程之線程通信生產(chǎn)者消費者模式及等待喚醒機(jī)制代碼詳解
這篇文章主要介紹了Java多線程之線程通信生產(chǎn)者消費者模式及等待喚醒機(jī)制代碼詳解,具有一定參考價值,需要的朋友可以了解下。2017-10-10spring 中事務(wù)注解@Transactional與trycatch的使用
這篇文章主要介紹了spring 中事務(wù)注解@Transactional與trycatch的使用,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2021-06-06