目录
测试平台
- 项目管理
- 接口管理
- 用例管理
- 接口执行
- 生成测试报告
前端展示项目列表功能
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";
}
}
});
});