1210 Javascript 퍼머링크, 차트

Rest API

localhost/country?currentPage=1

--> localhost/country/1

@RestController
public class CountryRest {
	@Autowired CountryService countryService;
	
	// localhost/country?currentPage=1
	@GetMapping("/country")
	public List<Map<String,Object>> country(@RequestParam Integer currentPage){
		List<Map<String,Object>> list = countryService.getCountryListByPage(currentPage);
		return list;
	}
	
	// localhost/country2/1
	@GetMapping("/country2/{currentPage}")
	public List<Map<String,Object>> country2(@PathVariable Integer currentPage){
		List<Map<String,Object>> list = countryService.getCountryListByPage(currentPage);
		return list;
	}
}

@ReauestParam  -> @PathVariable(잘 안 씀)

퍼머링크(permalink)

인터넷에서 특정 페이지에 영구적으로 할당된 URL 주소

퍼머링크를 사용하면 하나의 호출 URL이 고유성과 영구성을 가지며 호출 인터페이스도 간략해짐

 

 

자바스크립트 차트 라이브러리

Chart.js

https://www.chartjs.org/

Chart.js

<div>
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

예제

 

 

AJax API를 이용하여 JSON타입으로 모델 가져오기

@RestController
public class CategoryRest {
	@Autowired CategoryService categoryService;
	
	@GetMapping("/categoryCntList")
	public List<Map<String,Object>> categoryCntList(){
		return categoryService.getCategoryCnt();
	} // json 호출
}

<script>
    $.ajax({
        type: "get",
        url: "/categoryCntList"
    }).done(function(list) {
      console.log(list);
    });
</script>

console

--> 차트

<script>
    let x = []; // name
    let y = []; // cnt

    $.ajax({
        type: "get",
        url: "/categoryCntList"
    }).done(function(list) { // 요청 성공 하고 나서 코드 실행
      $(list).each(function(index,item){
          x.push(item.name);
          y.push(item.cnt);
      });

      const ctx = document.getElementById('myChart');

      new Chart(ctx, {
        type: 'bar',
        data: {
          labels: x,
          datasets: [{
            label: '# of Votes',
            data: y,
            borderWidth: 1
          }]
        },
        options: {
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
    });
</script>