검색 조건

검색은 파라미터는 q 라는 파라미터 명으로 전달 하며, 해당 파라미터의 내용은 검색 조건을 담고 있는 json(Url Encoded) 형태입니다.

다음은 get 방식으로 전달 되어진 q 파라미터 샘플입니다.

%7B%22memExt.gender%22%3A%20%22F%22%2C%22mem.email%22%3A%20%7B%22op%22%3A%20%22lf%22%2C%22val%22%3A%20null%7D%2C%22_d%22%3A%20%7B%22keyword%22%3A%20%7B%22type%22%3A%20%7B%22label%22%3A%20%22%EC%9D%B4%EB%A6%84%22%2C%22value%22%3A%20%22mem.name%22%7D%2C%22val%22%3A%20%22guava%22%7D%7D%7D

위 파라미터를 decode 해서 보면 다음과 같은 json 을 볼 수 있습니다.

{
  "memExt.gender": "F",
  "mem.email": {
    "op": "lf",
    "val": null
  },
  "_d": {
    "keyword": {
      "type": {
        "label": "이름",
        "value": "mem.name"
      },
      "val": "guava"
    }
  }
}

Spring Controller (또는 resource) 에서 다음과 같이 사용하여 java Map 형태로 받을 수 있습니다.

@GetMapping("/some")
public String some(@RequestParam(value = "q", defaultValue = "{}") Map<String, Object> q) {
    // do something   
}

비교 연산자

위 예에서 "memExt.gender": "F" 처럼 특별한 설정이 없으면 =(equal) 비교가 됩니다.

만약 = 가 아닌, like, <=, > 등 다른 비교 연산자 검색을 하고 싶다면
다음과 같이 “op”(operation) 키에 원하는 비교 연산자를 넣어야 합니다.

"mem.email": {
  "op": "lf",
  "val": 'gmail.com' 
},

위 조건은 SQL 상에서 다음과 같이 실행될 것입니다.

mem.mem_email LIKE '%gmail.com%'

현재 파라미터로 전달 가능한 비교 연산자는 다음과 같습니다.

JSP

jsp 에서 form 내의 검색 조건 값을 구조화해서 보내는 방법을 설명합니다.

다음과 같이 email 검색 조건이 있다고 가정합니다.

<input type="text" name="email" value="${param['email']}">

이 데이터를 구조화(json)해서 보내기 위해서는, 폼을 submit 하기 전에 form jquery selector 에 buildQ() 메소드를 실행해줍니다.

예를 들면 다음과 같습니다.

onSubmit: function (e) {
    if(e) {
        e.preventDefault();
    }

    page.ref.form.buildQ();
    page.ref.form.off('submit').submit();
}

이렇게 하면, 자동으로 q 라는 이름이 hidden input 엘리먼트가 form 내에 추가되며,
form 내의 입력폼의 값들을 json 으로 구조화 하여 q 엘리먼트의 값으로 넣게 됩니다.

즉, form.buildQ() 를 실행하면 다음과 다음과 같은 값으로 hidden 엘리먼트가 생성됩니다.

<input type="hidden" name="q" value="{name:'guava'}"> <!-- 실제는 url 인코딩되어 값이 들어값니다.-->

이렇게 해서, java 에서는 @RequestParam("q') Map q 처럼 해서 map 형태로 구조화 해서 받을 수 있습니다.

op (Operation) 을 사용하고 싶다면, name 속성값 뒤에 콜론(:)으로 op 값을 적어줍니다.

다음은 email 을 lf (like full) 로 검색하는 예입니다.

<input type="text" name="email:lf" value="${param['email:lf']}">

비교 연산자 외에, vue.js 에서 사용하던 dynamic 검색을 사용하려면 다음과 같이, name 속성값 뒤에 콜론(:)으로 d 값을 적어줍니다.

<input type="text" name="keyword:d" data-search-in="post.title,post.content" value="${param['keyword:d']}">

d 를 사용할때는 data-search-in 값이 필수 이며, 검색 대상이 되길 원하는 프로퍼티 (alias 포함) 를 콤마로 구분하여 적어줍니다.

Vue.js

검색 콤포넌트 사용

검색 콤포넌트를 사용시에는 nvFilter 객체를 넘겨줘서, 해당 콤포넌트가 nvFilter 로 부터 query 모델을 가져와서 직접 세팅해주게 됩니다.

<nv-search-text :nv-filter="nvFilter" :nv-field="{label:'가격',key:'prod.price'}" nv-oper="eq"/>

nv-oper 를 생략하면, 기본 값인 eq 검색을 하게 됩니다.

일반 콤포넌트 사용

일반 콤포넌트를 사용할때는 query 객체를 직접 전달 합니다.

<q-select
  v-model="query.q['couponType']"
  :options="couponOptions"
/>

일반 컴포넌트 사용시에는 operation 타입을 eq 로만 사용할 수 있으며, 이를 변경하려면, 서버 전송 전에 query 모델을 직접 조작하여야 합니다.

const searchTerm = query.q.couponType;
query.q.couponType = {};
query.q.couponType.val = searchTerm;
query.q.couponType.op = 'lf';