一、检查项分页(查询)
1.1项目所有分页功能都是基于ajax的异步请求来完成的,请求参数和后台响应数据格式都使用json数据格式。
1.2用户在浏览器页面发送请求,请求参数包括页码、每页显示记录数、查询条件。
1.3请求参数的json格式为:{currentPage:1,pageSize:10,queryString:''itcast''}
1.4后台响应数据包括总记录数、当前页需要展示的数据集合。
1.5响应数据的json格式为:{total:1000,rows:[]}
2.1在checkitem.html页面加载完成后,会自动发起分页查询请求
定义相关模型数据---->定义分页方法findPage方法用于分页查询,为了能够在checkitem.html页面加载后直接可以展示分页数据,可以在VUE提供的钩子函数created中调用findPage方法----->在findPage()中完善方法
2.2完善findPage()
2.3除了在created钩子函数中调用findPage方法查询分页数据之外,当用户点击查询按钮或者点击分页条中的页码时也需要调用findPage方法重新发起查询请求。
为查询按钮绑定单击事件,调用findPage方法
为分页条组件绑定current-change事件,此事件是分页条组件自己定义的事件,当页码改变时触发,对应的处理函数为handleCurrentChange
定义该方法-------
3完成后台Controller等代码
操作该部分的时候遇到的问题有的很奇怪,在xml配置文件的注释部分我用了连字符“--”在启动服务时报了错;服务启动成功后,在localhost:82/pages/main.html下检查项数据只显示前十条,查询条件不能输入,下面的页码不显示,“<”,">"也无法点击
二、删除检查项
2.1需要为删除按钮绑定单击事件,并且将当前行数据作为参数传递给处理函数
slop-scope是elementUI自带的域卡槽,可以获取查询展示出的数据对象
2.2用户点击删除按钮会执行handleDelete方法,此处需要完善handleDelete方法,弹出确认提示信息。ElementUI提供了$confirm方法来实现确认提示信息弹框效果
2.3完善删除功能controller层等代码
三、编辑检查项
3.1用户点击编辑按钮时,需要弹出编辑窗口并且将当前记录的数据进行回显,用户修改完成后点击确定按钮将修改后的数据提交到后台进行数据库操作。
3.2需要为编辑按钮绑定单击事件,并且将当前行数据作为参数传递给处理函数
3.3在编辑按钮事件绑定之后,需要在此方法(事件)中发送请求给controller层,回调数据,显示当前数据信息到编辑弹窗以便之后进行修改操作
3.4修改当前数据信息,发送请求----在编辑窗口中修改完成后,点击确定按钮需要提交请求,所以需要为确定按钮绑定事件并提供处理函数handleEdit
3.5编写后台controller等代码