Ajax 을 이용하는 법이 늘 궁굼했는데 오늘 Ajax을 이용해서 Insert하는 법을 배웠다.
insert.jsp
<%@ 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">
*{font-size: 16pt; }
a{text-decoration:none;font-size: 16t; color:blue ;}
a:hover{font-size: 18pt; text-decoration:underline; color:green ; }
</style>
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){
$('#add').on('click', function(){
$.ajax({
url: "insertProc.do",
type: "POST",
data: $('#frm').serialize(),
success: function(data){
location.href="listUser.do";
},
error: function(){ alert("신규등록 error"); }
});
});
});
</script>
</head>
<body>
[추가하기 화면]<br><br>
<form id="frm" method="post">
<table>
<tr>
<td>이름</td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<td>나이</td>
<td><input type="text" name="age" id="age"></td>
</tr>
<tr>
<td>취미</td>
<td><input type="text" name="hobby" id="hobby"></td>
</tr>
<tr>
<td colspan="2">
<input type="button" id="add" value="추가하기">
</td>
</tr>
</table>
</form>
<br>
<a href="index.jsp">[index.jsp]</a>
<a href="insert.do">[신규등록]</a>
<!--
drop table user1;
create table user1(
name varchar2(10) primary key,
age number,
hobby varchar2(16)
);
select * from user1;
delete from user1;
-->
</body>
</html>
'추가하기' 버튼을 누르면
script 함수가 호출이 된다.
insertProc.do 를
POST 타입으로 호출하면서
'frm' 에 있는 데이터들을
setialize() 를 사용함으로써
frm 에 있는 데이터를
모두 가져올 수 있게 된다.
UserDTO 를 매개 객체로 받는다.
아마 setialize 로 모든 데이터를 가져오면서 DTO 가 전달되는 것 같다.
UserDTO.java 는 이렇게 정의 되어 있다.
package net.hb.encore;
import org.springframework.stereotype.Component;
public class UserDTO {
private String name;
private int age;
private String hobby;
public String getName() { return name; }
public void setName(String name) { this.name = name; }
public int getAge() {return age; }
public void setAge(int age) {this.age = age; }
public String getHobby() { return hobby; }
public void setHobby(String hobby) {this.hobby = hobby; }
}//class END
여기가 중요한 것 같다.
insertProc 에서는 userService.insertUser 를 호출한다.
UserService userService;
---------------------------------------------------------------------------------------------------------------------------------
UserService.java
package net.hb.encore;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
@Service
public class UserService {
private UserDao userDao;
@Autowired
public UserService(UserDao userDao) {
super();
this.userDao = userDao;
}
public boolean insertUser(UserDTO user) {
return userDao.insertUser(user);
}
public List<UserDTO> listUser() {
return userDao.listUser();
}
public boolean updatetUser(UserDTO user) {
return userDao.updateUser(user);
}
public boolean deleteUser(String name) {
return userDao.deleteUser(name);
}
}//class END
UserService 는 @Service
@Service 는 서비스 레이어, 내부에서 자바 로직을 처리함
UserService 는 UserDao 의 객체를 선언하고
UserDao 의 메소드를 반환한다.
UserDao.java
package net.hb.encore;
import java.util.List;
import org.apache.ibatis.session.SqlSessionFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
@Repository
public class UserDao {
@Autowired
private SqlSessionFactory factory;
public boolean insertUser(UserDTO user) {
int n=factory.openSession().insert("mybatis.user.insertUser", user);
return (n>0)?true:false;
}//end
public List<UserDTO> listUser() {
return factory.openSession().selectList("mybatis.user.listUser");
}//end
public boolean updateUser(UserDTO user) {
int n=factory.openSession().update("mybatis.user.updateUser", user);
return (n>0)?true:false;
}//end
public boolean deleteUser(String name) {
int n=factory.openSession().delete("mybatis.user.deleteUser", name);
return (n>0)?true:false;
}//end
}//class END
UserDao 는 @Repository
@Repository 퍼시스턴스 레이어, DB나 파일같은 외부 I/O 작업을 처리함
UserDao 는 직접적으로 안에서 일어나는 일들을 구현하였다.
---------------------------------------------------------------------------------------------------------------------------------
결국 여기서 호출된 userService.inserUser는 UserDao 에서 정의한 inserUser() 메소드가 호출이 되는 것이다.
public boolean insertUser(UserDTO user) {
int n=factory.openSession().insert("mybatis.user.insertUser", user);
return (n>0)?true:false;
}//end
여기에서 사용하는 factory 는 SqlSessionFactory 의 인스턴스이다.
SqlSessionFactory는 데이터베이스와의 연결과 SQL의 실행에 대한 모든 것을 가진 가장 중요한 객체이다.
@Autowired
private SqlSessionFactory factory;
factory.openSession().insert(""); 코드로 인해서 mybatis 에 접근을 할 수 있다.
user-mapping.xml
<?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="mybatis.user">
<insert id="insertUser" parameterType="user">
INSERT INTO USER1(NAME,AGE,HOBBY)
VALUES(#{name}, #{age}, #{hobby})
</insert>
<select id="listUser" resultType="user">
SELECT * FROM USER1
</select>
<update id="updateUser" parameterType="user">
UPDATE USER1
SET AGE=#{age}, HOBBY=#{hobby} WHERE NAME=#{name}
</update>
<delete id="deleteUser" parameterType="java.lang.String">
DELETE FROM USER1 WHERE NAME=#{name}
</delete>
</mapper>
user-mapping.xml 에 정의된 insertUser 코드를 실행하게 된다.
mapper 의 namespace 를 mybatis.user라고 정의한 이유는 user 라는 이름을 namespace로 사용하기에는 무리가 있기에 그렇다고 하셨다.
아무튼 결국 이 코드로 인해서 insertUser가 실행된다.
name, age, hobby 는 net.hb.encore.UserDTO에 정의 되어있는 속성과 일치 해야 한다!
<insert id="insertUser" parameterType="user">
INSERT INTO USER1(NAME,AGE,HOBBY)
VALUES(#{name}, #{age}, #{hobby})
</insert>
이 mybatis가 정의된 xml 문서를 사용하려면 mybatis-config.xml 문서에 아래처럼 매핑을 해주어야 한다
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
<typeAliases>
<typeAlias type="net.hb.encore.UserDTO" alias="user"/>
</typeAliases>
<!-- 쿼리문 -->
<mappers>
<mapper resource="user-mapping.xml"/>
</mappers>
</configuration>
mybatis-config.xml 문서를 인식하는 역활은 servlet-context.xml 에서 이렇게 정의해주어야 한다.
<beans:bean id="mybatis" class="org.mybatis.spring.SqlSessionFactoryBean"
p:dataSource-ref="dataSource"
p:configLocation="classpath:mybatis-config.xml"
p:transactionFactory-ref="transactionFactory"/>
다시 돌아와서 !
<script>
$(document).ready(function(){
$('#add').on('click', function(){
$.ajax({
url: "insertProc.do",
type: "POST",
data: $('#frm').serialize(),
success: function(data){
location.href="listUser.do";
},
error: function(){ alert("신규등록 error"); }
});
});
});
</script>
성공하면 listUser.do 로 보내질 것이고, 실패 한다면 alert 창이 뜰 것이다.
ajax 을 사용하려면 pop.xml 에 필수로 기술 할 것!
<!-- json관련 라이브러리1 -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.6</version>
</dependency>
<!-- json관련 라이브러리2 -->
<dependency>
<groupId>com.fasterxml.jackson.dataformat</groupId>
<artifactId>jackson-dataformat-xml</artifactId>
<version>2.9.6</version>
</dependency>
<!-- Java데이터 JSON타입으로 변환 -->
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.8.2</version>
</dependency>
✨ 글이 도움이 되었다면 Click ✨
'개발중 > Spring' 카테고리의 다른 글
JSTL (0) | 2021.01.05 |
---|---|
차트 만들기 (0) | 2020.11.18 |
AOP (0) | 2020.10.20 |
pom.xml 문서 기록 (0) | 2020.10.20 |
mytabis 연동 설정 (0) | 2020.10.20 |