测试开发系列之——项目列表&新增项目&更新项目功能

测试平台

• 项目管理
• 接口管理
• 用例管理
• 接口执行
• 生成测试报告

前端展示项目列表功能

projectList.html前端代码修改：

用差值表达式({{info.length}})获取到项目数量。

用for循环获取项目列表：

项目列表就可以在前端渲染出来了。

新增项目功能

修改projectList.html代码：

dom元素需要先存在，如果dom元素不存在，在元素上面绑定事件，就失效了。现在dom元素给vue接管了，要vue执行之后，dom才出来。在出来的dom上面，在通过<script type="text/javascript" src="/lemon/js/projectList.js"></script> 来绑定事件，所以要把projectlist.js放到vue的后面，也可以把vue放到最上面。

修改代码后，点击“添加项目”，模态框就出来了。

project数据库结构

project数据库结构与添加项目前端页面的对应关系如下：
项目名称：name
主机地址：host
描述：description

后端新增项目方法

后端对com.one.controller中
ProjectController.java进行修改，加入新增项目方法。

	@PostMapping("/add")
	@ApiOperation(value="新增项目方法", httpMethod="POST")
	public Result add(Project project){
		Result result = null;
		User user = (User) SecurityUtils.getSubject().getPrincipal();
		project.setCreateUser(user.getId());
		projectService.save(project);
		result = new Result("1","项目添加成功");
		return result;
	}

前端新增项目代码

jQuery有一个form表单对象有一个serialize的方法data:$form.serialize(),，这个方法就是将form表单里面的表单元素写到name和value匹配的，全部用&符号键值对拼接到一起。例如，username=zs&password=123。
异步请求async为false，就说明变成了一个同步请求。

前端projectList.js的代码：

//添加项目的弹窗
	$('.btn-addinter2').click(function(){
		var dialog = jqueryAlert({
			'style'   : 'pc',
			'title'   : '添加项目',
			'content' :  $('#addForm2'), //$("#alert-blockquote")
			'modal'   : true,
			'contentTextAlign' : 'left',
			'width'   : '620px',
			'animateType' : 'linear',
			'buttons' :{
				'取消' : function(){
					dialog.close();
				},
				'提交':function(){
					var ifViladate = true;
					var $form = $('.pcAlert').last().find('#addForm2');
					ifViladate = $form.validate('submitValidate');
					if(!ifViladate)return;
					$.ajax({
						//lemon.config.global.adminUrl
						url:"http://admin.ck.org/lemon"+"/project/add",
						headers:{"Authorization":$.cookie("sessionId")},
						data:$form.serialize(),
						type:'post',
						dataType:'json',
						async:false,
						success:function(ret){
							if(ret.status=="1"){
								dialog.close();
								window.location.reload();
							}
						}
					});
				}
			}
		})
	});

其中：

• dialog.close();就是用来关闭添加项目的模态窗口。
• window.location.reload();用来重新刷新页面，重新发送异步请求，查询当前用户的项目列表。

输入项目名称、主机地址和描述，点击提交，添加项目成功。

添加项目成功，项目列表从原先的3个项目，变为当前的4个项目。

更新项目功能

前端需要在div绑定点击事件，需要把项目id带过去，同时由于用于拼接接口地址的话，host也是需要的。


添加设置页面的url链接：
点击index.html页面的设置，就可以进入到项目设置页面了。

项目设置页面如下图所示，实际此即为项目更新页面：

函数写在methods里面：

session存储了这3对key-value。

要更新，先查询，按主键id查询，在点击保存的时候是真正的更新项目。根据项目id查询到项目信息，渲染到当前项目设置页面。

加入注解@PathVariable，符合rest风格标准的。
rest风格：get:/user/1 /project/19，根据动作来区分。
传统的风格：?projectId=9，很容易暴露信息。

proejctController.java的代码修改-getById方法

新增getById方法

	@GetMapping("/{projectId}")
	@ApiOperation(value="项目列表方法", httpMethod="GET")
	public Result getById(@PathVariable("projectId") Integer projectId){
		Result result = null;
		Project project = projectService.getById(projectId);
		result = new Result("1",project,"项目列表");
		return result;
	}	

更新项目功能前端编码

找到页面的挂载点form_box，el后面更新为.form_box

项目名称为name，接口基本路径为host，属性绑定:value=""：

<input type="text" placeholder="项目名称" class="required" data-valid="isNonEmpty" data-error="内容不能为空" name="name" :value="info.name">
<input type="text" placeholder="..." class="required" data-valid="isNonEmpty" name="host" data-error="内容不能为空" :value="info.host">
<textarea type="text" class="path-addinter required" placeholder="描述" name="description" class="required" data-valid="isNonEmpty" data-error="内容不能为空">{{info.description}}</textarea>

引入common.js和jquery.cookie.js：

<script type="text/javascript" src="/lemon/js/common.js"></script>
<script type="text/javascript" src="/lemon/js/jquery.cookie.js" charset="UTF-8"></script>

项目信息就可以根据主键id查询到了

更新项目功能

找到保存按钮

proejctController.java的代码修改-updateById方法

新增updateById方法
用input hidden把值传过去
GraphQL和rest是类同的，但是有区别的，给的json值可以定制，可以去了解。

	@PutMapping("/{projectId}")
	@ApiOperation(value="更新项目方法", httpMethod="PUT")
	public Result updateById(@PathVariable("projectId") Integer projectId,Project project){
		Result result = null;
		project.setId(projectId);
		User user = (User) SecurityUtils.getSubject().getPrincipal();
		project.setCreateUser(user.getId());
		projectService.updateById(project);
		result = new Result("1",project,"更新项目");
		return result;
	}	

projectSet.html的代码修改

添加form标签

        //更新项目
        $('.btn_save').click(function(){
            let projectId = sessionStorage.getItem("projectId");
            //异步请求更新
            $.ajax({
            headers:{"Authorization":$.cookie("sessionId")},
            url: lemon.config.global.adminUrl + "/project/"+projectId,
            data:$("#myForm").serialize(),
            type:"put",
            success:function(ret){
                alert(ret.message);
                if(ret.status==1&&ret.message=="账号未登录"){
                    location.href = lemon.config.global.rootUrl + "/html/login.html";
                }
            }
        });
        });