필요 준비물
1. 간단한 수입에 대한 table(더미데이터 필요)
create table income(
dd int,
income int
);
insert into income values(1,45000);
insert into income values(2,60000);
insert into income values(3,25000);
insert into income values(4,70000);
insert into income values(5,35000);
insert into income values(6,1000);2. IncomeVO(데이터 모델 필요)
3. IncomeMapper
4. IncomeService, IncomeServiceImpl
5. IncomeController, dateIncome.jsp
본문
IncomeVO를 생성한다.
package com.jeongchan.domain;
import lombok.Data;
@Data
public class IncomeVO {
private int dd;
private int income;
}IncomeController를 작성한다.
Get방식으로 뷰를 보여주는 메서드와 getJson으로 넘어올때 처리해주는 메소드를 생성한다.
package com.jeongchan.controller;
import java.util.List;
import java.util.Locale;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.google.gson.Gson;
import com.jeongchan.domain.IncomeVO;
import com.jeongchan.service.IncomeService;
import lombok.Setter;
@Controller
public class IncomeController {
@Setter(onMethod_ = @Autowired)
private IncomeService incomeService;
@RequestMapping(value = "dateIncome", method = RequestMethod.GET)
public void dateIncome(Locale locale, Model model) {
}
@RequestMapping(value = "incomeList", method = RequestMethod.GET, produces = "text/plain;charset=UTF-8")
public @ResponseBody String incomeList(Locale locale, Model model) {
Gson gson = new Gson();
List<IncomeVO> list = incomeService.getIncome();
return gson.toJson(list);
}
}디비 관련하여 작성을 한다.
우선 IncomeMapper 인터페이스를 작성한다.[마이바티스]
package com.jeongchan.mapper;
import java.util.List;
import com.jeongchan.domain.IncomeVO;
public interface IncomeMapper {
public List<IncomeVO> getIncome();
}그 후 DB와 연동을 위한 IncomeMapper.xml을 작성한다. [id=getIncome]
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.jeongchan.mapper.IncomeMapper">
<select id="getIncome" resultType="com.jeongchan.domain.IncomeVO">
select * from income
</select>
</mapper>본격적으로 이를 사용하기 위한 서비스와 서비스 구현부를 작성한다.[IncomeService, IncomeServiceImpl]
package com.jeongchan.service;
import java.util.List;
import com.jeongchan.domain.IncomeVO;
public interface IncomeService {
List<IncomeVO> getIncome();
}package com.jeongchan.service;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.jeongchan.domain.IncomeVO;
import com.jeongchan.mapper.IncomeMapper;
import lombok.Setter;
@Service
public class IncomeServiceImpl implements IncomeService {
@Setter(onMethod_=@Autowired)
private IncomeMapper incomeMapper;
@Override
public List<IncomeVO> getIncome() {
// TODO Auto-generated method stub
return incomeMapper.getIncome();
}
}뷰를 보여줄 jsp 파일을 작성한다.
getJson으로 값을 넘기고 char를 작성한다.[chart.js가 필요]
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head>
<title>일별 매출현황</title>
</head>
<body>
<div style="width: 60%">
<div>
<canvas id="canvas" height="450" width="600"></canvas>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
<script>
var chartLabels = [];
var chartData = [];
$.getJSON("http://localhost:8080/incomeList", function(data) {
$.each(data, function(inx, obj) {
chartLabels.push(obj.dd);
chartData.push(obj.income);
});
createChart();
console.log("create Chart")
});
var lineChartData = {
labels : chartLabels,
datasets : [
{
label : "Date Income",
fillColor : "rbga(151,187,205,0.2)",
strokeColor : "rbga(151,187,205,1)",
pointColor : "rbga(151,187,205,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rbga(151,187,205,1)",
data : chartData
}
]
}
function createChart() {
var ctx = document.getElementById("canvas").getContext("2d");
LineChartDemo = Chart.Line(ctx, {
data : lineChartData,
options : {
scales : {
yAxes : [ {
ticks : {
beginAtZero : true
}
} ]
}
}
})
}
</script>
</body>
</html>
'웹 > Spring' 카테고리의 다른 글
| Spring 이론(응용) - 검색 처리 (0) | 2019.08.19 |
|---|---|
| Spring 이론(응용) - ORACLE 페이징처리 (0) | 2019.08.17 |
| Spring 이론(응용) - ORACLE 페이징처리 (0) | 2019.08.10 |
| Spring 이론(재) - 스프링 기본 구성 (0) | 2019.07.22 |
| Spring 이론(재) - AOP (0) | 2019.07.21 |
