이름짓기 방법
Service나 dao에서 이름을 지을 경우
1.인터페이스를 구별
Interface: I서비스명 ex) ITestSerivce
Class : 서비스명 ex) TestService
2.클래스를 구별
Interface : 서비스명 ex) TestService
Class : 서비스명Impl ex) TestServiceImpl
ITestSerive 참고, test3 참고
스프링에서는 인터페이스는 클래스 이름표 처럼 사용한다
※ DB에서 별칭을 사용하는 것 처럼 사용한다.
ajax실습문제
내 실습코드
{
"list" :[
{
"thname1": "OrderDate",
"thname2": "Region",
"thname3": "Rep",
"thname4": "Item",
"thname5": "Units",
"thname6": "UnitCos",
"thname7": "Total"
},
{
"OrderDate": "2021-01-06",
"Region": "East",
"Rep": "Jones",
"Item": "Pencil",
"Units": "95",
"UnitCos": "1.99",
"Total": "189.05"
},
{
"OrderDate": "2021-01-23",
"Region": "Central",
"Rep": "Kivell",
"Item": "Binder",
"Units": "50",
"UnitCos": "19.99",
"Total": "999.5"
},
{
"OrderDate": "2021-02-09",
"Region": "Central",
"Rep": "Jardine",
"Item": "Pencil",
"Units": "36",
"UnitCos": "4.99",
"Total": "179.65"
},
{
"OrderDate": "2021-02-26",
"Region": "Central",
"Rep": "Gill",
"Item": "Pen",
"Units": "27",
"UnitCos": "19.99",
"Total": "539.73"
},
{
"OrderDate": "2021-03-15",
"Region": "West",
"Rep": "Sorvino",
"Item": "Pencil",
"Units": "56",
"UnitCos": "2.99",
"Total": "167.44"
},
{
"OrderDate": "2021-04-01",
"Region": "East",
"Rep": "Jones",
"Item": "Binder",
"Units": "60",
"UnitCos": "4.99",
"Total": "299.4"
},
{
"OrderDate": "2021-04-18",
"Region": "Central",
"Rep": "Andrews",
"Item": "Pencil",
"Units": "75",
"UnitCos": "1.99",
"Total": "149.25"
},
{
"OrderDate": "2021-05-05",
"Region": "Central",
"Rep": "Jardine",
"Item": "Pencil",
"Units": "90",
"UnitCos": "4.99",
"Total": "449.1"
},
{
"OrderDate": "2021-05-22",
"Region": "West",
"Rep": "Thompson",
"Item": "Pencil",
"Units": "32",
"UnitCos": "1.99",
"Total": "63.68"
},
{
"OrderDate": "2021-06-08",
"Region": "East",
"Rep": "Jones",
"Item": "Binder",
"Units": "60",
"UnitCos": "8.99",
"Total": "539.4"
},
{
"OrderDate": "2021-06-25",
"Region": "Central",
"Rep": "Morgan",
"Item": "Pencil",
"Units": "90",
"UnitCos": "4.99",
"Total": "449.1"
}
]
}
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>심플데이터 실습</title>
<style type="text/css">
table{
text-align: center;
}
table th {
background-color: aqua;
}
</style>
<script type="text/javascript"
src="resources/jquery/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url: "resources/json/simpleData.json",
type: "get",
dataType: "json",
success: function(data){
console.log(data);
var html="";
html += "<tr>";
html += "<th>" + data.list[0].thname1+"</th>";
html += "<th>" + data.list[0].thname2+"</th>";
html += "<th>" + data.list[0].thname3+"</th>";
html += "<th>" + data.list[0].thname4+"</th>";
html += "<th>" + data.list[0].thname5+"</th>";
html += "<th>" + data.list[0].thname6+"</th>";
html += "<th>" + data.list[0].thname7+"</th>";
html += "</tr>";
$("#orderTable thead").html(html);
var html="";
for(var i = 1 ; i < data.list.length; i++){
html += "<tr>";
html += "<td>" + data.list[i].OrderDate+ "</td>";
html += "<td>" + data.list[i].Region+"</td>";
html += "<td>" + data.list[i].Rep+"</td>";
html += "<td>" + data.list[i].Item+"</td>";
html += "<td>" + data.list[i].Units+"</td>";
html += "<td>" + data.list[i].UnitCos+"</td>";
html += "<td>" + data.list[i].Total+"</td>";
html += "</tr>";
}
$("#orderTable tbody").html(html);
},
error: function(request, status, error){
console.log(request);
console.log(status);
console.log(error);
}
}); //ajax end
}); //ready end
</script>
</head>
<body>
<table id="orderTable" border="1">
<thead></thead>
<tbody> </tbody>
</table>
</body>
</html>
샘코드
{
"orderCol":["OrderDate", "Region", "Rep",
"Item", "Units", "UnitCos", "Total"],
"order":[{
"OrderDate":"2020-01-06",
"Region":"East",
"Rep":"Jones",
"Item":"Pencil",
"Units":"95",
"UnitCos":"1.99",
"Total":"189.05"
},
{
"OrderDate":"2020-01-23",
"Region":"Central",
"Rep":"Kivell",
"Item":"Binder",
"Units":"50",
"UnitCos":"19.99",
"Total":"999.5"
},
{
"OrderDate":"2020-02-09",
"Region":"Central",
"Rep":"Jardine",
"Item":"Pencil",
"Units":"36",
"UnitCos":"4.99",
"Total":"179.64"
},
{
"OrderDate":"2020-02-26",
"Region":"Central",
"Rep":"Gill",
"Item":"Pen",
"Units":"27",
"UnitCos":"19.99",
"Total":"539.73"
},
{
"OrderDate":"2020-03-15",
"Region":"West",
"Rep":"Sorvino",
"Item":"Pencil",
"Units":"56",
"UnitCos":"2.99",
"Total":"167.44"
},
{
"OrderDate":"2020-04-01",
"Region":"East",
"Rep":"Jones",
"Item":"Binder",
"Units":"60",
"UnitCos":"4.99",
"Total":"299.4"
},
{
"OrderDate":"2020-04-18",
"Region":"Central",
"Rep":"Andrews",
"Item":"Pencil",
"Units":"75",
"UnitCos":"1.99",
"Total":"149.25"
},
{
"OrderDate":"2020-05-05",
"Region":"Central",
"Rep":"Jardine",
"Item":"Pencil",
"Units":"90",
"UnitCos":"4.99",
"Total":"449.1"
},
{
"OrderDate":"2020-05-22",
"Region":"West",
"Rep":"Thompson",
"Item":"Pencil",
"Units":"32",
"UnitCos":"1.99",
"Total":"63.68"
},
{
"OrderDate":"2020-06-08",
"Region":"East",
"Rep":"Jones",
"Item":"Binder",
"Units":"60",
"UnitCos":"8.99",
"Total":"539.4"
},
{
"OrderDate":"2020-06-25",
"Region":"Central",
"Rep":"Morgan",
"Item":"Pencil",
"Units":"90",
"UnitCos":"4.99",
"Total":"449.1"
}
]
}
<title>Insert title here</title>
<style type="text/css">
#orderTable {
border-collapse: collapse;
}
#orderTable td, #orderTable th {
padding: 5px;
border: 1px solid #444444;
text-align: center;
}
#orderTable th {
background-color: #A099FF;
}
</style>
<script type="text/javascript"
src="resources/jquery/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url: "resources/json/test2.json",
type: "get",
dataType: "json",
success: function(res) {
var html = "";
// thead
html += "<tr>";
for(var c of res.orderCol) {
html += "<th>" + c + "</th>";
}
html += "</tr>";
$("#orderTable thead").html(html);
html = "";
// tbody
for(var o of res.order) {
html += "<tr>";
for(var c of res.orderCol) {
html += "<td>" + o[c] + "</td>";
}
html += "</tr>";
}
$("#orderTable tbody").html(html);
},
error: function(request, status, error) {
// 실패 시 다음 함수 실행
console.log(request);
console.log(status);
console.log(error);
}
});
});
</script>
</head>
<body>
<table id="orderTable">
<thead></thead>
<tbody></tbody>
</table>
</body>
</html>
spring 실습 & 결과
test3
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="resources/jquery/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#goBtn").on("click",function(){
if($.trim($("#num").val())==""){//트림 필수요소 필터링
alert("값좀 넣어라");
$("#num").focus();
} else{
$("#goForm").submit(); //action 실행
}
});
});
</script>
</head>
<body>
<form action="test4" method="post" id="goForm">
<input type="number" name="num" id="num"/>
<input type="button" value="Go" id="goBtn"/>
</form>
</body>
</html>
testController
@RequestMapping(value="/test4")
public ModelAndView test4(
@RequestParam int num,
ModelAndView mav) {
String gugu=iTestService.gugu(num); //문자열 변환
mav.setViewName("test/test4");
mav.addObject("gugu", gugu);
return mav;
}
ItestSerive
package com.test.spring.test.service;
public interface ITestService {
public void test();
public String gugu(int num);
}
}
TestService
package com.test.spring.test.service;
import org.springframework.stereotype.Service;
@Service //스프링이 객체를 만듬 서비스로
public class TestService implements ITestService {
@Override
public void test() {
System.out.println("서비스가 구동 됨.");
}
@Override
public String gugu(int num) {
String gugu="";
for(int i =1; i < 10; i++) {
gugu+=num+ " * "+ i + "="+ (num*i)+"<br/>";
}
return gugu;
}
}
test4
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="resources/jquery/jquery-1.12.4.js"></script>
</head>
<body>
${gugu}
<input type="button" value="back" id="backBtn"/>
</body>
</html>
오늘 스프링에대해서 실습을 했는데, 내가 값을 받는 부분부터 몰랐다. 시작 부터 할줄 몰랐다.....오늘 배워서 다행이다. 항상 실습을 통해 배운다.