其他分享
首页 > 其他分享> > 【平台开发】— 10.条件模糊查询

【平台开发】— 10.条件模糊查询

作者:互联网

项目管理功能,目前还剩下条件查询还没实现。

经过这么多章,可以看出用得套路都是差不多的。就像条件查询这个功能,我需要在后端实现一个条件查询的接口,供前端调用。

前端需要在组件里实现对应的方法与后端进行交互,最后页面查询按钮上绑定对应的方法。

一、后端

由于JPA也是支持动态查询的,所以优先还是使用现成的。

1.dao层

在dao层里需要做个修改,让ProjectDAO再多继承一个类:JpaSpecificationExecutor

package com.mock.platform.dao;

import com.mock.platform.pojo.Project;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.JpaSpecificationExecutor;

public interface ProjectDAO extends JpaRepository, JpaSpecificationExecutor {

}

可以看一下JpaSpecificationExecutor类,提供了5个方法,不过每个方法都有一个Specification ,这里是关键哦。

2.service层

这里是修改的重点,谁叫它是干活的呢。

    public PagesearchProject(Project project, int number, int size) {
        Sort sort = Sort.by(Sort.Direction.DESC, "id");
        Pageable pageable = PageRequest.of(number - 1, size , sort);
        Specificationquery = new Specification() {
            @Override
            public Predicate toPredicate(Rootroot, CriteriaQuery criteriaQuery, CriteriaBuilder criteriaBuilder) {
                Listpredicates = new ArrayList<>();
                if (project.getId() != null) {
                    predicates.add(criteriaBuilder.equal(root.get("id"), project.getId()));
                }
                if (StringUtils.isNotEmpty(project.getProjectName())) {
                    predicates.add(criteriaBuilder.like(root.get("projectName"), "%" + project.getProjectName() + "%"));
                }
                return criteriaBuilder.and(predicates.toArray(new Predicate[0]));
            }
        };
        return projectDAO.findAll(query, pageable);
    }

这里就用了上述5个方法的第3个,因为查询后的结果也需要分页。

PagefindAll(@Nullable Specificationvar1, Pageable var2);

代码里实现的是可以通过项目名称或者项目id来查询,以项目名称为例:

predicates.add(criteriaBuilder.like(root.get("projectName"), "%" + project.getProjectName() + "%"));

当然这只是一个简单查询,and或者or 就不展开了,后面用到的时候再说。

3.controller

这里就很简单了,因为活儿都派给service了。

    @GetMapping("/searchProject")
    public Object searchProject(Project project, int number, int size) throws Exception {
        return Result.success(projectService.searchProject(project, number, size));
    }

测试通过。

二、前端

前端这次只需要改动project.vue就好了,增加对应的查询方法。

对了,在此之前,还要增加对应的api 。

//src/api/project.js

export function searchProject(projectName, number, size) {
    return request({
      url: '/my_platform/project/searchProject',
      method: 'get',
      params: {
        'projectName': projectName,
        'number': number,
        'size': size
      }
    })
}

vue组件里methods里增加对应的方法.
projectName 是空的时候,如果点击了查询按钮,就重新请求下列表页。
projectName 不为空,那就可以调用搜索项目的方法 searchProject()

      handleProjectSearch() { //条件查询
        if (this.listQueryInfo.projectName === undefined || this.listQueryInfo.projectName === '') {
          this.projectGet()
        } else {
          searchProject(this.listQueryInfo.projectName, this.pageInfo.number, this.pageInfo.size).then(response => {
            this.list = response.data.content
            this.pageInfo.size = response.data.size
            this.pageInfo.number = response.data.number + 1
            this.pageInfo.totalElements = response.data.totalElements
            this.pageInfo.totalPages = response.data.totalPages
            this.pageInfo.numberOfElements = response.data.numberOfElements
            this.listLoading = false
          })
        }
      }

页面元素部分,就是改动查询条件输入框和查询按钮部分。

    查询新建

@keyup.enter.native属性可以敲回车键查询 ,clearable则是增加一个清空输入的按钮。

全部弄完了,测试一下模糊查询。

通过。

后面的功能实现基本都是这样的套路了,应该不会像这样前后端铺开写了,有知识点或者思路想法之类的会记录。

标签:10,projectName,模糊,number,查询,project,data,size
来源: https://blog.51cto.com/u_13407532/2727573