King's Road

나는 서버에서 특정 api에 요청을 하여 받아온 api 결과 값들을 서버에 존재하는 queue에 관리하도록 하고

view 단에서는 서버에 존재하는 queue의 데이터를 받아와 그래프로 그려주는 형식으로 만들었다.

<script> 영역

line_net();

function line_net() {
getNetChartData().then(result => {
let data_Net = getDrawNetChartData(result);
let dataXColum = [];
let dataInputNet = [];
let dataOutputNet = [];

data_Net.forEach((dataItem) => {
dataXColum.push(dataItem[0]);
dataInputNet.push(dataItem[1]);
dataOutputNet.push(dataItem[2]);
});
var chart = bb.generate({
   data: {
 x : "Time",
     columns: [
      dataXColum,
      dataInputNet,
      dataOutputNet
    ]
  }, 
  point: {
    show: false
  },
  axis: {
x : {
type: "timeseries",
localtime: false,
tick : {
format : "%H:%M",
count : 5,
},
} 
  },
  size: {
    height: 150,
    width: 450
  },
  legend: {
    show: false
  },
  bindto: "#lineChart"
}); // chart가 끝나는 부분

function netInit() {
 netInterval = window.setInterval(function () { draw();
},30000);
};
function draw() {
getNetChartData().then(result => {
let data_Net = getDrawNetChartData(result);
let dataXColum = [];
let dataInputNet = [];
let dataOutputNet = [];

data_Net.forEach((dataItem) => {
dataXColum.push(dataItem[0]);
dataInputNet.push(dataItem[1]);
dataOutputNet.push(dataItem[2]);
});

chart.load({
 columns: [
      dataXColum,
      dataInputNet,
      dataOutputNet
     ]
});
});
clearInterval(netInterval);
netInit();
};
netInit();
});
}
function getNetChartData(){
return new Promise((resolve, reject) => {
$.ajax({
type: "GET",
url: "/chart/networkInOut",
success: function (result) {
resolve(result);

}
});
});
}
function getDrawNetChartData(apiResultData){
let NetCharData = [
['Time', 'InputNet','outputNet']
];
apiResultData.forEach((chartItem) => {
let date =  chartItem.currentTime;
let NetIn =  (chartItem.networkInValue)/1000;
let NetOut = (chartItem.networkOutValue)/1000;
if(date != 0 && NetIn != 0 && NetOut != 0){
NetCharData.push([date, NetIn, NetOut]);
} else if(date !=0 && NetIn !=0){
NetOut=0;
NetCharData.push([date, NetIn, NetOut]);
} else if(date !=0 && NetOut !=0){
NetIn=0;
NetCharData.push([date, NetIn, NetOut]);
} else if(date !=0){
NetIn=0;
NetOut=0;
NetCharData.push([date, NetIn, NetOut]);
}
});
return NetCharData;
};

서버는 이거랑 같이 정리 좀 하고 올려야겠군

/* 도넛 차트 */

//도넛 차트를 실시간으로 갱신하기 위한 interval 메서드

function donutIntervalFun() {
donutInterval = window.setInterval('donut_update ()', 30000);
}

let donut_update = function() {

document.getElementById("DiskUsage").innerHTML ="<div id='disk_usage' style='position:relative; width:130%; height: 130%;'></div>"

disk_usage(30); //실제로 도넛 차트 메서드를 호출하는 부분

}

let donut_chart = null;
function donut_usage(remainDisk) {
donut_chart = bb.generate({
  data: {
        colors: {
                "Disk Usage" : "#2E9AFE",
                'Remaining charge' : "#E6E6E6"
                 },
    columns: [
                  ["Disk Usage",(100-Number(remainDisk))],
                  ['Remaining charge', Number(remainDisk)]
                ],
    type: "donut"
  },
  size: {
    height: 150,
    width: 150
  },
  donut: {
    label: {
     show : false
     }
  },
  legend: {
    show: false
  },
  bindto: "#disk_usage"
});
donut_chart.flush(true);
}

function convertSize(fileSize, fixed) { //fileSize : 변환할 초기의 파일크기, fixed : 파일을 몇 번째 소수점 자리까지 출력할건지 판단

//용량 사이즈.
let sizeName = ['BYTE','KB', 'MB', 'GB', 'TB', 'PB' , 'EB'];
// 들어온 바이트 단위 자리수를 구한 후 최대 용량 사이즈를 구한다.
let sizeOffset = Math.round((fileSize.toString().length / 4));
//reduce를 하기 위해 원 바이트(숫자)를 배열 앞에 둔다.
let sizeReduceArray = [fileSize]
for(var loopCountNum = 0; loopCountNum < sizeOffset; loopCountNum++){
// 단위만큼 용량 나눌 값 (1024)를 넣어준다.
 sizeReduceArray.push(1024);
}
// reduce를 실행
const size = sizeReduceArray.reduce((acc, cur) => acc / cur).toFixed(fixed);
return size+sizeName[sizeOffset];
}

Bootstrap에서 제공하는 Modal을 생성하여 사용시 Modal 창을 열고 Close나 Open 했을 시에 element가 계속 생성되는

문제가 존재 했다. 그래서 기존 Modal을 show와 hide로 컨트롤하기로 결정했다.

BIsCreatedLoadModal은 기존에 생성되어 있는 loadModal이 존재하는지를 확인하는 존재확인용 변수이다.

loadModal이 기존에 생성되어 있는지 여부를 if문에서 필터링한다. 그 후 생성되어 있다면 부트스트랩에서 제공하는 메서드인 $(loadModal).modal()을 사용하여 생성되어있는 Modal을 오픈한다. 만약 그렇지 않다면 새로 모달을 생성하는

간단한 루틴의 Modal 호출 방식이다.

위의 배열로 만들어진 객체를 json화 시키기 위한 코드로 코드를 적용한다면

이렇게 json화 된다. return은 단순히 json화 된 결과값 뿐만아니라 index를 통하여 데이터의 길이를 확인하기 위함이니 단순히 result로 retrun 시켜줘도 상관없다.

<script>

$(document).ready(function() {

var aWord = $('#aWord');

var sDay = $('#sdt');

var eDay = $('#edt');

var partner = $('#wNum');

var theme = $('#theme');

var hits = $('#b-hits');

var recoNum = $('#b-reco');

$.ajax({

url : serverRoot + "/json/accompanyregi/list",

dataType : "json", // 데이터타입을 json 으로 받아옴

success : function(data) {

console.log(data)

//$(aWord).append(data[10].pDesc);

//$(sDay).val("(" + data./*디비 프로퍼티명 뭐로하냐*/ + ")");

$(sDay).append(data[10].sDate);

$(eDay).append(data[10].eDate);

$(partner).append(data[10].mWithNum);

$(theme).append(data[10].mTem);

//$(hits).append(data[10]./*디비 프로퍼티명 뭐로하냐*/);

//$(recoNum).append(data[10]./*디비 프로퍼티명 뭐로하냐*/);

//$(gen).val((data[10].gen == 0 ? "여" : "남"));

},

error : function(e) {

alert("값을 불러올 수 없습니다. 다시 확인해 주세요");

}

});

});

</script>

var로 객체를 생성한후 출력학 위치의 아이디값과 객체화 되어 있는 프로퍼티를 불러와서  매칭?시켜서 값을 넣어준다.

<script type="text/javascript">

      $('#regi')

            .click(

                  function() {

                     var param = {

                        mTitle : $('#mTitle').val(),

                        pDesc : $('#pDesc').val(),

                        sDate : $('#sDate').val(),

                        eDate : $('#eDate').val(),

                        mTem : $('#mTem').val(),

                        mWithNum : $('#mWithNum').val()

                     };

                     $

                           .ajax({

                              type : "POST",

                              url : "http://localhost:8888/????/????/accompanyregi/add",

                              data : param,

                              success : function(data) {

                                 alert("다음 창으로 이동합니다.");

                                 location.href="sub04_travelmate_accompanyRegi.html";

                              },

                              error : function(data) {

                                 alert("빈 칸을 채워주세요.");

                              }

                           });

                  });

   </script> 

<script type="text/javascript">

      $('#아이디').click(function() {

      location.href="이동할 페이지 경로.html";

                  });

   </script>

package pms.web.json;

import org.springframework.http.HttpStatus;

import org.springframework.web.bind.annotation.MatrixVariable;

import org.springframework.web.bind.annotation.PathVariable;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestParam;

import org.springframework.web.bind.annotation.ResponseStatus;

import org.springframework.web.bind.annotation.RestController;

import pms.domain.Tour;

import pms.service.TourService;

@RestController

@RequestMapping("/tour")

public class TourController {

    TourService tourService;

    public TourController(TourService tourService) {

        this.tourService = tourService;

    }

    @RequestMapping("add")

    @ResponseStatus(HttpStatus.CREATED)

    public void add(Tour tour) throws Exception {

        tourService.add(tour);

    }

    @RequestMapping("delete")

    //@ResponseStatus(HttpStatus.OK) // 응답 상태 코드 값의 기본은 "200(OK)" 이다.

    public void delete(@RequestParam("lno") int no)/*@Request저장소로 부터 값을 꺼내서 값을 전달해 준다. 만약 @RequestParam("no") int no처럼 파라미터 명과 매개 변수명이 같으면 @RequestParam을 생략할 수 있다.*/ throws Exception {

        tourService.delete(no);

    }

    @RequestMapping("list{page}")

    public Object list(

            @MatrixVariable(defaultValue="1") int pageNo,

            @MatrixVariable(defaultValue="3") int pageSize) {        

        return tourService.list(pageNo, pageSize);

    }

    @RequestMapping("update")

    @ResponseStatus(HttpStatus.OK) // 기본 값이 OK 이다. 

    public void update(Tour tour) throws Exception {

        tourService.update(tour);

    }

    /tour/1

    @RequestMapping("{no}")

    public Tour view(@PathVariable int no) throws Exception {

        return tourService.get(no); //DAO에서 selectOne으로 선언해놨기 때문에 get은 selectOne으로 동작한다

    }

}

JSON 데이터를 출력하는 페이지 컨트롤러 생성

기본적으로 컨트롤러는 사용자의 요청을 받아 서비스를 호출하는 역할로 쓰인다. 

RestController는 텍스트 데이터를 반환한다. 

// 서비스 컴포넌트 - 게시물 관련 업무를 처리할 객체

package bitcamp.java106.pms.service;

import java.util.List;

import pms.domain.Tour;

public interface TourService {

    // 서비스 컴포넌트에서 메서드명을 지을 때는 

    // 업무 용어를 사용하라!

    List<Tour> list(int pageNo, int pageSize);

    Tour get(int no);

    int add(Tour tour);

    int update(Tour tour);

    int delete(int no);

}

컨트롤러에서 사용할 메소드들에 대한 정보를 인터페이스 규칙으로 정의해 놓고

이 서비스를 구현하는 구현체들은 이 서비스에서 지정해둔 모든 메소드를 구현해야한다.

impl에서는 서비스 인터페이스에 지정했던 모든 제약사항들을 구현해야한다.

// 업무로직 구현체 - 고객사 마다 다른 구현을 할 수 있다.

package pms.service.impl;

import java.util.HashMap;

import java.util.List;

import org.springframework.stereotype.Service;

import pms.dao.TourDao;

import pms.domain.Tour;

import pms.service.TourService;

@Service

public class TourServiceImpl implements TourService {

    TourDao tourDao;

    public TourServiceImpl(TourDao tourDao) {

        this.tourDao = tourDao; 

    }

    // 서비스에서 사용할 DAO 객체를 먼저 준비한다.

    @Override

    public List<Tour> list(int pageNo, int pageSize) {

        HashMap<String,Object> params = new HashMap<>();

        params.put("startRowNo", (pageNo - 1) * pageSize);

        params.put("pageSize", pageSize);

        return tourDao.selectList(params);

    }

//페이징 처리 메소드    

    @Override

    public Tour get(int no) {

        return tourDao.selectOne(no);

    }

    @Override

    public int add(Tour tour) {

        return tourDao.insert(tour);

    }

    @Override

    public int update(Tour tour) {

        return tourDao.update(tour);

    }

    @Override

    public int delete(int no) {

        return tourDao.delete(no);

    }

}