【平臺開發】— 10.條件模糊查詢

阿新 • • 發佈：2020-07-30

專案管理功能，目前還剩下條件查詢還沒實現。

經過這麼多章，可以看出用得套路都是差不多的。就像條件查詢這個功能，我需要在後端實現一個條件查詢的介面，共前端呼叫。

前端需要在元件裡實現對應的方法與後端進行互動，最後頁面查詢按鈕上繫結對應的方法。

一、後端

由於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<Project, Integer>, JpaSpecificationExecutor {

}

可以看一下JpaSpecificationExecutor類，提供了5個方法，不過每個方法都有一個Specification<T> var1 ，這裡是關鍵哦。

2.service層

這裡是修改的重點，誰叫它是幹活的呢。

    public Page<Project> searchProject(Project project, int number, int size) {
        Sort sort = Sort.by(Sort.Direction.DESC, "id");
        Pageable pageable = PageRequest.of(number - 1, size , sort);
        Specification<Project> query = new Specification<Project>() {
            @Override
            public Predicate toPredicate(Root<Project> root, CriteriaQuery<?> criteriaQuery, CriteriaBuilder criteriaBuilder) {
                List<Predicate> predicates = 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個，因為查詢後的結果也需要分頁。

Page<T> findAll(@Nullable Specification<T> var1, Pageable var2);

程式碼裡實現的是可以通過專案名稱或者專案id來查詢，以專案名稱為例：

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

"projectName"

對應project 實體裡的projectName屬性。
root.get("projectName")獲取屬性對應的資料庫表字段。
project.getProjectName()獲取當前傳入的查詢條件值。
like就是模糊匹配了，配合%xxx%使用。
criteriaBuilder會構建出對應的sql語句。

當然這只是一個簡單查詢，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
          })
        }
      }

頁面元素部分，就是改動查詢條件輸入框和查詢按鈕部分。

    <div class="filter-container">
      <el-input placeholder="專案名稱" style="width: 200px;" class="filter-item" v-model="listQueryInfo.projectName"
                @keyup.enter.native="handleProjectSearch(listQueryInfo.projectName)" clearable/>
      <el-button class="filter-item"  type="primary" icon="el-icon-search" style="margin-left:10px;"
                 @click="handleProjectSearch(listQueryInfo.projectName)">
        查詢
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit"
                 @click="projectCreate(createInfo)">
        新建
      </el-button>
    </div>

@keyup.enter.native屬性可以敲回車鍵查詢，clearable則是增加一個清空輸入的按鈕。

全部弄完了，測試一下模糊查詢。

通過。

後面的功能實現基本都是這樣的套路了，如果不會像這樣前後端鋪開寫了，只會記錄一下後端實現的思路或者方法。