vue + jpa project (11) - 게시판 검색조건 프론트 처리

게시판 프론트 Vue 부분은 백엔드 보다는 덜? 어렵다. 

백엔드에서 거의다 처리를 해서 사실 프론트는 검색 조건 화면과 검색 파라미터만 잘 처리하면 그만이다.

 

1. 우선 프론트의 검색조건을 아래와 같이 추가한다.

 

      ... 생략
      <a href="javascript:;" v-if="paging.total_page_cnt > paging.end_page"
         @click="fnPage(`${paging.end_page+1}`)" class="next w3-button w3-border">&gt;</a>
      <a href="javascript:;" @click="fnPage(`${paging.total_page_cnt}`)" class="last w3-button w3-border">&gt;&gt;</a>
      </span>
    </div>
    <div>
      <select v-model="search_key">
        <option value="">- 선택 -</option>
        <option value="writer">작성자</option>
        <option value="title">제목</option>
        <option value="content">내용</option>
      </select>
      &nbsp;
      <input type="text" v-model="search_value" @keyup.enter="fnPage()">
      &nbsp;
      <button @click="fnPage()">검색</button>
    </div>

 

2. 위의 검색 조건에 대한 데이터 바인딩에 대한 변수를 추가한다.

    이를 통해서 화면이 이동할 때 마다 해당 파라미터를 계속 저장하여 가지고 다닌다. (page, size 변수와 마찬가지)

      .. 생략
      page: this.$route.query.page ? this.$route.query.page : 1,  // 기본페이지는 1페이지
      size: this.$route.query.size ? this.$route.query.size : 10, // 보여지는 리스트 사이즈 10개
      search_key: this.$route.query.search_key ? this.$route.query.search_key : '',
      search_value: this.$route.query.search_value ? this.$route.query.search_value : '',

 

3. 데이터 전송시 검색항목을 추가한다.

    수신되는 boardDto의 변수명으로 값을 전달한다. 

    this.requestBody = { // 데이터 전송
        searchKey: this.search_key,
        searchValue: this.search_value,
        /* -- 이 부분은 개별로 테스트 할때 사용
        searchCondition: 'regDateGE',
        boardNo: null,
        writer:  '작성',
        regDate: '2023-10-26',
        */
        page: this.page,
        size: this.size
    }

 

4. axios 호출 시의 uri를  수정한다.

    list_paging에서 list_paging_search로 바뀌었다.

      this.$axios.get(this.$serverUrl + "/board/list_paging_search", {
        params: this.requestBody,
        headers: {}
      }).then((res) => {

        this.list = res.data.data
        this.paging = res.data.pagination
      }) //.. 이하 생략

 

이제 모든 시스템을 기동시키고 화면 테스트를 해보자

아래와 같이 조회가 되고 검색 조건과 sort 등등이 잘 된다면 성공한 것이다.