초급의 끄적거림

[Spring] maven / AJAX 본문

Framework/Spring

[Spring] maven / AJAX

codingD 2019. 10. 16. 14:55

<교재>

 - 자체 교재 : Chapter 02~05

 - 일반 교재 : Prat2 스프링MVC설정

 

0. 프로젝트 사용 중 이름을 변경했는 refresh도 안되고 적용이 안되는 경우

  (Context Path 확인)


 - Servers/Tomcat v8.0 Server at localhost-config/server.xml 의 <Context> 태그의 Path 확인

 - 실행 시킨 서버의 각종 정보가 들어 있음

 

1. Login 만들기


 - 객체 생성 확인 : 객체 생성이 안됐을 경우, 명령어 처리가 안됨 (시작 전에 반드시 확인할 것)

  객체 생성이 안 됐을 경우, @Controller 넣었는지 확인할 것!!!

 - 결과 확인

http://localhost:8090/basicspring/login.do

 

LoginVO.java

package kr.co.basicspring.test03;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

@Controller //URL에서 요청한 명령어를 처리하는 클래스
	    //→ 스프링컨테이너 (서버)에 의해서 자동으로 객체가 생성 됨
public class LoginCont { //외부 접근을 할 수 있어야 함
	public LoginCont() {
		System.out.println("----- LoginCont() 객체 생성 됨");
	}//LoginCont() end
    
	//결과 확인
	//http://localhost:8090/basicspring/login.do
	
	//로그인이기 때문에 session 필요

	//하나의 요청 명령어당 실행의 주체는 메소드
	@RequestMapping(value="login.do", method = RequestMethod.GET)
	public String loginForm() {
    	/* prefix에 등록 된 것 → /WEB-INF/views/
		   return 받을 내용 → login/loginForm
		   → .jsp
		*/
		return "login/loginForm";
    }//loginForm() end

 

loginCont.java 

 - 사용자가 요청한 정보를 가져와서 처리하는 다양한 방법

   1-1) request로 받아오기

@RequestMapping(value = "login.do", method = ReqeustMethod.POST)
public ModelAndView loginProc(HttpServletRequest req){
	String id=req.getParameter("id");
    String pw=req.getParameter("pw");
}//loginProc() end

 

   1-2) 변수에 RequestParam 사용

@RequestMapping(value = "login.do, method = RequestMethod.POST)
public ModelAndView loginProc(@RequestParam("id"), String id,
		 	      @RequestParam("pw"), String pw_
}//loginProc() end

 

   1-3) form에 들어가는 name과 동일하게 사용

@RequestMapping(value = "login.do", method = RequestMethod.POST)
public ModelAndView loginProc(String id, String pw) {
		//form (.jsp) 에 들어가는 name과 동일해야 함
	}//loginProc() end

 

   1-4) VO로 받아오기

@RequestMapping(value = "login.do", method = RequestMethod.POST)
	public ModelAndView loginProc(LoginVO vo, HttpServletRequest req, HttpSession session) { //필요한 것들 다 선언하고 사용 가능
    	String id = vo.getId();
        String pw = vo.getPw();
        
        ModelAndView mav=new ModelAndView();
        if(id.equals("fullmoon") && pw.equals("1234")){ //id는 fullmoon으로 pw는 1234가 들어올 때 로그인 성공
        	//로그인 성공
            mav.setViewName("login/loginResult");
            session.setAttribute("s_id", id);
            session.setAttribute("s_pw", pw);
        }else{
        	//로그인 실패
            //view 페이지를 if, else로 나눠서 표현 가능
            mav.setViewName("login.msgView");
            
            req.setAttribute("msg", "<p>아이디와 비밀번호가 일치하지 않습니다.</p>");
			/* = mav.addObject("msg", "<p>아이디와 비밀번호가 일치하지 않습니다.</p>");
				 mav.addObject("link", "<a href='javascript:history.back()'>[다시 시도]</a>");
			*/
        }//if end
        return mav;
 	}//loginProc() end

 

 

2. view단


loginResult.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>loginResult.jsp</title>
</head>
<body>
	<h3>* 로그인 결과 *</h3>
	1) JSP <br>
	<%=request.getAttribute("msg") %> <br>
	아이디 (세션) : <%=session.getAttribute("s_id") %> <br>
	비밀번호 (세션) : <%=session.getAttribute("s_pw") %> <br>
	<hr>
	
	2) EL <br>
	${msg } <br>
	아이디 (세션) : ${s_id }<br>
	비밀번호 (세션) : ${s_pw }<br>	
	
</body>
</html>

 

msgView.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>msgView.jsp</title>
</head>
<body>
	<h3>* 로그인 결과 *</h3>
	${msg }
	<p>${link }</p>
</body>
</html>

 

 

 

2. 라이브러리 maven 폴더


 - maven 의존성 추가

  : 필요한 라이브러리가 있는 경우, jar 파일을 다운 받아 /WEB-INF/lib 폴더에 복사를 안해도 'pom.xml'에 라이브러리 관련 선언만으로 자동 다운로드 되어 개발의 편리성을 제공함

 - 프로젝트의 '/Maven Dependencies' 폴더를 보면 자동으로 다운로드된 라이브러리가 저장 되어 있음

 - XML 문을 지우면 jar 파일이 자동으로 삭제됨

 - maven에 라이브러리를 다운받아서 저장하면 필요할 때마다 사용 가능함

 - 만약 인터넷의 문제로 다운로드가 안되면 저장받아 놓고 꾸준히 사용 가능

 

 - Spring 관련 라이브러리 (의존성) 검색

 : https://mvnrepository.com

 

Maven Repository: Search/Browse/Explore

A custom wso2 product Last Release on Oct 13, 2019

mvnrepository.com

 2-1) Java mail 라이브러리  

필요한 라이브러리를 검색 → 원하는 라이브러리를 import 를 확인 하여 선택 → 원하는 버전에 맞춰 선택 
→ 굳이 다운 받지 않아도 dependencies 안에 들어가 있는 내용을 복사하여 붙여넣기

 

+) 직접 사이트에 가서 다운로드 받는 것

 +) 복사하여 pom.xml에 붙여 넣은 모습

+) dependencies 태그에 Java Mail 라이브러리를 추가한 후 Maven Dependencies에 추가됨

 

 2-2) File upload 라이브러리

 2-3) JSON 라이브러리

 2-4) Spring JDBC

 

 2-5) MyBatis

 2-6) MySQL 라이브러리

    - DB를 붙여야하기 때문에 필요함

 

 2-7) Oracle 라이브러리

  - DB를 붙여야하기 때문에 필요함

  - Oracle 라이브러리는 oracle에서 공개를 안해서 상세 정보도 존재 하지 않음

  - 다운로드를 하기 위해서 'Note'에 써진 곳으로 가면 되는데 종종 바뀌기 때문에 사용 전에 확인할 것

 

   -저장소 위치를 별도로 지정 해야 한다 

    → scope를 삭제 (혹은 주석처리)

    → build 태그 밖에 '라이브러리 저장소 별도 지정'

    → oracle 라이브러리를 다운 받아올 수 있는 url 인 위의 Note의 url 복사

 ★ 주의 : 현재 Note의 url이 작동하지 않기 때문에 
              https://repo.spring.io/plugins-release/    로 적어줄 것

    - 아래와 같이 'ojdbc ~' 가 maven에 생기면 됨

pom.xml 의 라이브러리가 추가된 모습

<!-- Test -->
	<dependency>
		<groupId>junit</groupId>
		<artifactId>junit</artifactId>
		<version>4.7</version>
		<scope>test</scope>
	</dependency>

	<!-- pom.xml 외부라이브러리 다운 (= 의존성 추가) -->
	<!-- 사용자가 필요한 라이브러리 다운 -->
	<!-- 시작 -->

	<!-- Java Mail 라이브러리 (원래는 해당 사이트에 가서 다운 받았었으나 Spring의 경우, https://mvnrepository.com) -->
	<dependency>
		<groupId>javax.mail</groupId>
		<artifactId>mail</artifactId>
		<version>1.4.7</version>
	</dependency>
	
    <!-- 파일업로드/다운로드 관련 라이브러리 -->
	<dependency>
		<groupId>commons-fileupload</groupId>
		<artifactId>commons-fileupload</artifactId>
		<version>1.3.3</version>
	</dependency>
	
    <!-- JSON 라이브러리 -->
	<dependency>
		<groupId>com.googlecode.json-simple</groupId>
		<artifactId>json-simple</artifactId>
		<version>1.1.1</version>
	</dependency>
	
    <!-- Spring JdbcTemplate 라이브러리 -->
	<dependency>
		<groupId>org.springframework</groupId>
		<artifactId>spring-jdbc</artifactId>
		<version>5.1.5.RELEASE</version>
	</dependency>
	
    <!-- MyBatis -->
	<dependency>
		<groupId>org.mybatis</groupId>
		<artifactId>mybatis</artifactId>
		<version>3.4.6</version>
	</dependency>
	
    <!-- MyBatis+Spring -->
	<dependency>
		<groupId>org.mybatis</groupId>
		<artifactId>mybatis-spring</artifactId>
		<version>1.3.2</version>
	</dependency>
	
    <!-- MySQL 라이브러리 -->
	<dependency>
		<groupId>mysql</groupId>
		<artifactId>mysql-connector-java</artifactId>
		<version>6.0.6</version>
	</dependency>
	
    <!-- Oracle 라이브러리 -->
	<!-- 저장소 위치를 별도로 지정해야 한다 -->
	<dependency>
		<groupId>com.oracle</groupId>
		<artifactId>ojdbc6</artifactId>
		<version>12.1.0.1-atlassian-hosted</version>
		<!-- <scope>test</scope> -->
	</dependency>
		<!-- 끝 -->
</dependencies>

.
.
.

<!-- build 태그 밖에 라이브러리 저장소를 별도로 지정 -->
	</build>
	
	<!-- 라이브러리 저장소 별도 지정 -->
	<repositories>
		<repository>
			<id>oracle</id>
			<url>https://repo.spring.io/plugins-release/</url>
		</repository>
	</repositories>
</project>

 

3. Ajax


 3-1) basicAjax 환경설정

basicAjax 프로젝트 생성 → Spring Legacy Project

<basicSpring 에서 복사 붙여넣기>
오라클 라이브러리 다운로드→ pom.xml
  ★ 주의 : build 태그 밖에 라이브러리 저장소 별도 지정 잊지 말 것 
한글필터 등록 → web.xml

 

 servlet-context

 - basicAjax/src/main/webapp/WEB-INF/spring/appServlet/servlet-context.html

 <수정내용>
1. <default-servlet-handler/> 태그 추가
2. beans:property name="prefix" 의 value="/" 수정

 - resources 대신에 사용할 css, images, js 생성(경로- basicAjax/src/main/webapp/ ~~ )

 3-2) AJAX 정의

- AJAX = Asynchronous JavaScript And XML
- 페이지 전체를 reload하지 않고 일부분만 reload 할 수 있음
- 응답 받아온 메세지를 처리하는 함수를 'callback' 함수 라고 함
- Ajax 를 사용하기 위해 js 폴더에 위의 2개 파일 복사 붙여넣기

 

webapp/member/01_ajaxTest.jsp

<페이지 단위>
idCheck.jsp → idCheckProc.jsp  : 서버에서 새로운 페이지로 응답

<AJAX 방식>
idCheck.jsp ↔ 서버에서 응답시, 요청 페이지로 응답 (갔다가 → 오는 것 ←)
 : url이 바뀌지 않고 다시 원래 요청 했던 곳으로 돌아옴
 : 서버에서 응답을 한 메세지를 받는 것 - 메소드 (= callback)

 

  - button을 눌렀을 때 반응을 확인하기 위해 alert 사용하여 확인

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01_ajaxTest.jsp</title>
</head>
<body>
<!-- 
	AJAX (Asynchronous JavaScript And XML)
	 - 페이지 전체를 reload하지 않고 일부분만 reload할 수 있다
	 - jQuery 오픈 소스 중 ajax()함수를 이용한다
	 - 응답받아온 메세지를 처리하는 함수를 callback 함수라 한다 
 -->
 <button>* 서버에서 응답받기 *</button>  <!-- '댓글 더보기' 버튼과 동일한 역할 -->
 <div id="panel"></div>
 
 <script src="../js/jquery.js"></script>
 <script>
 	$("button").click(function(){
    	//alert() ; 잘 돌아가는지 확인차 이용
        $.ajax({
            url : "test.do",		//요청명령어
            method : "get",		//get | post 방식, 아무것도 적히지 않으면 get 방식
            dataType : "text",  	//문자열
            error : function(xhr, status, error){ //callback함수, 원인 (xhr, status), ★ 에러메세지 (error)★ 제대로 답변을 받지 못한 경우 (error가 났을 때는 해줄 수 있는 것이 없음)
            	alert("에러 !! " + error);
            }, //error end
            success : function(result, status, xhr){ //★ callback함수, 성공한 경우 메세지 (result), 제대로 답변을 받은 경우
            	//1) alert(result);
                //2)
                $("#panel").append(result);
            }//success end
        }); //ajax() end
    }) //click() end - button을 클릭하면 function 으로 가라
 </script>
</body>
</html>

 

AjaxTestCont.java

  basicAjax/src/main/java/kr.co.form1.test01.AjaxTestCont.java

package kr.co.form1.test01;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class AjaxTestCont {
	public AjaxTestCont() {
		System.out.println("-----AjaxTestCont() 객체 생성 됨");
	}//AjacTestCont() end
	
	@RequestMapping("/member/test.do")
	public void ajaxTest(HttpServletRequest req, HttpServletResponse resp) {
    	try{
        	resp.setContentType("text/plain; charset=UTF-8");  //01_ajaxTest.jsp 1행의 contentType 내용 복사  html→plain 으로 수정 (평범한 문자열이라는 의미)
			PrintWriter out = resp.getWriter();
			out.println("서버에서 응답해 준 메세지 : ");
			out.println("호텔 델루나");
			out.flush();   //재 버퍼에 저장되어 있는 내용을 클라이언트로 전송하고 버퍼를 비운다. (깔끔하게 만듦)
			out.close();  //외부랑 연결된 자원 닫기
        }catch(Exception e){
        	System.out.println("응답 실패 : "+ e);
        }//try end
    }//ajaxTest() end
}//class end    

 

1) alert를 이용해서 잘 전달 받아서 메세지가 드러나는지 확인

 2) 받을 때마다 나타나게 변경

  - '서버에서 응답받기' 버튼을 누를 때마다 결과값이 나타남 

  - '더보기'를 누를 때마다 댓글이 나타나는 원리와 동일

Comments