前后端分离实现条件查询结果

谁践踏了优雅 2022-05-25 00:50 166阅读 0赞

【前言】

前后端分离，前端是用的angular框架，后端用的是SSM框架加上一些工具类。

【过程】

这次要做的功能是根据时间和学生姓名的条件来查询数据库中的信息。这篇文章只是介绍有条件的查询，无参的查询就默认做好了的。

第一步，画界面。两个时间控件，一个input框。在这里我用的是PrimeNG的样式结合angular的特点

<div style="margin-left: 150px">
      <p-calendar [(ngModel)]="DateBegin" [showTime]="true" placeholder="开始时间"></p-calendar> //时间框采用的是双向绑定
    
      <p-calendar [(ngModel)]="DateEnd" [showTime]="true" placeholder="结束时间"></p-calendar>
    
      <input #input id="float-input" type="text" size="30" placeholder="姓名">
    
      <button pButton type="button" (click)="query(input.value)" label="查询"></button>
    </div>

第二步，分条件查询。

这里需要注意的是分条件，界面一加载的时候显示全部的信息，

ngOnInit() {
        const selecturl="http://localhost:8080/teTypingResult/queryResult/";
        const url = selectUrl + this.page + '/' + this.pageSize;
        this.getData(url);
    
      }

根据条件查询

query(input:string){
    
     const date1:string=....
     const date2:string=...
     
     let url = selectUrl;
        if (info == null || info.trim().length == 0 && date1 == null && date2 == null) {
          url = url + this.page + '/' + this.pageSize;
        }
        else if (info == null || info.length == 0 && date1 != null && date2 != null) {
          url = url + this.page + '/' + this.pageSize + '?dateBegin=' + date1 + '&dateEnd=' + date2;
        }
        else {
          url = url + this.page + '/' + this.pageSize + '?dateBegin=' + date1 + '&dateEnd=' + date2
            + '&strLike=' + info;
        }
    
        this.getData(url);
    }

getData(url:string){
    
     this.http.get(url).subscribe(
          res => {
          
            if (res.json().code == '0000' && res.json().data.list.length != 0) {
              obj.data = res.json().data.list;
              obj.total = res.json().data.total;
            } else {
              obj.data = [];
              obj.total = 0;
            }
    
          });
    }

这样前端就写完了，如果你只是想测试一下前端有没有问题，那么可以写假数据来测试一下，就写在getData方法里面。

后端用的是SSM框架，Spring+SpringMVC+MyBatis。

@ResponseBody
        @RequestMapping(value = {"/queryResult/{pageNum}/{pageSize}"}, method = RequestMethod.GET) //这是用来处理请求地址映射的注解
        public ItooResult queryResult(@RequestParam(required = false, defaultValue ="")String strLike,@RequestParam(required = false, defaultValue ="")String dateBegin, @RequestParam(required = false, defaultValue ="")String dateEnd, @PathVariable int pageNum, @PathVariable int pageSize) {
            PageInfo<TypingResultModel> pageInfo;
            try {
                pageInfo = typingResultFacade.queryResult( pageNum, pageSize, strLike,dateBegin,dateEnd);
                if (pageInfo != null) {
                    return ItooResult.build("0000", "查询用户打字成绩成功", pageInfo);
                }
            } catch (Exception e) {
                logger.error("查询用户打字成绩发生错误", e);
                return ItooResult.build("1111", "查询用户打字成绩失败");
            }
            return ItooResult.build("1111", "查询用户打字成绩失败");
        }
    }

这里我们需要注意的是这几个注解的作用。[点击打开链接][Link 1]

后面重要的就是mapper文件了。

<select id="queryResult" resultType="com.dmsdbj.itoo.typing.entity.ext.TypingResultModel">
    
        SELECT
        r.id,
        r.userId,
        r.userName,
        r.article_id AS articleId,
        a.`name` as articleName,
        r.rightRate,
        r.speed,
        r.time,
        r.create_time as addTime
        FROM
        te_typing_result r
       LEFT JOIN te_typing_article a ON r.article_id = a.id
    
        <where>
    
            <if test="dateBegin!=null and dateBegin!='' and dateEnd!=null and dateEnd!=''">
                and r.create_time between #{dateBegin} and #{dateEnd}
          
            <if test="strLike!=null and strLike!=''" >
                and (r.userId LIKE CONCAT(CONCAT('%', #{strLike}), '%')
                or r.userName LIKE CONCAT(CONCAT('%', #{strLike}), '%'))
            </if>
            and r.is_delete = 0
    
        </where>
             ORDER BY addTime Desc
        </select>

这里需要注意的是mybatis的常用标签。

【结果】页面一加载

![70][]

根据条件查询

![70 1][]

![70 2][]

【感受】

办法总比困难多。

[Link 1]: https://www.cnblogs.com/leskang/p/5445698.html
[70]: /images/20220525/543d8d409cba4e49a694832c3e45de74.png
[70 1]: /images/20220525/4e2957fe159f42aa8257b7f95247b048.png
[70 2]: /images/20220525/c97f858f11574c3392b039e92b30a303.png