json과 ajax를 더 잘다뤄 보고싶어서 rest api의 CRUD를 구현해보기로 했다
Controller
@RestController
@RequestMapping
public class DataController {
private static final Logger logger = LoggerFactory.getLogger(DataController.class);
// 데이터를 저장할 리스트
@Autowired
DataService dataserv;
private List<UserData> dataList = new ArrayList<>();
// 자원 생성 (POST)
@PostMapping("insertDatas")
public void createData(@RequestBody JoinDataVO jdt) {
logger.info("createData is = {}",jdt);
// 데이터 추가
dataserv.insertMem(jdt);
//insert void타입으로 줘야 에러 안남
}
// 리스트 자원 읽기 (GET)
@GetMapping("datas")
public List<UserData> getData(UserData user) {
logger.info("getAllMember list is = {}", user);
//데이터 반환
return dataserv.member(user);
}
// 자원 단건 읽기 (GET)
@GetMapping("datas/{id}")
public UserData getOneData(@PathVariable String id) {
//데이터 반환
return dataserv.onemember(id);
}
//조인테이블 select
@GetMapping("joinDatas")
public List<UserData> joinmember(UserData user) {
//데이터 반환
return dataserv.joinmember(user);
}
// 자원 삭제 (DELETE)
@DeleteMapping("/{id}")
public void deleteData(@PathVariable String id) {
// id에 해당하는 데이터 삭제
dataserv.deleteMem(id);
}Model
public class UserData {
private String id;
private String name;
private String password;
private List<UserSubData> subData;
//getter,setter,tostring 생략
}
public class UserSubData {
private String id;
private int type;
private String birth;
//getter,setter,tostring 생략
}
public class JoinDataVO {
private String id;
private String name;
private String password;
private int type;
private String birth;
//getter,setter,tostring 생략
}JOIN도 해보고싶어서 class가 3개가 되었다 3번째가 조인용 VO이다.
Service
@Service
public class DataService {
@Autowired
DataMapper datamap;
public List<UserData> member(UserData user){
return datamap.member(user);
}
public UserData onemember(String id) {
return datamap.onemember(id);
}
public List<UserData> joinmember(UserData user){
return datamap.joinmember(user);
}
public void insertMem(JoinDataVO jdt) {
datamap.insertMem(jdt);
}
public void deleteMem(String id) {
datamap.deleteMem(id);
}
}원래 내가 하던 스타일은 service를 인터페이스로 주고 serviceImpl구현클래스를 따로 생성해주지만 이번에는 굳이? 이런생각에 한번 해보았다.
Mapper java/xml
public interface DataMapper {
public List<UserData> member(UserData user);
public UserData onemember(String id);
public List<UserData> joinmember(UserData user);
public void insertMem(JoinDataVO jdt);
public void deleteMem(String id);
}<?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="jhh.kog.mapper.DataMapper">
<select id="member" resultType="jhh.kog.model.UserData">
SELECT * FROM crudmem
</select>
<select id="onemember" resultType="jhh.kog.model.UserData" parameterType="jhh.kog.model.UserData">
SELECT * FROM crudmem where id=#{id}
</select>
<select id="joinmember" parameterType="jhh.kog.model.UserData" resultMap="joinMap">
SELECT c.id, c.name, t.type, t.birth
FROM crudmem c
JOIN testtb t
ON c.id = t.id
</select>
<resultMap type="jhh.kog.model.UserData" id="joinMap">
<result column="id" property="id" />
<result column="name" property="name" />
<collection property="subData" resultMap="subData" />
</resultMap>
<resultMap type="jhh.kog.model.UserSubData" id="subData">
<result column="type" property="type" />
<result column="birth" property="birth" />
</resultMap>
<insert id="insertMem" parameterType="jhh.kog.model.JoinDataVO">
INSERT INTO crudmem VALUES (#{id}, #{password}, #{name});
<!-- INSERT INTO testtb VALUES (#{id}, #{type}, #{birth}); -->
</insert>
<delete id="deleteMem" parameterType="jhh.kog.model.UserData">
delete from crudmem where id=#{id}
</delete>
</mapper>일반 컨트롤러를 사용할때도 resultMap/VO조인 둘다 사용해봤지만 rest를 사용할떄도 크게 차이없이 사용하는것 같다.
rest는 결국 url이 모든걸 해주니까!
jsp/javascript
<button id="getdatas">call!</button>
<div id="allMember"></div><br>
<input type="button" id="getmember" value="한명조회"><br>
<input type="text" id="inputMember"><br>
<input type="button" id="delete" value="한명삭제"><br>
<div id="printMem"></div>
<br>
<input type="button" id="joinMem" value="합쳐서 조회!"><br>
<div id="printJoinMems"></div><br>
<br>
ID : <input type="text" id="id" name="id"><br>
password : <input type="text" id="password" name="password"><br>
name : <input type="text" id="name" name="name"><br>
<br>
<input type="button" id="insert" value="insert">
<div id="ifOk"></div>json으로 데이터 불러오는게 목적이니 화면 대충만들어주고
console.log("Modules connect!");
//전체 조회
$( document ).ready(function() {
$("#getdatas").click(function(){
console.log("click!");
// ajax 통신
$.ajax({
type : "GET",
url : "datas",
dataType: "json",
success : function(data){
console.log("data = " + data);
console.log("data[0].name = " + data[0].name);
console.log("data[0].id = " + data[0].id);
let memberDiv = $("#allMember");
memberDiv.empty();// 이전에 출력된 데이터 삭제
let jsonStr = JSON.stringify(data);
memberDiv.append(jsonStr);
},
error : function(XMLHttpRequest, textStatus, errorThrown){
console.log("조회 실패." + XMLHttpRequest + textStatus + errorThrown);
}
});
});
});
//한건조회
$(document).ready(function() {
$("#getmember").click(function(){
$.ajax({
type : "GET",
url : "datas/"+$("#inputMember").val(),
dataType : "json",
success : function(data){
console.log("success data is = " + data);
let printMem = $("#printMem");
printMem.empty();
let id=data.id;
let name=data.name;
let pass=data.password;
printMem.append("ID = " + id + "/" + "name = " + name + "/" + "password = " + pass);
},
error : function(XMLHttpRequest, textStatus, errorThrown){
console.log("조회 실패." + XMLHttpRequest + textStatus + errorThrown);
}
});
});
});
//테이블 조인 조회
$(document).ready(function() {
$("#joinMem").click(function(){
$.ajax({
type : "GET",
url : "joinDatas",
dataType : "json",
success : function(data){
let printJoinMems = $("#printJoinMems");
printJoinMems.empty();
let jsonStr = JSON.stringify(data);
printJoinMems.append(jsonStr);
// let id=data.id;
// let name=data.name;
// let type=data.type;
// let birth=data.birth;
// printJoinMems.append("ID = " + id + "/" + "name = " + name + "/" + "password = " + pass);
},
error : function(XMLHttpRequest, textStatus, errorThrown){
console.log("조회 실패." + XMLHttpRequest + textStatus + errorThrown);
}
});
});
});
//멀티쿼리 insert..는 실패고 테이블 하나는 성공
$(document).ready(function() {
$("#insert").click(function(){
var id = $("#id").val();
var password = $("#password").val();
var name = $("#name").val();
$.ajax({
type : "POST",
url : "insertDatas",
contentType: "application/json",
data: JSON.stringify({
id: id,
password: password,
name: name
}),
success : function(data){
$("#ifOk").text("데이터가 추가되었습니다.");
},
error : function(XMLHttpRequest, textStatus, errorThrown){
console.log("조회 실패." + XMLHttpRequest + textStatus + errorThrown);
}
});
});
});
//delete
$(document).ready(function() {
$("#delete").click(function(){
var id = $("#id").val();
$.ajax({
type : "delete",
url : $("#inputMember").val(),
contentType: "application/json",
data: JSON.stringify({
id: id
}),
success : function(data){
$("#printMem").text("데이터가 삭제되었습니다.");
},
error : function(XMLHttpRequest, textStatus, errorThrown){
console.log("조회 실패." + XMLHttpRequest + textStatus + errorThrown);
}
});
});
});Mybatis 멀티쿼리를 써서 테이블 2개에 각각 insert를 해보고싶었는데 실패해서 결국 하나만 넣었다..ㅎ
let jsonStr = JSON.stringify(data);
printJoinMems.append(jsonStr);이런식으로 data를 한번에 묶어줘서 전달할수있다고 한다!
결과
전체 조회
단건 조회/삭제
조인데이터 조회
멤버 insert
다른분들이 말하는 RESTful하다는게 아직 뭔지 잘모르겠지만 나같은 초보는 일단 뭔가 했다는거에 의미를 부여...해야겠다
기계 그잡채가 되고싶다