조회 #

서버에 데이터를 조회하려면 http 유틸리티의 get, query, response 함수를 사용한다. get, query은 응답의 data를 직접 사용할 수 있고
response는 data외에 다른 정보가 필요하면 사용한다.

조회한 data는 wijmo의FlexGrid의 데이터셋을 관리하는 CollectionView에 넣는다.
CollectionView에 담는 방법은 그리드의 query 함수로 조회하거나, 그리드의 setData 함수로 담는다.

명명규칙 #

• 조회프로그램의 호출 url은 query 또는 get으로 시작한다.
• 조회결과가 여러건이면 query, 한건이면 get을 사용한다.
• FrontEnd와 BackEnd의 소스 추적을 용이하게 하기 위헤 ts의 함수명, url(RequestMapping), Controller의 method명은 가급적 동일하게 작성한다.

Java에서 리턴 타입. ResMap vs JavaBean #

Controller의 조회 메소드에서 리턴하는 타입은 ResMap을 사용한다. Service의 return type은 JavaBean 또는 CamelMap으로 한다.

• return type으로 ResMap 사용하는 것이 프로젝트에 세팅된 기본 규칙이므로 controller의 모든 메소드에 사용한다.
  ResMap은 HashMap을 상속해서 여러가지 값을 담을 수 있는데, 기본 데이터가 data 필드에 입력되고 http 함수(axios)에서는 이 data를 return 한다.

  ResMap의 put메소드는 ResMap을 return 하므로 chaining으로 담을 수 있다.

  // ResMap으로 생성된 json
  {
    "result": "ok",
    "data": service에서 return하는 결과데이터
    "other": 메인 결과외에 추가한 데이터
  }
  

  //vue에서 호출한 axios의 response 형태
  {
    data: {
      data: service에서 return하는 결과데이터
      other: 메인 결과외에 추가한 데이터
      result: "ok"
    },
    config: {},
    headers: {},
    request: {},
    status: 200,
    statusText: ""
  }
  

• 예외적인 경우 return type으로 JavaBean 또는 List<JavaBean> 사용 할 수 있으나 ResMap 사용을 추천함.
  client의 axios의 response 형태는 return type에 따름

  // Map or JavaBean : 
  {}
  // List : 
  [{}] 
  

조회결과의 키가 data 하나일때.(한번 조회로 그리드 하나 표시) #

@PostMapping("/query")
public ResMap query(@RequestBody FormGridParam param) {
  return new ResMap(service.query(param))
}

조회조건은 일반적인 object, ref, reactive 모두 가능.
post 함수의 결과는 구조분해로도 받을 수 있다.

const condData = reactive({
  param: 'value'
})

async function query() {
  const result = await http.post('/url/query', condData)
  flex.setData(resuilt.data)
  // 또는
  const { data } = await http.post('/url/query', condData)
  flex.setData(data)
}

그리드 단독조회일 경우 그리드의 query 함수는 http.post와 flex.setData를 한번에 실행해준다. flex.query후에 실행할 코드가 없으면 async를 붙이지 않아도 됨

const condData = reactive({})
function query() {
  flex.query('/url/query', condData)
}

한번 조회(저장)으로 결과가 여러개의 키를 가질때(한번 조회로 여러 그리드 표시) #

java에서는 ResMap에 담는다. 생성자의 값은 data 필드에 담긴다.

  @PostMapping("/query")
  public ResMap query(@RequestBody FormGridParam param) {
    /**
    * 조회결과가 여러개이면 ResMap을 chain 방식으로 여러번 put으로 담는다.
    */
    return new ResMap(service.query(param))        // json에서 "data"
      .put("fileList", service.queryUpload(param)) // json에서 "fileList"
      .put("other", "다른 데이터");                  // json에서 "other"
  }

vue에서는 대표변수로 받거나 구조분해로 할당 해서 사용한다. 파라미터 변수는 reactive를 사용한다. 조회결과가 수정여부의 추적이 필요하면 VmGrid를 사용하고, 단순히 조회결과가 필요한 것은 ref를 사용한다.

const condData = reactive({
  param: 'value'
})
const other = ref() // 데이터 추적(수정여부)이 필요없으면 ref 사용
async function query() {
  // 1. result 변수로 받음
  const result = await http.post('/url/query', condData)
  flex.setData(result.data) // 그리드 데이터
  flexFile.setData(result.fileList) // 그리드 첨부파일 데이터
  other.value = result.other // 그리드 아닌 데이터

  // 2. 구조분해 방식 
  const { data, fileList, other } = await http.post('/url/query', condData)
  flex.setData(data)
  flexFile.setData(fileList) // 그리드 첨부파일 데이터
  other.value = other
}

예외처리 #

async/await방식이므로 try catch를 사용한다. 서버에서 오류가 발생하면 http모듈에서 alert을 하므로 메시지외의 처리를 한다.

async function query() {
  try {
    const { data, other } = await http.post('/formGrid/query', condData)
    flex.setData(data)
    // vm.other = other
    console.log('http.post response data, other', data, other)
  } catch (e) {
    console.error(e)
  }
}