mavenBoard 만들기 6 (오류 수정), boardAjax 만들기(환경 설정,회원가입 구현)

@ mavenBoard 만들기 6 (오류 수정)
freeBoardMapper.xml과 boardMapper.xml의 id이름이 겹치는 부분들이 있어서 겹치지 않게 수정.


@ boardAjax 만들기 (환경 설정,회원가입 구현)

http://localhost:8080/boardAjax/egovSampleList.do
http://192.168.0.39:8080/boardAjax/user/userInsert.do

1. 환경 설정 (DB 연결, 테이블 생성)

- boardajax.sql 참고
3개 테이블(CODE_MASTER,USER_TB,ACCOUNT_TB) 만들고 시퀀스 생성 후 code_master테이블에 데이터 삽입.

- context-datasource.xml
<!-- oracle -->
<bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close">
    <property name="driverClassName" value="oracle.jdbc.driver.OracleDriver"/>
    <property name="url" value="jdbc:oracle:thin:@localhost:1521:xe" />
    <property name="username" value="test"/>
    <property name="password" value="123"/>
</bean>

- Login_SQL.xml
https://m.blog.naver.com/rpdladhqjf18/220336411187 - 참고()
https://mybatis.org/mybatis-3/ko/sqlmap-xml.html - 참고(ResultMap - 마이바티스)
https://www.egovframe.go.kr/wiki/doku.php?id=egovframework:rte:psl:dataaccess:resultmap - 참고(ResultMap - 전자정부프레임워크)
https://atoz-develop.tistory.com/entry/MyBatis-%EC%84%A4%EC%A0%95-%ED%8C%8C%EC%9D%BC-SQL-Mapper-%EC%9E%91%EC%84%B1-%EB%B0%A9%EB%B2%95 - (ResultMap 예시)

# Service,DAO,ServiceImpl
https://melonpeach.tistory.com/40 - 참고(스프링 회원가입 예시)
https://www.egovframe.go.kr/wiki/doku.php?id=egovframework:rte2:psl:dataaccess:mybatisguide - 참고(MyBatis 적용 가이드 - 전자정부프레임워크)

- UserDAO.java
https://velog.io/@sungmo738/Resource-Autowired-Inject-%EC%B0%A8%EC%9D%B4 - 참고(@Inject)

@Repository("userDAO")
public class UserDAO extends EgovAbstractMapper {

@Autowired
SqlSession sqlSession;

public void insertUser(UserVO vo) throws Exception {
sqlSession.insert("Login.insertUser", vo);
}

}

- UserService.java
public interface UserService {

public void insertUser(UserVO vo) throws Exception;

}

- UserServiceImpl.java
@Service("userService")
public class UserServiceImpl implements UserService {

@Resource(name="userDAO")
private UserDAO userDAO;

@Override
public void insertUser(UserVO vo) throws Exception {

userDAO.insertUser(vo);

}

}

- UserController.java
@Controller
public class UserController {

@Resource(name = "userService")
UserService userService;

@RequestMapping(value="/user/userInsert.do")
public String userInsert() {

//http://192.168.0.39:8080/boardAjax/user/userInsert.do
//http://localhost:8080/boardAjax/user/userInsert.do
return "/user/userInsert";

}

}

2. 회원가입 구현

# 아이디 중복 체크 구현
https://m.blog.naver.com/vnemftnsska2/221407559074 - 참고(아이디 중복검사 예시)

★ ajax로 넘어온 데이터를 읽기 위해 필요한 환경설정
https://blog.naver.com/hynb12/221399723447 - 참고(Ajax -@ResponseBody & @RequestBody)
https://lovettomore.tistory.com/4 - 참고
- dispatcher-servlet.xml
<bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter">
    <property name="webBindingInitializer">
        <bean class="egovframework.example.cmmn.web.EgovBindingInitializer"/>
    </property>
    <property name="messageConverters">
<list>
<bean class="org.springframework.http.converter.StringHttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<value>text/html;charset=UTF-8</value>
<value>application/json;charset=UTF-8</value>
</list>
</property>
</bean>
<bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter" />
</list>
    </property>
</bean>

- context-commmon.xml
<bean id ="jsonView" class="org.springframework.web.servlet.view.json.MappingJackson2JsonView"/>

- Login_SQL.xml
<mapper namespace="Login">
<!-- 
<resultMap id="userVO" type="com.lime.user.vo.UserVO">
<result property="userSeq" column="user_seq"/>
<result property="userId" column="user_id"/>
<result property="pwd" column="pwd"/>
<result property="userName" column="user_name"/>
<result property="regDt" column="reg_dt"/>
</resultMap>

<select id="selectListUser" resultMap="userVO">
select user_seq,user_id,pwd,user_name,reg_dt
from USER_TB
</select>
 -->

<!-- insert USER_TB테이블 -->
<insert id="insertUser" parameterType="userVO">
insert into USER_TB
(user_seq,user_id,pwd,user_name,reg_dt)
values
(USER_SEQ.NEXTVAL,#{user_id},#{pwd},#{user_name},SYSDATE)
</insert>

<!-- select 아이디 중복확인 -->
<select id="userIdCheck" resultType="int" parameterType="String">
select count(*)
from USER_TB
where user_id = #{user_id}
</select>

</mapper>

- UserService.jsp
public interface UserService {

/**
 * user_tb테이블에 실제 insert 작업
 * @param vo
 * @throws Exception
 */
public void insertUser(UserVO vo) throws Exception;

/**
 * user_tb테이블에서 아이디 중복체크
 * @param user_id
 * @return
 */
public int userIdCheck(String user_id);

}

- UserDAO.java
@Repository("userDAO")
public class UserDAO extends EgovAbstractMapper {

@Autowired
SqlSession sqlSession;

/**
 * user_tb테이블에 실제 insert 작업
 * @param vo
 * @throws Exception
 */
public void insertUser(UserVO vo) throws Exception {

sqlSession.insert("Login.insertUser",vo);

}

/**
 * user_tb테이블에서 아이디 중복체크
 * @param user_id
 * @return 1(아이디 중복O) / 0(아이디 중복X)
 */
public int userIdCheck(String user_id) {

return sqlSession.selectOne("Login.userIdCheck",user_id);

}

}

- UserServiceImpl.java
@Service("userService")
public class UserServiceImpl implements UserService {

@Resource(name="userDAO")
private UserDAO userDAO;


//user_tb테이블에 실제 insert 작업
@Override
public void insertUser(UserVO vo) throws Exception {

userDAO.insertUser(vo);

}

//user_tb테이블에서 아이디 중복체크
@Override
public int userIdCheck(String user_id) {

return userDAO.userIdCheck(user_id);

}

}

- UserController.java
@Controller
public class UserController {

@Resource(name = "userService")
UserService userService;


@RequestMapping(value="/user/userInsert.do")
public String userInsert() {

//http://192.168.0.39:8080/boardAjax/user/userInsert.do
//http://localhost:8080/boardAjax/user/userInsert.do
return "/user/userInsert";

}

@RequestMapping(value="/user/userInsertPro.do")
public ModelAndView userInsertPro(UserVO vo) throws Exception {

userService.insertUser(vo);

ModelAndView mav = new ModelAndView();

mav.setViewName("redirect:/login/login.do");

return mav;

}

@RequestMapping(value="/user/userIdCheck.do")
@ResponseBody
public int userIdCheck(@RequestParam("user_id") String user_id) {

return userService.userIdCheck(user_id);

}

}

- userInsert.jsp
https://devzec.tistory.com/entry/java-%EB%B9%84%EB%B0%80%EB%B2%88%ED%98%B8-%EC%A0%95%EA%B7%9C%EC%8B%9D-%ED%8C%A8%ED%84%B4-%EC%88%AB%EC%9E%90%EB%AC%B8%EC%9E%90%ED%8A%B9%EC%88%98%EB%AC%B8%EC%9E%90-%ED%8F%AC%ED%95%A8 - 참고(정규화 표현식)

<div class="container" style="margin-top: 50px">

<form class="form-horizontal" id="sendForm" method="post" action="./userInsertPro.do">

    <div class="form-group">
      <label class="col-sm-2 control-label">ID</label>
      <div class="col-sm-4">
        <input class="form-control" id="user_id" name="user_id" type="text" value="" title="ID"><br/>
        
        <div class="check" id="id_check"></div>
      </div>

      <div class="container">
       <button type="button" id="idcked" class="btn btn-default" style="display: block;">ID 중복 체크</button>
      </div>
    </div>

    <div class="form-group">
      <label for="disabledInput " class="col-sm-2 control-label">패스워드</label>
      <div class="col-sm-4">
        <input class="form-control" id="pwd" name="pwd" type="password" title="패스워드" ><br/>
        
        <div class="check" id="pwd_check"></div>
      </div>
      
      <label for="disabledInput " class="col-sm-2 control-label">패스워드 확인</label>
      <div class="col-sm-4">
        <input class="form-control" id="pwdck" name="pwdck" type="password" title="패스워드 확인"><br/>
        
        <div class="check" id="pwdck_check"></div>
      </div>  
    </div>

    <div class="form-group">
      <label for="disabledInput" class="col-sm-2 control-label">이름</label>
      <div class="col-sm-4">
        <input class="form-control" id="user_name" name="user_name" type="text" value="" title="이름" >
      </div>
    </div>


    <div class="col-md-offset-4">
<button type="submit" id="saveBtn" class="btn btn-primary">저장</button>
<button type="button" id="#" class="btn btn-danger">취소</button>
    </div>
    
</form>

</div>

<script type="text/javascript">

$(document).ready(function(){

//아이디 중복 검사
//$("#user_id").blur(function() {
$("#idcked").click(function() {
// id = "id_reg" / name = "userId"

//아이디 정규식
var idJ = /^[a-z0-9]{6,12}$/;

var user_id = $('#user_id').val();

$.ajax({
url : './userIdCheck.do?user_id='+ user_id,
type : 'get',
success : function(data) {//컨트롤러에서 오는 값 매개변수 적기(사용자 정의) - data
console.log("1 = 중복o / 0 = 중복x : "+ data);

if (data == 1) {

// 1 : 아이디가 중복되는 문구
$("#id_check").text("사용중인 아이디입니다!");
$("#id_check").css("color", "red");
$("#saveBtn").attr("disabled", true);

} else {

if(idJ.test(user_id)){

// 0 : 아이디 길이 / 문자열 검사
$("#id_check").text("사용 가능한 ID입니다!");
$("#saveBtn").attr("disabled", false);

} else if(user_id == ""){

$('#id_check').text('아이디를 입력해주세요!');
$('#id_check').css('color', 'red');
$("#saveBtn").attr("disabled", true);

} else {

$('#id_check').text("아이디는 소문자와 숫자 6~12자리만 가능합니다!");
$('#id_check').css('color', 'red');
$("#saveBtn").attr("disabled", true);
}

}
}, error : function() {
console.log("실패");
}
});
});

//비밀번호 유효성 검사
//정규식 체크
$("#pwd").blur(function() {

//비밀번호 정규식
//'숫자', '문자', '특수문자' 무조건 1개 이상, 비밀번호 '최소 6자에서 최대 12자' 허용 (특수문자는 정의된 특수문자만 사용 가능) 
var pwJ = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[~!@#$%^&*()+|=])[A-Za-z\d~!@#$%^&*()+|=]{8,16}$/;


var pwd = $('#pwd').val();

if(pwJ.test(pwd)) {

console.log('true');
$('#pwd_check').text('');
$("#saveBtn").attr("disabled", false);

}else {

console.log('false');
$('#pwd_check').text('숫자,문자,특수문자 무조건 1개 이상, 최소 6~12자리 입력하세요!');
$('#pwd_check').css('color','red');
$("#saveBtn").attr("disabled", true);

}

});

//비밀번호 유효성 검사
//패스워드 일치 확인
$("#pwdck").blur(function() {

var pwdck = $('#pwdck').val();

if($('#pwd').val() != $(this).val()) {

$('#pwdck_check').text('비밀번호가 일치하지 않습니다!');
$('#pwdck_check').css('color','red');
$("#saveBtn").attr("disabled", true);

}else {

$('#pwdck_check').text('');
$("#saveBtn").attr("disabled", false);

}

});

});

</script>