Posts basic_project-3. 복습 로그인화면 구현
Post
Cancel

basic_project-3. 복습 로그인화면 구현

yunrap Jul 16, 2021 2021-07-16T20:33:00+09:00
Jul 18, 2021 2021-07-18T14:29:07+09:00 23 min

DB 연결하기

복습이므로 새로운프로젝트를 만들어 dbManager로 연결부터하려한다.

우선 계정을만든다음

1
2

create user yeji_user identified by 1234;
grant connect, resource, dba to yeji_user;

DBManager 구현

com.yeji.web.db 패키지에 DBManager 을 구현해준다.

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252

/**
 * <pre>
 * 프로젝트명 : BasicBoard
 * 패키지명   : com.yeji.web.db
 * 파일명     : DBManager.java
 * 작성일     : 2021. 1. 5.
 * 작성자     : daekk
 * </pre>
 */
package com.yeji.web.db;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

//import org.apache.logging.log4j.LogManager;
//import org.apache.logging.log4j.Logger;

/**
 * <pre>
 * 패키지명   : com.yeji.web.db
 * 파일명     : DBManager.java
 * 작성일     : 2021. 7. 16.
 * 작성자     : yeji
 * 설명       : DB 관리자
 * </pre>
 */
public final class DBManager
{
	//private static Logger logger = LogManager.getLogger(DBManager.class);
	
	// JDBC 드라이버명
	private static final String driverClassName = "oracle.jdbc.OracleDriver";
	// JDBC URL
	private static final String jdbcUrl = "jdbc:oracle:thin:@localhost:1521:XE";
	// 계정
	private static final String userName = "yeji_user";
	// 비밀번호
	private static final String password = "1234";
	
	private DBManager() {}

	/**
	 * <pre>
	 * 메소드명   : getConnection
	 * 작성일     : 2021. 7. 16.
	 * 작성자     : yeji
	 * 설명       : 데이터베이스 연결 객체를 얻는다.
	 * </pre>
	 * @return java.sql.Connection
	 */
	public static Connection getConnection()
	{
		Connection conn = null;
				
		try
		{
			// 드라이버 로드
			Class.forName(driverClassName);
			
			// Database 연결 객체를 얻는다.
			conn = DriverManager.getConnection(jdbcUrl, userName, password);
		}
		catch (ClassNotFoundException e)
		{
			System.out.println("[DBManager] getConnection ClassNotFoundException");
		}
		catch (SQLException e)
		{
			System.out.println("[DBManager] getConnection SQLException");
		}				
		
		return conn;
	}
	
	/**
	 * <pre>
	 * 메소드명   : close
	 * 작성일     : 2021. 7. 16.
	 * 작성자     : yeji
	 * 설명       : ResultSet 객체를 닫는다.
	 * </pre>
	 * @param rs java.sql.ResultSet
	 */
	public static void close(ResultSet rs)
	{
		close(rs, null, null);
	}
	
	/**
	 * <pre>
	 * 메소드명   : close
	 * 작성일     : 2021. 7. 16.
	 * 작성자     : yeji
	 * 설명       : PreparedStatement 객체를 닫는다.
	 * </pre>
	 * @param pstmt java.sql.PreparedStatement
	 */
	public static void close(PreparedStatement pstmt)
	{
		close(null, pstmt, null);
	}
	
	/**
	 * <pre>
	 * 메소드명   : close
	 * 작성일     : 2021. 7. 16.
	 * 작성자     : yeji
	 * 설명       : Connection 객체를 닫는다.
	 * </pre>
	 * @param conn java.sql.Connection
	 */
	public static void close(Connection conn)
	{
		close(null, null, conn);
	}
	
	/**
	 * <pre>
	 * 메소드명   : close
	 * 작성일     : 2021. 7. 16.
	 * 작성자     : yeji
	 * 설명       : ResultSet, PreparedStatement 객체를 닫는다.
	 * </pre>
	 * @param rs    java.sql.ResultSet
	 * @param pstmt java.sql.PreparedStatement
	 */
	public static void close(ResultSet rs, PreparedStatement pstmt)
	{
		close(rs, pstmt, null);
	}
	
	/**
	 * <pre>
	 * 메소드명   : close
	 * 작성일     : 2021. 7. 16.
	 * 작성자     : yeji
	 * 설명       : PreparedStatement, Connection 객체를 닫는다.
	 * </pre>
	 * @param pstmt java.sql.PreparedStatement
	 * @param conn  java.sql.Connection
	 */
	public static void close(PreparedStatement pstmt, Connection conn)
	{
		close(null, pstmt, conn);
	}
	
	/**
	 * <pre>
	 * 메소드명   : close
	 * 작성일     : 2021. 7. 16.
	 * 작성자     : yeji
	 * 설명       : 데이터베이스 객체를 닫는다.
	 * </pre>
	 * @param rs    java.sql.ResultSet
	 * @param pstmt java.sql.PreparedStatement
	 * @param conn  java.sql.Connection
	 */
	public static void close(ResultSet rs, PreparedStatement pstmt, Connection conn)
	{
		if(rs != null)
		{
			try
			{
				rs.close();
			}
			catch (SQLException e)
			{
				System.out.println("[DBManager] close ResultSet SQLException");
			}
		}
		
		if(pstmt != null)
		{
			try
			{
				pstmt.close();
			}
			catch (SQLException e)
			{
				System.out.println("[DBManager] close PreparedStatement SQLException");
			}
		}
		
		if(conn != null)
		{
			try
			{
				conn.close();
			}
			catch (SQLException e)
			{
				System.out.println("[DBManager] close Connection SQLException");
			}
		}
	}
	
	/**
	 * <pre>
	 * 메소드명   : setAutoCommit
	 * 작성일     : 2021. 7. 16.
	 * 작성자     : yeji
	 * 설명       : commit 모드 변경
	 * </pre>
	 * @param conn java.sql.Connection
	 * @param flag boolean
	 */
	public static void setAutoCommit(Connection conn, boolean flag)
	{
		if(conn != null)
		{
			try
			{
				if(conn.getAutoCommit() != flag)
				{
					conn.setAutoCommit(flag);
				}
			}
			catch (SQLException e)
			{
				System.out.println("[DBManager] setAutoCommit SQLException");
			}
		}
	}
	
	/**
	 * <pre>
	 * 메소드명   : rollback
	 * 작성일     : 2021. 7. 16.
	 * 작성자     : yeji
	 * 설명       : rollback
	 * </pre>
	 * @param conn java.sql.Connection
	 */
	public static void rollback(Connection conn)
	{
		if(conn != null)
		{
			try
			{
				conn.rollback();
			}
			catch (SQLException e)
			{
				System.out.println("[DBManager] rollback SQLException");
			}
		}
	}
}

그후 ojdbc6.jar파일을 라이브러리에 임포트해준다

디비연결 테스트 구현

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.DriverManager" %>

<%
boolean connection = false;
Connection conn = null;

String driver = "oracle.jdbc.driver.OracleDriver";
String url = "jdbc:oracle:thin:@localhost:1521:xe";

try
{
	Class.forName(driver);
	conn = DriverManager.getConnection(url, "yeji_user", "1234");

	if(conn == null)
	{
		connection = false;
		System.out.println("DB연결 실패했습니다.");
	}
	else
	{
		connection = true;
		System.out.println("DB연결 성공했습니다.");
	}

}
catch(Exception e)
{
	connection = false;
	System.out.println("DB연결 실패.....");
	e.printStackTrace();  
}

%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JDBC TEST</title>
</head>
<body>
<%
	if(connection == true)
	{
%>
	<h1>연결되었습니다.</h1>
<%
	}
	else
	{
%>	
	<h1>연결실패입니다.</h1>
<%
	}
%>

</body>
</html>

연결이 성공됬다고 뜨면 sql developer와 eclipse와의 서로 연결이 성공적으로 된것이다.

로그인화면 구현

우선 처음이 로그인 부터 시작하기때문에 로그인화면을 구현한다.

index 화면

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/include/head.jsp" %>
<style>
body {
  /* padding-top: 40px; */
  padding-bottom: 40px;
  /* background-color: #eee; */
}

.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox {
  font-weight: 400;
}
.form-signin .form-control {
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="text"] {
  margin-bottom: 5px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
   $("#userId").focus();
   
   $("#btnLogin").on("click", function(){
      fn_loginCheck();
   });
   
   $("#btnReg").on("click", function(){
      location.href = "/user/userRegForm.jsp";
   });
});

function fn_loginCheck()
{
   if($.trim($("#userId").val()).length <= 0)
   {
      alert("아이디를 입력하세요.");
      $("#userId").focus();
      return;
   }
   
   if($.trim($("#userPwd").val()).length <= 0)
   {
      alert("비밀번호를 입력하세요.");
      $("#userPwd").focus();
      return;
   }
   
   $.ajax({
    
   });
}
</script>
</head>
<body>
<%@ include file="/include/navigation.jsp" %>
<div class="container">

   <form name="loginForm" id="loginForm" method="post" action="/loginProc.jsp" class="form-signin">
       <h2 class="form-signin-heading m-b3">로그인</h2>
      <label for="userId" class="sr-only">아이디</label>
      <input type="text" id="userId" name="userId" class="form-control" maxlength="20" placeholder="아이디">
      <label for="userPwd" class="sr-only">비밀번호</label>
      <input type="password" id="userPwd" name="userPwd" class="form-control" maxlength="20" placeholder="비밀번호">
        
      <button type="button" id="btnLogin" class="btn btn-lg btn-primary btn-block">로그인</button>
       <button type="button" id="btnReg" class="btn btn-lg btn-primary btn-block" type="submit">회원가입</button>
   </form>
</div>
</body>
</html>

MODEL User 구현

로그인에서 값을 받은 MODEL을 구현해준다.

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

package com.icia.model;

import java.io.Serializable;

public class User implements Serializable{
	
	private static final long serialVersionUID = 1L;
	
	private String userId; //사용자 아이디
	private String userPwd; //사용자 비밀번호
	private String userName; //사용자 명
	private String userEmail; //사용자 이메일
	private String status; //상태("Y"사용, "N"정지)
	private String regDate; //등록일
	
	
	public User()
	{
		userId = "";
		userPwd = "";
		userName = "";
		userEmail = "";
		status = "";
		regDate = "";
	}
	
	public String getUserId() {
		return userId;
	}
	public void setUserId(String userId) {
		this.userId = userId;
	}
	public String getUserPwd() {
		return userPwd;
	}
	public void setUserPwd(String userPwd) {
		this.userPwd = userPwd;
	}
	public String getUserName() {
		return userName;
	}
	public void setUserName(String userName) {
		this.userName = userName;
	}
	public String getUserEmail() {
		return userEmail;
	}
	public void setUserEmail(String userEmail) {
		this.userEmail = userEmail;
	}
	public String getStatus() {
		return status;
	}
	public void setStatus(String status) {
		this.status = status;
	}
	public String getRegDate() {
		return regDate;
	}
	public void setRegDate(String regDate) {
		this.regDate = regDate;
	}
	
}

loginProcAjax 구현

  1. index부분에서 loginProcAjax 구현하기
1
2
3
4
5
6
7
8
9
10
11
12
13

 $.ajax({
	   type: "POST",
	   url: "/loginProcAjax.jsp",
	   data: {
		   userId: $("#userId").val(),
		   userPwd: $("#userPwd").val()
	   },
	   datatype: "JSON",
	   success: function(obj){
		   
	   }
    	
   });
  1. loginProcAjax ``` <%@ page language=”java” contentType=”text/html; charset=UTF-8” pageEncoding=”UTF-8”%> <%@ page import=”com.yeji.common.util.StringUtil” %> <%@ page import=”com.yeji.web.util.HttpUtil” %> <%@page import=”com.yeji.model.User”%> <%@ page import=”com.yeji.web.dao.UserDao” %>

<% System.out.println(“loginProcAjax.jsp start…….”);

1
2
3
4
5

String userId = HttpUtil.get(request, "userId");
String userPwd = HttpUtil.get(request, "userPwd");

System.out.println(userId);
System.out.println(userPwd); %> ```

여기서는 web.xml에 구현되있는 filter의 HttpEncodingFilter , UrlUserAuthFilter 클래스를 임포트해준다. 이부분은 생략하고 나중에 자세히보겠다.

servlet매핑을 통해가져온 HttpUtil클래스의 get메소드를통해 아이디와 패스워드를 가져온다.

이클립스 콘솔창에 값이 넘어오는지확인한다.

여기서보자면 HttpUtil은 servlet에 대해 구현이되어있는데 이에 대한 개념이 필요하다 HttpServletRequest를 사용하면, 값을 받아올 수가 있는데 만약 회원 정보를 컨트롤러로 보냈을 때 HttpServletRequest 객체 안에 모든 데이터들이 들어가게 됩니다 즉 화면에서 값을 입력해줬을대 데이터들이 들어가있는 보관소라고 보면된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.yeji.common.util.StringUtil" %>
<%@ page import="com.yeji.common.util.HttpUtil" %>
<%@ page import="com.yeji.web.dao.UserDao" %>
<%
	System.out.println("loginProcAjax.jsp START..............");

	String userId = HttpUtil.get(request, "userId");	//HttpServletRequest 가져온 userId
	String userPwd = HttpUtil.get(request, "userPwd");	//HttpServletRequest 가져온 userPwd

	if(!StringUtil.isEmpty(userId) && !StringUtil.isEmpty(userPwd))	//아이디, 패스워드 값이 비워있지않으면 
	{
		UserDao userDao = new UserDao();
		userDao.userSelect(userId);
	}
%>

StringUtil은 문자열 공백수정, 문자열특수문자 가공등이 들어가있는 메소드이다. 이렇게 값을 가져온다음 아이디가 비밀번호 둘다 공백이아닐경우에 유저객체를 만들어 SELECT 시켜주는것이다.

TBL USER DB구현

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

CREATE TABLE TBL_USER
(
    USER_ID VARCHAR2(20) NOT NULL,
    USER_PWD VARCHAR(20) NULL,
    USER_NAME VARCHAR2(30) NULL,  
    USER_EMAIL VARCHAR2(50) NULL,
    STATUS CHAR(1) NULL,
    REG_DATE DATE NULL
);

COMMENT ON COLUMN TBL_USER.USER_ID IS '사용자 아이디';
COMMENT ON COLUMN TBL_USER.USER_PWD IS '비밀번호';
COMMENT ON COLUMN TBL_USER.USER_NAME IS '사용자 명';
COMMENT ON COLUMN TBL_USER.USER_EMAIL IS '사용자 이메일';
COMMENT ON COLUMN TBL_USER.STATUS IS '사용여부(Y:사용, N:정지)';
COMMENT ON COLUMN TBL_USER.REG_DATE IS '등록일';

CREATE UNIQUE INDEX PK_USER ON TBL_USER(USER_ID ASC); 
ALTER TABLE TBL_USER ADD CONSTRAINT PK_USER PRIMARY KEY(USER_ID);

USER 에대한 정보가담긴 테이블을 만들었다. 맨마지막 두줄을 유의깁게보면

PK USER를 유니큐인덱스로 만들었고 단 USER ID순으로 PK USER 와 USER ID 를 PK로 만들어준다.

이그림을 참고하면되지만 왜이렇게해줬는지 확실히모르겠다.

무튼 이렇게 테이블을 설정하고!

USER DAO구현

유저의 아이디를 검색하기위한 USER SELECT 부분을 구현한다.

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

package com.yeji.web.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

import com.yeji.common.util.StringUtil;
import com.yeji.model.User;
import com.yeji.web.db.DBManager;

public class UserDao {

	public UserDao()
	{
		
	}
	
	public User userSelect(String userId)
	{
		User user = null; //user가 없을때 null설정
		StringBuilder sql = new StringBuilder();
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		Connection conn = null;
		
		sql.append("SELECT ");
		sql.append("	USER_ID, ");
		sql.append("    NVL(USER_PWD, '') AS USER_PWD, ");
		sql.append("    NVL(USER_NAME, '') AS USER_NAME, ");
		sql.append("	NVL(USER_EMAIL, '') AS USER_EMAIL, ");
		sql.append("	NVL(STATUS, '') AS STATUS, ");
		sql.append("    NVL(TO_CHAR(REG_DATE, 'YYYY.MM.DD HH24:MI:SS'), '') AS REG_DATE ");
		sql.append(" FROM ");
		sql.append("	TBL_USER ");
		sql.append("WHERE   USER_ID = ? ");
		
		
		try
		{
			conn = DBManager.getConnection();
			pstmt=conn.prepareStatement(sql.toString());
			
			pstmt.setString(1, userId);
			
			rs = pstmt.executeQuery();
			
			if(rs.next())
			{
				user = new User();
				user.setUserId(StringUtil.nvl(rs.getString("USER_ID")));
				user.setUserPwd(StringUtil.nvl(rs.getString("USER_PWD")));
				user.setUserName(StringUtil.nvl(rs.getString("USER_NAME")));
				user.setUserEmail(StringUtil.nvl(rs.getString("USER_EMAIL")));
				user.setStatus(StringUtil.nvl(rs.getString("STATUS")));
				user.setRegDate(StringUtil.nvl(rs.getString("REG_DATE")));
			}
		}
		catch(Exception e)
		{
			System.out.println("[UserDao] userSelect SQLException");
		}
		finally
		{
			DBManager.close(rs, pstmt, conn);
		}
		return user;
	}
	
}

이렇게까지 다구현을 했으면 실제로 아이디 입력과 비밀번호 입력이 잘 넘어가는지 index에서 jquery로 가공을 잘해줘야한다.

index jquery 가공

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

$.ajax({
	   type: "POST",
	   url: "/loginProcAjax.jsp",
	   data: {
		   userId: $("#userId").val(),
		   userPwd: $("#userPwd").val()
	   },
	   datatype: "JSON",
	   success: function(obj){
		   	if(!yeji.common.isEmpty(obj))
			{
				
			}
	   },
	   complete: function(data)
	   {
		   
	   }
	 
   });

처음에는 data부분이 어떤방식으로 넘어가는지몰라서 loginProcAjax 이부분에서 어떻게 값이 넘어가는지 제대로 이해하지못한 상태여서 오랜시간을 해맸다.

이부분을 더알아보자

ajax의 비동기방법 servlet의 이해

data로 값들이 넘겨가면 이값은 ajax의 비동기방법으로 서버에 전송이가능하다 이때 연결되는 첫번째 컴포넌트가 바로 servlet이 되는것이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

loginProcAjax 부분
String userId = HttpUtil.get(request, "userId");
	String userPwd = HttpUtil.get(request, "userPwd");
	String cookieUserId = CookieUtil.getValue(request, "USER_ID");


HttpUtil get 메소드  
public static String get(HttpServletRequest request, String name)
{
  if(name == null)
  {
    return "";
  }

  return StringUtil.nvl(request.getParameter(name)).trim();
}

이렇게 서블랫에서 request를 요청해서 ajax로 넘겼던 값들을 가져온다.

HttpServletRequest

즉 사용자가 서버쪽으로 데이터를 요청할때 사용한다.

사용되는메소드는 크게 3개만 알고있자

  1. request.getParameter
  2. request.getAtrribute
  3. request.setAttribute

HttpServletRequest

서버에서 만든 데이터를 사용자에게 넘겨줄때 사용하는 객체가 response가된다.

1
2
3
4
5
6
7
8
9
10
11

if(StringUtil.equals(user.getUserPwd(), userPwd))
				{
					//쿠키생성
					CookieUtil.addCookie(response, "USER_ID", userId);
					response.getWriter().write("{\"flag\"=0}");
				}
				else
				{
					System.out.println("아이디[" +userId + "]의 비밀번호[" +userPwd + "]가 일치 하지 않는다.");
					response.getWriter().write("{\"flag\":-1}");
				}

index jquery 가공

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

    $.ajax({
	   type: "POST",
	   url: "/loginProcAjax.jsp",
	   data: {
		   userId: $("#userId").val(),
		   userPwd: $("#userPwd").val()
	   },
	   datatype: "JSON",
	   success: function(obj){
		   console.log(obj);
       var data= JSON.parse(obj);
			 console.log(data);
	   },
	   complete: function(data)
	   {
		   
	   }
	 
   });
   
   
   
   값 {"flag"=0}
   
   값
   	{flag: 0}
    object

data의 console 을찍어주면 이렇게 문자열로 인식된 값이 나온다.

그후 JSON parse로 화면에서 오브젝트로 변경해준다.

json parse 란

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html>
<body>

<h2>Creating an Object from a JSON String</h2>

<p id="demo"></p>

<script>
const txt = '{"name":"John", "age":30, "city":"New York"}'
const obj = JSON.parse(txt);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
</script>

</body>
</html>

JSON parse 예시이다.

원래의 스트링열에서 이렇게 오브잭트로 변경한후 오브젝트에 변수를 점으로 표현하면 그에대한 값을 접근할수있게만들어준다.

그후 flag값을

  1. 비밀번호가올바르지 않습니다.
  2. 사용이 정지된아이디가입니다.
  3. 아이디와 일치하는 사용자 정보가 없습니다.
  4. 파라미터 값이 올바르지 않습니다.
  5. 그외에는 오류가발생했습니다.

이런오류값을 설정해주려면 flag값을 가공해줄수있는 스크립트가 필요하다

오브젝트 값 처리 함수

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
38
39
40
41
42
43
44
45
46

yeji.common.objectValue = function(obj, field, defVal)
	{
		if(yeji.common.isEmpty(obj) == false)
		{
			if(yeji.common.type(obj) === "object")
			{
				if(!yeji.common.isEmpty(obj[field]))
				{
					return obj[field];  
				}
				else
				{
					if(!yeji.common.isUndefined(defVal))
					{
						return defVal;
					}
					else
					{
						return null;
					}	
				}
			}
			else
			{
				if(yeji.common.isUndefined(defVal) == false)
				{	
					return defVal;
				}
				else
				{
					return null;
				}
			}
		}
		else
		{
			if(yeji.common.isUndefined(defVal) == false)
			{	
				return defVal;
			}
			else
			{
				return null;
			}
		}
	}

오브젝트에 접근해서 값이 비워있지않고 오브젝트일경우

data오브젝트의 플래그 변수명에접근해서 숫자 0 이나올것이다

단 로그인이 성공일 경우엔

index 최종

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
38
39
40
41
42
43
44
45
46
47
48
49

success: function(obj){
  if(!yeji.common.isEmpty(obj))
  {

    var data= JSON.parse(obj);
    var flag = yeji.common.objectValue(data, "flag", -500);

    if(flag == 0)
    {
      alert("로그인 성공");
    }
    else
    {
      if(flag == -1)
      {
        alert("비밀번호가 올바르지 않습니다.");
        $("#userPwd").focus();
      }
      else if(flag == -2)
      {
        alert("사용이 정지된 아이디 입니다.");
        $("#userId").focus();
      }
      else if(flag == -3)
      {
        alert("아이디와 일치하는 사용자 정보가 없습니다.");
        $("#userId").focus();
      }
      else if(flag == -100)
      {
        alert("파라미터 값이 올바르지 않습니다.");
        $("#userId").focus();
      }
      else
      {
        alert("오류가 발생했습니다.");
        $("#userId").focus();
      }
    }
  }
 },
 complete: function(data)
 {
   yeji.common.log(data);
 },
 error: function(xhr, status, error){
    yeji.common.log(error);
  alert("로그인 에러입니다");
 }

이렇게하면 최종적인 로그인 구현은 완료됬다. 마지막으로 해야할일은 로그인한후 네비게이션부분 수정이다.

이부분은 오류가있어서 수정후 다시올리겠다.

Project, basic_project
basic_project
This post is licensed under CC BY 4.0 by the author.
최근 업데이트
목차

basic_project-2. 게시물작성 구현

basic_project-4. 복습 회원가입화면 수정 화면 구현