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

测试平台

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

前端展示项目列表功能

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'   :