XML
가져온 mem_id 값과 일치 한 것을 count(*) 한다
count(*)의 설명 : http://rasbow.zc.bz/bbs/board.php?bo_table=develop_db&wr_id=1
1
2
3
4
|
<select id="getCheakId" parameterType="String" resultType="int">
SELECT count(*) FROM pc_mem1 WHERE mem_id=#{mem_id}
</select>
| cs |
dd
DAO
1
2
3
4
|
public int cheakId(String id){
return sqlSession.selectOne("Member.getCheakId", id);
}
| cs |
새로운 controller에서 만들어 주어야 한다.
RestController는 앱용 컨트롤러로써 실시간 get, post 가 용이하다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
//AppController
@RestController
@ComponentScan("com.ds.dao")
public class AppController {
@Autowired
private MemberDAO dao;
@RequestMapping(value = "checkid.do", method = RequestMethod.POST)
public HashMap<String, String> checkmem(@RequestParam("id") String id,
HttpServletResponse response){
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
response.setHeader("Access-Control-Allow-Origin", "*");
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
HashMap<String, String> map = new HashMap<String, String>();
int ret = dao.cheakId(id);
map.put("ret", "n"); //{"ret":"n"}
if(ret == 1){
map.put("ret", "y"); //{"ret":"y"}
} //시험문제 코드를 최적화하라.
return map;
}
| cs |
스크립트를 보면 중복체크 ID를 output 값으로 주고
아이디의 Name값을 보내서 비교한후 output으로 출력하게끔 구현되어 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
// JOIN.JSP
<div class="form-inline" style="margin-bottom: 5px">
<label style="width: 100px">아이디</label>
<input type="text"class="form-control" name="id" id="id" placeholder="아이디입력" />
<label style="width: 102px" id="output">중복체크</label>
</div>
//-------------중략---------------
<script src="resources/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#id').keyup(function(){
var a = $('#id').val();
if(a.length > 0){
$.post("checkid.do", {"id": a}, function(data){
if(data.ret == 'y'){
$('#output').html(
'<font color="#ff0000">사용불가</font>');
}
else if(data.ret == 'n'){
$('#output').html(
'<font color="#00ff00">사용가능</font>');
}
}, "json");
}
else {
$('#output').text('중복확인');
}
| cs |
이 기능을 사용하기 위해 제이슨 라이브러리를 porm.xml에 추가하는 것을 잊지 않도록
1
2
3
4
5
6
7
8
|
//Json 라이브러리
<dependency>
<groupId>com.fasterxml.jackson.jaxrs</groupId>
<artifactId>jackson-jaxrs-base</artifactId>
<version>2.4.4</version>
</dependency>
| cs |
=================@CrossOrigin을 이용한 다른 방법==================
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
//porm.xml에 추가
<!-- Jackson -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.7.5</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.dataformat</groupId>
<artifactId>jackson-dataformat-xml</artifactId>
<version>2.7.5</version>
</dependency>
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-mapper-asl</artifactId>
<version>1.9.3</version>
</dependency>
| cs |
1
2
3
4
5
6
7
8
|
//porm.xml
<!--Spring 버전도 4.3.1 로 변화시켜 주었다.(기존 4.1.1) -->
<properties>
<java-version>1.6</java-version>
<org.springframework-version>4.3.1.RELEASE</org.springframework-version>
<org.aspectj-version>1.6.10</org.aspectj-version>
</properties>
| cs |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
// WebAppController
@CrossOrigin(origins="*")
@RestController
@MapperScan("com.ds.vo")
public class WebAppController {
@Autowired
private WebAppDAO waDAO;
@RequestMapping(value = "/webapp_mem_id_check",
method = {RequestMethod.GET,RequestMethod.POST},
produces="application/json")
public @ResponseBody Map<String, String> member_idcheck(
@RequestParam("id")String id){
Map<String, String> map = new HashMap<String,String>();
int r = waDAO.memberIDCheck(id);
map.put("ret", "y");
if(r<=0){
map.put("ret", "n");
}
return map;
}
}
| cs |
1
2
3
4
5
6
7
8
9
10
11
12
|
// WebAppDAO
@Service
public class WebAppDAO {
@Autowired
private SqlSession sqlSession;
public int memberIDCheck(String id){
return sqlSession.selectOne("WebApp.memberIDCheck",id);
}
}
| cs |
1
2
3
4
5
6
7
8
9
10
|
//webapp.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="WebApp">
<select id="memberIDCheck" parameterType="String" resultType="int">
SELECT count(*) cnt FROM exam1_member WHERE id=#{id}
</select>
</mapper>
| cs |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
//join.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>회원가입</title>
<link rel="stylesheet" href="css/materialize.min.css">
<style type="text/css">
.margin10{
margin-left:10px;
margin-right:10px;
}
</style>
</head>
<body>
<div class="margin10">
<h3>회원가입</h3>
<div class="row">
<div class = "col s7">
<div class="input-field">
<input type="text" id="id" class="validate" />
<label>userid</label>
</div>
</div>
<div class="col s5">
<div class ="card-panel white">
<label id="idcheck">중복확인</label>
</div>
</div>
<div align="center">
<a class="waves=effect waves-light btn">가입</a>
<a href="main.html" class="waves-effect waves-light btn">메인</a>
</div>
</body>
</html>
| cs |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
//join.html --> javaScript, Jquery
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/materialize.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#id').keyup(function(){
var addr = "http://127.0.0.1:8080/jdh2/webapp_mem_id_check";
var id = $('#id').val();
if(id.length > 0){
$.post(addr, {"id":id}, function(data){
if(data.ret =='y'){
$('#idcheck').html('<span style="color:#ff0000">사용불가</span>');
}
else{
$('#idcheck').html('<span style="color:#0000ff">사용가능</span>');
}
});
}
else {
$('#idcheck').text('중복확인');
}
});
});
</script>
| cs |
주소 입력창에 입력후 아이디 값을 주었을때 해당 화면이 나오면 잘 작동 하는 것임
var addr = "http://127.0.0.1:8080/jdh2/webapp_mem_id_check";
-----------실행화면---------
댓글 없음:
댓글 쓰기