代码复查系统总结
2021/6/29 23:28:31
本文主要是介绍代码复查系统总结,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
代码复查系统总结
一.总体框架及操作流程简单介绍
- 主要页面:
- 主页面,main.html
- 问题详情页面,show_problem_table.html
- 问题编辑及新建问题页面,add_problem_table.html
- 页面逻辑
- 主页面下包含三个布局,上(标题显示),左(菜单栏),中(点击菜单对应的表单,默认显示问题管理表单)
- 点击问题表单中的标题,转至show_problem_table.html。点击新建复查问题和编辑,转至add_problem_table.html。
二.主要功能及实现
-
菜单切换
-
新建菜单,然后依次添加菜单条目,完成菜单栏的设计。
-
将各菜单条目的code值分别设为1,2,3,然后在页面对应的js文件中添加属性menucode,并设默认值为‘1’,同时添加菜单条目的点击方法如下,实现对menucode的赋值。
choosemenu:function(item,event){ var _this = this; _this.MenuCode=item.code; },
-
然后把菜单条目对应表格的v-show属性设为menucode==‘对应的code值’即可。
-
-
表格数据的加载(此处以问题表为例)
-
添加表格控件属性:pageable-data为probletbdata(js中定义),添加控件方法@load-data,loadProblemTbData如下,表格列对应prop属性设置与数据表中相一致。
ProblemTbData: [],
loadProblemTbData: function (queryInfo) { var _this = this; Artery.loadPageData('main/getProblemTbData', queryInfo).then(function (data) { _this.ProblemTbData = data; }).catch(function (error) { console.error(error); }); },
方法实现将从后端接口maian/getProblemTbData接收到的分页数据data存入ProblemTbData[]中。接口实现如下
@RequestMapping("/getProjectTbData") @ResponseBody @ExceptionTips("获取信息失败") @DataTranslate public Object getProjectTbData(IQueryInfo queryInfo) { return QueryManager.datas(queryInfo, ProjectTable.class, projectService::selectAll); //返回list分页对象 }
-
-
点击标题显示问题详情
-
标题添加下划线实现
标题栏下方添加模板,控件属性slot-scope为props,然后添加链接,设置连接控件属性:text为props.row.title,添加点击事件@click showproblemtable(prop.row.pk)此处参数设为pk(主键)
<aty-table-column label="标题" prop="title" filter-type="string"> <template slot-scope="props"> <u><aty-link :text="props.row.title" target="" @click="showproblemtable(props.row.pk)"></aty-link></u> </template> //<u></u>标签为设置下划线
showproblemtable:function (id) {//id为传入参数 新打开一个页面 Artery.open({ targetType:'_window', url:'main/showProblemTable/'+id, //页面地址,此处为后台接口 //title:'新建复查问题', height:500, width:600, closable:true, //右上角是否显示关闭 footerHide:true //底部是否显示按钮 }) }
后台接口如下
@GetMapping("/showProblemTable/{id}") public String showProblemTable(HttpServletRequest request,@PathVariable String id){ request.setAttribute("problemtable",problemService.selectByPrimaryKey(id)); return "show_problem_table"; } //此处request.setAttribute()方法实现向前端页面传递参数problemtable,值为数据库查询到的一条数据对象
-
-
问题详情页面设计
-
表单数据源:data 设为problemtable(js中定义,值为此前后台所传递的值),此处需要在html页面脚本中先声明,然后js中定义相关属性
<script th:inline="javascript"> var problemtable = Artery.resolveObj(/*[[${problemtable}]]*/) problemtable = problemtable ? problemtable:{} </script>
data: function() { return { problemtable:problemtable, } },
然后表单中各属性的值便可设置为problem.title(标题属性,其余属性类似),此处需注意,下拉框被禁用后,值无法显示,此时需要将下拉控件:data属性设为,然后控件属性auto-complete勾选即可。
-
-
新建及编辑页面设计(两个事件可共同调用一个页面,细微逻辑有区分)
-
新建,需从后台传递一个problemTable对象用于数据的保存提交,同时传递项目及人员信息(数据库中查到的用于下拉框的选择,此处后期可以通过code,codetype表设置)后台传值操作与上面类似。
-
表单提交操作
submit:function(event){//form_addproblem为此表单的ref属性值 this.$refs['form_addproblem'].submit('add_problem_table/addOrUpdate').then(function () { parent.vm.$refs['problem'].reloadData();//上一级页面表单数据重新加载,同样该表单ref属性为problem parent.Artery.close(); }).catch(function (error) { Artery.message.error("信息无效,请检查"); }); }, //补充:请求方法 Ajax请求: Post://有请求体 Aryery.ajax.post(url,{ param1:data1; param2:data2; }).then(fuction(result)){ }); Get://没有请求体,直接将参数与url拼接进行访问 Artery.ajax.get(url,{ params:{ param1:data1; param2:data2; } }).then(function(result){});
@RequestMapping("/addOrUpdate") @ResponseBody @ExceptionTips("添加或更新异常") public String addOrUpdate(@RequestBody ProblemTable problemTable){ if(StringUtils.isBlank(problemTable.getPk())){//判断对应值是否为空,true执行新增操作 problemTable.setPk(UUIDHelper.getUuid()); problemService.insert(problemTable); }else{ problemService.updateByPrimaryKey(problemTable);//false执行更新操作 } return "ok"; }
-
编辑页面添加了delete按钮,此处注意点击事件方法名若设为delete则会发生意想不到的事情(delete为vue中的关键字)
delete1:function() { var _this = this; this.$Modal.confirm({ title: '提示', content: '确认删除?',//点击删除后弹出提示框,二次确认 onOk: function () { _this.$refs['form_addproblem'].submit('add_problem_table/problemDelete').then(function () { parent.vm.$refs['problem'].reloadData(); //与提交一样,只是调用接口不同 parent.Artery.close() }); } }) },
@RequestMapping("/problemDelete") @ResponseBody @ExceptionTips("删除信息异常") public String problemDelete(@RequestBody ProblemTable problemTable){ problemService.deleteByPrimaryKey(problemTable.getPk()); return "ok"; }
-
-
表头筛选功能
- 表格列对应属性filter-type设置为string即可实现
- 如果要求设置筛选条件,及通过下拉框进行选择,此时需要设置相应的code,codetype表。
三.下拉框的设置与code,codeType表的使用 单值数据
- 数据库中新建两张表code,codetype
- 然后对应的filter-type属性设为code,code-type属性设为表中对应的110
- 对应的pojo类中属性前加上标注@CodeType("110")即可。
这篇关于代码复查系统总结的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-01后台管理开发学习:新手入门指南
- 2024-11-01后台管理系统开发学习:新手入门教程
- 2024-11-01后台开发学习:从入门到实践的简单教程
- 2024-11-01后台综合解决方案学习:从入门到初级实战教程
- 2024-11-01接口模块封装学习入门教程
- 2024-11-01请求动作封装学习:新手入门教程
- 2024-11-01登录鉴权入门:新手必读指南
- 2024-11-01动态面包屑入门:轻松掌握导航设计技巧
- 2024-11-01动态权限入门:新手必读指南
- 2024-11-01动态主题处理入门:新手必读指南