測試開發系列之——接口編輯功能（一）

接口編輯功能

基本設置：

• 接口名稱
• 選擇分類
• 請求方法
• 接口地址

請求參數設置，去api_request_param表中去取：

• Query
• Body
• Headers

備註：

apiEdit.html的代碼修改

selected="true"等價於selected=“selected”

			<div class="del-interpre del-interedit">
				<div class="basicinfo-interpre basicset-interedit">
					<div class="comtit-interpre notop">基本設置</div>
					<div class="setlist-interedit">
						<div class="line-interedit line-com">
							<label><span>*</span>接口名稱：</label>
							<div class="ipt-interedit">
								<input name="name" :value="api.name" placeholder="接口名稱" type="text">
							</div>
						</div>
						<div class="line-interedit line-com">
							<label><span>*</span>選擇分類：</label>
							<div class="ipt-interedit">
								<select name="apiClassificationId" id="">
									<option :value="apiClassification.id" v-for="apiClassification in apiClassifications" :selected="api.apiClassificationId==apiClassification.id">{{apiClassification.name}}</option>
<!-- 									<option value="cs2">測試1</option>
									<option value="cs3">測試2</option> -->
								</select>
							</div>
						</div>
						<div class="line-interedit line-com">
							<label><span>*</span>請求方法<i class="icon-doubt"></i>：</label>
							<div class="ipt-interedit">
								<select name="method" id="" class="reqtype-interedit"
									style="width:15%;margin-right:0;">
									<option value="get" :selected="api.method=='get'">GET</option>
									<option value="post" :selected="api.method=='post'">POST</option>
									<option value="put" :selected="api.method=='put'">PUT</option>
									<option value="delete" :selected="api.method=='delete'">DELETE</option>
									<option value="head" :selected="api.method=='head'">HEAD</option>
									<option value="option" :selected="api.method=='option'">OPTION</option>
									<option value="patch" :selected="api.method=='patch'">PATCH</option>
								</select>
							</div>
						</div>
						<div class="line-interedit line-com">
							<label><span>*</span>接口地址<i class="icon-doubt"></i>：</label>
							<div class="ipt-interedit">
								<input placeholder="/path" name="url" :value="api.url" type="text">
							</div>
						</div>
					</div>
				</div>

接口編輯頁的效果圖

註冊接口編輯頁的效果圖：

登錄接口編輯頁的效果圖：

apiEdit.html請求參數部分的代碼修改

註釋掉寫死的這部分代碼：

接口編輯頁的請求參數設置的效果圖

註冊接口的請求參數設置的效果圖：

登錄接口的請求參數設置的效果圖：

toApiView的接口請求與響應

請求：
Request URL: http://admin.ck.org/lemon/api/toApiView?apiId=2
返回：

{
	"status": "1",
	"data": {
		"id": 2,
		"apiClassificationId": 1,
		"name": "註冊",
		"method": "post",
		"url": "/futureloan/mvc/api/member/register",
		"description": "",
		"createUser": 2,
		"createTime": "2019-08-16T06:23:28.000+0000",
		"createUsername": "[email protected]",
		"host": null,
		"requestParams": [{
			"id": 88,
			"apiId": 2,
			"name": "mobilephone",
			"paramType": "string",
			"type": 2,
			"exampleData": "",
			"description": ""
		}, {
			"id": 93,
			"apiId": 2,
			"name": "pwd",
			"paramType": "string",
			"type": 2,
			"exampleData": "",
			"description": ""
		}, {
			"id": 94,
			"apiId": 2,
			"name": "Content-Type",
			"paramType": "string",
			"type": 3,
			"exampleData": "application/x-www-form-urlencoded;charset=utf-8",
			"description": ""
		}],
		"queryParams": [],
		"bodyParams": [],
		"headerParams": [],
		"bodyRawParams": []
	},
	"message": null
}

接口更新和保存功能

• edit接口的請求和響應
  請求：
  Request URL: http://www.ck.org/lemon/api/edit
  請求體：

id: 4
name: %E6%B3%A8%E5%86%8C
apiClassificationId: 1
method: post
url: %2Ffutureloan%2Fmvc%2Fapi%2Fmember%2Fregister
requestParams%5B0%5D.id: 88
requestParams%5B0%5D.apiId: 2
requestParams%5B0%5D.type: 2
requestParams%5B0%5D.name: mobilephone
requestParams%5B0%5D.paramType: string
requestParams%5B0%5D.exampleData: 
requestParams%5B0%5D.description: %E8%A1%A8%E5%8D%95%E6%8F%90%E4%BA%A4%E5%8F%82%E6%95%B0
requestParams%5B1%5D.id: 93
requestParams%5B1%5D.apiId: 2
requestParams%5B1%5D.type: 2
requestParams%5B1%5D.name: pwd
requestParams%5B1%5D.paramType: string
requestParams%5B1%5D.exampleData: 
requestParams%5B1%5D.description: %E8%A1%A8%E5%8D%95%E6%8F%90%E4%BA%A4%E5%8F%82%E6%95%B0
requestParams%5B2%5D.id: 94
requestParams%5B2%5D.apiId: 2
requestParams%5B2%5D.type: 3
requestParams%5B2%5D.name: Content-Type
requestParams%5B2%5D.paramType: string
requestParams%5B2%5D.exampleData: 
requestParams%5B2%5D.description: %E8%A1%A8%E5%8D%95%E6%8F%90%E4%BA%A4%E5%8F%82%E6%95%B0

apiEdit.html的代碼再次修改

	<script src="/lemon/js/vue.js"></script>
	<script src="/lemon/js/axios.min.js"></script>
	<script type="text/javascript" src="/lemon/js/jquery.cookie.js" charset="UTF-8"></script>
	<script type="text/javascript">
		var app = new Vue({
			el: ".del-interpre",
			data: {
				api: {},
				apiClassifications: []
			},
			methods: {
				showClassification() {
					let projectId = sessionStorage.getItem("projectId");
					var url = lemon.config.global.adminUrl + "/apiClassification/findAll";
					axios.get(url,
						{
							headers: { "Authorization": $.cookie("sessionId") },
							params: { "projectId": projectId }
						})
						.then(response => {
							this.apiClassifications = response.data.data;
						});
				},
				showApi() {
					let apiId = sessionStorage.getItem("apiId");
					axios.get(lemon.config.global.adminUrl + "/api/toApiView", {
						headers: { "Authorization": $.cookie("sessionId") },
						params: { "apiId": apiId }
					}).then(response => {
						this.api = response.data.data;
						if (this.api.status == 1 & this.api.message == "未登陸") {
							location.href = lemon.config.global.rootUrl + "/html/login.html";
						}

						let requestParams = this.api.requestParams;
						for (let i = 0; i < requestParams.length; i++) {
							let param = requestParams[i];
							let str = `<div class="line-interedit line-com">
										<input name="requestParams[${i}].id" value="${param.id}" type="hidden">
										<input name="requestParams[${i}].apiId" value="${param.apiId}" type="hidden">
										<input name="requestParams[${i}].type" value="${param.type}" type="hidden">
										<input placeholder="name" name="requestParams[${i}].name" value="${param.name}"
											style="width:20%" type="text">
										<select name="requestParams[${i}].paramType" id="" style="width:12%">
											<option value="string" selected="${param.paramType=='string'}">string</option>
											<option value="int" ${param.paramType=='int'?'selected':''}>int</option>
										</select>
										<textarea name="requestParams[${i}].exampleData" id="" value="${param.exampleData}" placeholder="參數示例"
											style="width:20%"></textarea>
										<textarea name="requestParams[${i}].description" id="" value="${param.description}" placeholder="備註"
											style="width:29%">表單提交參數</textarea>
										<i class="icon icon-delete f-l"></i>
									</div>`;
							if (param.type == 1) {
								$("#reqpQuery .linebox-interedit").append(str);
							} else if (param.type == 2) {
								$("#reqpBody .linebox-interedit").append(str);
							} else if (param.type == 3) {
								$("#reqpHeaders .linebox-interedit").append(str);
							} else {

							}
						}
					});

				}
			},
			created() {
				this.showClassification();
				this.showApi();
			}
		})
	</script>
	<script type="text/javascript" src="/lemon/js/base.js"></script>
	<script type="text/javascript" src="/lemon/js/apiEdit.js"></script>

接口編輯和保存功能的思路

• 接口基本信息，編輯完成保存，要做更新操作。
• 如果請求參數，數據庫無數據，要做插入操作（insert api_request_param表）。
• 如果請求參數，數據庫有數據，要做更新操作（update api_request_param表）。
• 無論是插入還是更新操作，都根據apiId先做一遍delete from api_request_param表操作，就可以統一操作，都進行insert插入操作，就少了一次判斷操作，很難去判斷有值還是沒有值。從業務角度上來講，是有插入和更新兩種可能行的。但是在操作層面上來將，可以降低判斷成本。
• 不根據主鍵id去刪除，根據外鍵apiId進行刪除，刪除得較爲乾淨，也比較容易查詢出來。

addAll(list)

整個子集的數據，都追加到歷史集合的數據當中。
add只可以加一個，addAll(list)就可以加一個集合。
最終的結果就是，子集把它的值給到總的集合。

爲什麼要這麼做？
原因是因爲如果沒有添加的話，全部是requestParams。
但是用戶如果做了額外的操作，點擊了添加。
用了前端設計的，分成了Query、Body和Header。
這些值相對獨立，所以用這個方法。

		//3.insert apiRequestParam
		apiEdit.getRequestParams().addAll(apiEdit.getQueryParams());
		apiEdit.getRequestParams().addAll(apiEdit.getHeaderParams());
		apiEdit.getRequestParams().addAll(apiEdit.getBodyParams());
		apiEdit.getRequestParams().addAll(apiEdit.getBodyRawParams());
		apiRequestParamService.saveBatch(apiEdit.getRequestParams());

後端ApiController.java的代碼修改

package com.one.controller;


import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;

import com.one.common.Result;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.one.common.ApiListVO;
import com.one.common.ApiVO;
import com.one.service.ApiRequestParamService;
import com.one.service.ApiService;

/**
 * <p>
 *  前端控制器
 * </p>
 *
 * @author annie
 * @since 2020-02-16
 */
@RestController
@RequestMapping("/api")
public class ApiController {
	@Autowired
	ApiService apiService;
	
	@Autowired
	ApiRequestParamService apiRequestParamService;	
	
	@GetMapping("/showApiUnderProject")
	public Result showApiListByProject(Integer projectId){
		List<ApiListVO> list = apiService.showApiListByProject(projectId);
		Result result = new Result("1",list);
		return result;
	}
	
	@GetMapping("/showApiUnderApiClassification")
	public Result showApiUnderApiClassification(Integer apiClassificationId){
		List<ApiListVO> list = apiService.showApiListByApiClassification(apiClassificationId);
		Result result = new Result("1",list);
		return result;
	}
	
	@GetMapping("/toApiView")
	public Result findApiViewVO(Integer apiId){
		ApiVO api = apiService.findApiViewVO(apiId);
		Result result = new Result("1",api);
		return result;
	}	
	
	@PutMapping("/edit")
	public Result toApiEdit(ApiVO apiEdit){
		//1.直接根據apiId進行更新api
		apiService.updateById(apiEdit);
		//2.delete原來的apiRequestParam
		QueryWrapper queryWrapper = new QueryWrapper();
		queryWrapper.eq("api_id", apiEdit.getId());
		apiRequestParamService.remove(queryWrapper);
		//3.insert apiRequestParam
		apiEdit.getRequestParams().addAll(apiEdit.getQueryParams());
		apiEdit.getRequestParams().addAll(apiEdit.getHeaderParams());
		apiEdit.getRequestParams().addAll(apiEdit.getBodyParams());
		apiEdit.getRequestParams().addAll(apiEdit.getBodyRawParams());
		apiRequestParamService.saveBatch(apiEdit.getRequestParams());
		Result result = new Result("1","更新成功");
		return result;
	}		
}

apiEdit.js的代碼修改

更新保存按鈕的代碼如下：

	//保存按鈕
	$(".comfirm-interedit").find(".btn-com").click(function(){
		$.ajax({
			headers:{"Authorization":$.cookie("sessionId")},
			url:lemon.config.global.adminUrl+"/api/edit",
			data:$("[name='apiEditForm']").serialize(),
			type:'put',
			dataType:'json',
			success:function(ret){
				if(ret!=null){
					alert(ret.message);
				}
			}
		});
	});

遇到的問題彙總

問題：發現編輯後保存，要更新的apiId不正確，apiId始終傳的是4。
解決方法：
查看apiEdit.html的代碼，如下value寫死了，需要把value="4"修改成:value="api.id"，api.id通過隱藏表單傳過去。
且需要將代碼<input name="id" :value="api.id" type="hidden">修改放在vue的掛載點<div class="del-interpre del-interedit">下面。

		<form name="apiEditForm">
			<div class="del-interpre del-interedit">
				<input name="id" :value="api.id" type="hidden">