代码复查系统总结

2021/6/29 23:28:31

本文主要是介绍代码复查系统总结,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

代码复查系统总结

一.总体框架及操作流程简单介绍

  1. 主要页面:
    • 主页面,main.html
    • 问题详情页面,show_problem_table.html
    • 问题编辑及新建问题页面,add_problem_table.html
  2. 页面逻辑
    • 主页面下包含三个布局,上(标题显示),左(菜单栏),中(点击菜单对应的表单,默认显示问题管理表单)
    • 点击问题表单中的标题,转至show_problem_table.html。点击新建复查问题和编辑,转至add_problem_table.html。

二.主要功能及实现

  1. 菜单切换

    • 新建菜单,然后依次添加菜单条目,完成菜单栏的设计。

    • 将各菜单条目的code值分别设为1,2,3,然后在页面对应的js文件中添加属性menucode,并设默认值为‘1’,同时添加菜单条目的点击方法如下,实现对menucode的赋值。

      choosemenu:function(item,event){
          var _this = this;
          _this.MenuCode=item.code;
      },
      
    • 然后把菜单条目对应表格的v-show属性设为menucode==‘对应的code值’即可。

  2. 表格数据的加载(此处以问题表为例)

    • 添加表格控件属性: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分页对象
      }
      
  3. 点击标题显示问题详情

    • 标题添加下划线实现

      标题栏下方添加模板,控件属性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,值为数据库查询到的一条数据对象
      
  4. 问题详情页面设计

    • 表单数据源: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勾选即可。

  5. 新建及编辑页面设计(两个事件可共同调用一个页面,细微逻辑有区分)

    • 新建,需从后台传递一个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";
      }
      
  6. 表头筛选功能

    • 表格列对应属性filter-type设置为string即可实现
    • 如果要求设置筛选条件,及通过下拉框进行选择,此时需要设置相应的code,codetype表。

三.下拉框的设置与code,codeType表的使用 单值数据

  • 数据库中新建两张表code,codetype
  • 然后对应的filter-type属性设为code,code-type属性设为表中对应的110
  • 对应的pojo类中属性前加上标注@CodeType("110")即可。


这篇关于代码复查系统总结的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程