Vue.js로 웹페이지 리빌드하기 - (7) 알리미 추가 및 수정 화면 만들기

(구) 알리미 추가 및 수정 화면

이런 화면을 만들려고 합니다.

기존 프로젝트에서 윗부분은 form을 쓰고, 아랫부분은 table을 써서 만들었으므로, 

똑같은 방식으로 한번 만들어보고 적당히 수정하려고 합니다.

 

<form>
  <div class="form-group">
    <label class="col-md-3">계정명</label>
    <input id="twitterAccount" type="text" class="form-control" placeholder="@는 제외해주세요."/>
  </div>
  <div class="form-group">
    <label class="col-md-3">검색 기준 단어</label>
    <input id="keyword" type="text" class="form-control" placeholder="여러개일 경우 , 로 구분해주세요."/>
  </div>
</form>

기존 소스.

 

    <div class="q-pa-md">
        <q-form
          @reset="onReset">
            <q-input
                v-model="account"
                label="계정명"
                hint="@을 제외한 트위터 계정명"
                style="width:200px" />
            <q-input
                v-model="keyword"
                label="검색 기준 단어"
                hint="구분은 쉼표(,) 3개까지 허용"
                style="width:300px" />
            <div class="q-pt-md">
                <q-btn label="등록" type="submit" color="primary"></q-btn>
                <q-btn label="지우기" type="reset" color="primary" flat class="q-ml-sm"></q-btn>
            </div>
        </q-form>
    </div>

새로 만든 소스 

 

div의 q-pa-md 라는 클래스는 해당 div에서

• 어떤 부위 (padding또는 border, margin)
• 어느 방향 (all, top, bottom, left, right)
• 어느만큼 (xs, sm, md, lg ... )

공백을 주려고 하는지를 지정해 줄 수 있습니다.

 

q-form은 기존 form과 같이 action을 줄 수 있고, 

기존 프로젝트에서는 ajax로 api를 불러왔었기에, axios로 api를 부르거나

action으로도 메서드 부르는게 가능한 거 같아서, vue 파일의 script 부분에 api를 부르는 메서드를 부를까 생각중입니다.

기존엔 기록한 두 항목을 DB에 등록시키는 것에서 끝났으나,

이번엔 DB에 등록이 정상적으로 끝나면 vuex에 같은 내용을 등록시키는 과정까지 포함시켜서, 

아래에 나오는 table을 자동갱신 하는 부분까지 하려고 합니다.

vuex는 api와 연결시킬 때 같이 작업 예정.

현재는 @reset만 있으나, @submit도 같이 써주는게 깔끔하고 직관적일 거 같긴하네요. 

 

q-input 부분은 vue의 input답게, model을 정의해 줄 필요가 있었습니다.

<script>
export default {
  setup () {
    const account = ref(null)
    const keyword = ref(null)

    return {
      account,
      keyword,

      onReset () {
        account.value = null
        keyword.value = null
      }
    }
  }
}
</script>

그래서 모델 부분 정의. 

onReset 메서드도 만들었습니다. 이는 @reset에 쓰여진 메서드명에 해당하는 리셋 메서드입니다. 

 

    <div>
      <q-table
        title="등록 내용 확인"
        :rows="rows"
        :columns="columns"
        row-key="id"
        :selected-rows-label="getSelectedString"
        selection="multiple"
        v-model:selected="selected">
      </q-table>
      <q-btn class="q-mt-sm q-ml-sm" label="선택 삭제" type="submit" color="deep-orange" glossy></q-btn>
    </div>

다음은 q-table 부분. 

테이블은 특이하게, q-table 테이블 태그 하나에 모든걸 설정하고 끝내는 형태로 되어있습니다.

tr, td 설정도 전부 quasar에서 알아서 해주는 형태.

테이블 아래 버튼은 삭제할 항목을 골라서 삭제를 실행하기 위한 api 호출버튼입니다.

 

:row(데이터)와 :columns(칼럼명)을 설정함으로서, 이 항목에 지정한 데이터를

자동으로 테이블에 출력시켜주는 움직임을 하고 있습니다.

 

:selected-row-label, selection, v-model:selected는 체크박스 관련 옵션입니다.

selection 옵션으로 여러개 체크 혹은 단일 체크만 되는 체크박스를 만들 수 있고,

:selected-row-label은 몇개를 선택했는지 테이블 아래에 글로 표시가 되는데, 그 곳에 표시 되는 메세지를 만드는 메서드명를 담고 있습니다.

v-model:selected는 선택 된 행을 담을 모델입니다.

const columns = [
  {
    name: 'account',
    required: true,
    label: '계정명',
    align: 'left',
    field: row => row.account,
    format: val => `${val}`,
    sortable: true
  },
  { name: 'keyword',
    label: '검색 키워드',
    align: 'left',
    field: row => row.keyword,
    sortable: false }
]

// 더미 데이터
const rows = [
  {
    id: 1,
    account: 'LoveLive_Staff',
    keyword: '러브라이브'
  },
  {
    id: 2,
    account: 'SayuriDate',
    keyword: '다테사유리, 슈퍼스타'
  },
  {
    id: 3,
    account: 'Shuka_Saito',
    keyword: '사이토 슈카, 선샤인'
  },
  {
    id: 4,
    account: 'AoyamaNagisa',
    keyword: '나기사, 아오야마나기사, 슈퍼스타'
  },
  {
    id: 5,
    account: 'Rikako_Aida',
    keyword: '아이다상, 리캬코, 선샤인'
  },
]

export default {
  setup () {
    const selected = ref([])
    

    return {
      selected,
      columns,
      rows,
      
      getSelectedString () {
        return selected.value.length === 0 ? '' : `${selected.value.length} record${selected.value.length > 1 ? 's' : ''} selected of ${rows.length}`
      },
    }
  }
}

그래서 테이블쪽의 자바스크립트는 이런 형태입니다. 

지금은 테스트용으로 더미데이터를 넣었으나, 나중에는 api에서 습득해온 데이터를 삽입할 예정입니다.

칼럼은 지금 만들어둔 대로 손수 쓸 예정입니다. 딱히 DB에 저장해 둘 필요는 없기 때문에... 

 

만드는건 전부 퀘이사 공홈에서 보고 만들면서 나름대로 응용한 결과물입니다.

https://quasar.dev/vue-components/table#selection

Table | Quasar Framework

예시 소스도 있어서, 그걸 가져와서 해석하고 저에게 맞춰서 옵션을 조절했습니다.

 

 

 

그리고 이렇게 만들어진 페이지는 아래와 같습니다.

(신) 알리미 추가 및 수정 화면

약간 조잡해보이던 화면에서, 지금은 꽤나 깔끔하게 보이게 되었습니다.

반응형 대응도 완벽해서, 모바일에서의 활용도 충분히 가능하게 되었습니다.

이 기세로 여러 화면을 더 만들어보고자 합니다.

당장 다음 화면부터 props로 하위 컴포넌트에 데이터 전달 문제때문에 하루 이상 시간을 날려먹었지만,

어떻게 잘 되겠죠...