본문 바로가기
IT/Web

Vue.js + ajax + Spring Boot

by 최고영회 2018. 9. 20.
728x90
반응형
SMALL

spring boot + spring security + mybatis + vue 로 
로그인과 허접해 보이지 않는 화면을 만들(포팅)었으니 이제 실제 데이터를 가지고 와서 뿌려주는 작업을 해 보자. 

Vue.js - Ajax 에서 이미 데이터 가지고 오는 것은 해 보았으니 프로젝트에 반영만 하면 된다.

User.vue 에 사용자 목록을 불러와 그려보자. 
우선 Grid.vue 를 하나 만든다. 
데이터를 가져와 grid 를 만들고 sorting 과 filtering 기능을 제공하는 간단한 grid 이다. 
예전에 만들었던 10만건 이상 처리 가능한 grid 는 나중에 포팅해 보도록 하고.... 일단은 simple 한 data grid 를 만들어 본다. 

<template>

  <div id="yhkimgrid">

    <table>

    <thead>

      <tr>

        <th v-for="key in columns" @click="sortBy(key)" :class="{ active: sortKey == key }">

          {{ key | capitalize }}

          <span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">

          </span>

        </th>

      </tr>

    </thead>

    <tbody>

      <tr v-for="entry in filteredData">

        <td v-for="key in columns">

          {{entry[key]}}

        </td>

      </tr>

    </tbody>

  </table>

  </div>

</template>


<script>

export default {

  name: 'Grid',

  props: {

    data: Array,

    columns: Array,

    filterKey: String

  },

  data () {

    const sortOrders = {}

    this.columns.forEach(key => {

      sortOrders[key] = 1

    })

    return {

      sortKey:'',

      sortOrders: sortOrders

    }

  },

  computed: {

    filteredData() {

      const sortKey = this.sortKey

      const filterKey = this.filterKey && this.filterKey.toLowerCase()

      const order = this.sortOrders[sortKey] || 1

      let data = this.data

      if (filterKey) {

        data = data.filter( row => {

          return Object.keys(row).some( key => {

            return String(row[key]).toLowerCase().indexOf(filterKey) > -1

          })

        })

      }

      if (sortKey) {

        data = data.slice().sort( (a, b) => {

          a = a[sortKey]

          b = b[sortKey]

          return (a === b ? 0 : a > b ? 1 : -1) * order

        })

      }

      return data

    }

  },

  filters: {

    capitalize: function (str) {

      return str.charAt(0).toUpperCase() + str.slice(1)

    }

  },

  methods:{

    sortBy: function (key) {

      this.sortKey = key

      this.sortOrders[key] = this.sortOrders[key] * -1

    }

  }

}

</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped="">

#yhkimgrid {padding-top:10px}

table {

  border: 2px solid #42b983;

  border-radius: 3px;

  background-color: #fff;

}


th {

  background-color: #42b983;

  color: rgba(255,255,255,0.66);

  cursor: pointer;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

}


td {

  background-color: #f9f9f9;

}


th, td {

  min-width: 120px;

  padding: 10px 20px;

}


th.active {

  color: #fff;

}


th.active .arrow {

  opacity: 1;

}


.arrow {

  display: inline-block;

  vertical-align: middle;

  width: 0;

  height: 0;

  margin-left: 5px;

  opacity: 0.66;

}


.arrow.asc {

  border-left: 4px solid transparent;

  border-right: 4px solid transparent;

  border-bottom: 4px solid #fff;

}


.arrow.dsc {

  border-left: 4px solid transparent;

  border-right: 4px solid transparent;

  border-top: 4px solid #fff;

}

</style>


User.vue 에서는 위에서 만든 grid component 를 이용해 목록을 뿌리고 filter 할 수 있도록 input 하나 만들고 ajax 로 데이터를 불러오면 된다. 

<div id="User">

    <form id="search">

      Search <input id="queryinput" name="query" v-model="searchQuery">

    </form>

    <yhgrid :data="gridData" :columns="gridColumns" :filter-key="searchQuery"></yhgrid>

  </div>

</template>


<script>

import axios from 'axios'

import yhgrid from '@/components/Grid'

export default {

  name: 'User',

  components: {

    pnpgrid

  },

  data () {

    return {

      searchQuery: '',

      gridColumns: ['idx', 'name', 'id', 'email', 'cellphone'],

      gridData:[]

    }

  },

  created(){

    this.load()

  },

  methods:{

    load(){

      axios.get('http://testip/firstproject/api/userlist')

      .then(res => {

        this.gridData = res.data;

      }).catch(e => {

        console.error(e)

      })

    }

  }

}

</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped="">

#queryinput {width:310px; margin-left: 10px}

</style>




Spring Boot 에서는 예전에 만들어 놓은 APIController 에서 member list 를 불러와 return 하면 끝.
@RestController
public class APIController {
	
	@Autowired
	MemberService service;

	@RequestMapping(value="/api/userlist", method=RequestMethod.GET)
	public List getUserList() {
		return service.getMemberList();
	}
}

결과는 굳!








728x90
반응형
LIST