测试开发系列之——接口编辑功能（二）

接口编辑页的请求参数Body

• form：type=2
• raw：type=4

apiEdit.html的代码修改

							<div class="reqpcom-interredit" id="reqpBody">
								<div class="radiobox-interedit">
									<input value="form" type="radio" :checked="jsonParam=='{}'" name="pt">form
									<input value="raw" type="radio" :checked="jsonParam!='{}'" name="pt" >raw
								</div>
								<div class="reqpline-interedit linebox-interedit">
									<a href="javascript:void(0);" class="btn-com" v-show="jsonParam=='{}'">添加form参数</a>

	<script type="text/javascript" src="/lemon/js/common.js"></script>
	<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: [],
				jsonParam:"{}"
			},
			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 {
								//当type=4时
								this.jsonParam = param.exampleData;
								var toAddHtml = "<div class='basicinfo-interpre reqparamsset-interedit'>"
 						+"<div class='reqplist-interedit'>"
						+"<textarea name='bodyRawParams[0].exampleData' id='' class='remark-interedit'>"+this.jsonParam+"</textarea>"
						+"<input name='bodyRawParams[0].type' value='4' type='hidden'/>"
						+"<input name='bodyRawParams[0].apiId' value='"+apiId+"' type='hidden'/>"
 						+"</div>"
					 +"</div>";
					 $("#reqpBody .basicinfo-interpre").remove();
					 $("#reqpBody .radiobox-interedit").append(toAddHtml);
							}
						}
					});

				}
			},
			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>

apiEdit.js的代码修改

获得a对象获得的文本，然后对这个文本进行indexOf处理。
str.indexOf()
意思是前面是母串，后面是子串，也就是子串在母串上的索引。就是在找子串在母串中出现的位置，而且是第一次出现的位置。因为字符串的索引是0开始的，如果>=0就说明有，如果小于0就是找不到这个子串。这里进行了3次判断，先找body，再找Query，最后找Header。
如下此处由body改成form：

因为如下代码只有form，没有body。

找到line-com这个div

a的兄弟节点$(this).siblings()

从sessionStorage获取apiId

子节点中去掉i的7个节点：var forms = $(this).children().not("i");
index就是val这个子节点的索引位置：$each(forms,function(index,val)

each的两种写法：

• siblings.each(function()
• $each(forms,function(index,val)

//删除当前行参数
$('.linebox-interedit').on('click','.line-interedit .icon-delete',function(){
	//将索引重排
	//得到兄弟节点，如果节点数为0退出否则遍历兄弟，重新替换所有input的name
	var siblings = $(this).parent().siblings("div");
	var appendIndex = siblings.length;
	$(this).parent().remove();
	if(appendIndex==0){
		return;
	}
	i=0;
	siblings.each(function(){
		var forms = $(this).children().not("i");
		i++;
		$each(forms,function(index,val){
			var str = val.name; //DOM对象    jQuery对象
			var str2 = str.substring(0,str.indexOf('[')+1).concat(i-1).concat(str.substring(str.indexOf(']')));
			val.name = str2;
		});
	});
});

接口编辑页的请求参数Body添加form参数的效果图