여태까지 작업을 해왔다면 아마 js/html/css 또는 이미지 파일등의 확장자가 존재하는 

리소스 파일들은 웹페이지에 뿌려지지 않을것이다.

임의로 controller호출을 통하여 웹페이지를 하나 띄워보도록 하겠음.

@RequestMapping(value="/resourceTest")
public String resourceTest(){
    	return "resourceTest";
}

다음으로 return 문자열과 동일한 resourceTest.jsp를 WEB-INF -> view 디렉토리내에 생성하고 다음과 같이 body태그내에 img태그를 추가해보자

<img  src="/test.png" width="100" height="100" />

이미지는 아무이미지 파일로 해서 webapp디렉토리 내에 넣고 확인해보면 다음과 같이 이미지 화면이 깨질것이고 콘솔에 No mapping found~~~~ 라는 경고문구가 뜰것임

이부분을 해결하기위하여 다음과같이 코드를 mvc-config.xml 에 추가해주도록 하자

<mvc:resources mapping="/resources/**" location="/resources/" />

저렇게 코드를 추가해주었다면 webapp밑에 resources라는 디렉토리를 하나생성후, 아까 깨진 이미지를 해당 폴더로 옮겨주도록 하자

추가해주고 물론, jsp페이지의 이미지 태그 경로를 변경하는거 잊지 말기로 하자.

실행 화면을 보도록 하자

출력이 잘되었다. 

쉽게 생각해서 확장자가 존재하는 놈들은 resources 디렉토리내에 모두 넣어주면 사용이 가능하다!!

물론 꼭 resources디렉토리가 아니여도된다 xml명칭에 맞춰서 경로명을 변경해주면 될듯...

★ 추가로 favicon.ico 를 등록을 할때역시 mvc:resources로 설정을 잡아주면 될것이다.

    webapp 디렉토리 바로밑에 favicon.ico 라는 아이콘을 넣어주고 다음과 같이 잡아주면 된다.

<mvc:resources mapping="/favicon.ico" location="/favicon.ico" />

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!

지난 포스팅에 이어서 service 영역에 트랜잭션 처리를 하고자 한다.

2014/07/23 - [스프링연동하기/spring3 mybatis 설정] - 스프링(Spring)3 - mybatis 연동(1)

@transactional인가 어노테이션으로 트랜잭션을 주는 방식도 있긴하지만, xml 설정을 함으로

service영역에서의 트랜잭션 처리를 하고자한다.

현재 방식으로 insert 쿼리 여러개를 선언하고 중간에 오류를 발생시키면 오류나기 전에 있던 

데이터들은 insert가 되어진다.

이부분을 막고자 트랜잭션설정을 주려고 한다.

뭐 트랜잭션 신경 안쓰시려고는 분들은 이번 포스팅을 넘기셔도 무관함..

<dependency>
	<groupId>aspectj</groupId>
	<artifactId>aspectjweaver</artifactId>
	<version>1.5.3</version>
</dependency>
<dependency>
	<groupId>cglib</groupId>
	<artifactId>cglib-nodep</artifactId>
	<version>2.1_3</version>
</dependency>

수정전

<context:component-scan base-package="com.spring.web"/>

수정 후

<context:component-scan base-package="com.spring.web" use-default-filters="false">
    <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller" />
</context:component-scan>

이어서 application-config.xml에 내용 추가 및 수정을 해주도록 하자 

<beans xmlns="http://www.springframework.org/schema/beans" 
	   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	   xmlns:aop="http://www.springframework.org/schema/aop"
	   xmlns:tx="http://www.springframework.org/schema/tx"
	   xmlns:context="http://www.springframework.org/schema/context"
	   xsi:schemaLocation="	http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
						   	http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd
						   	http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd
						    http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd">

aop 부분과 tx 부분만 추가 되었다.

 <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
       <property name="dataSource" ref="dataSource"/>
</bean>

<aop:config proxy-target-class="true">
	<aop:pointcut id="serviceOperation" expression="execution(public * com.spring.web..service.*Service.*(..))" />
	<aop:advisor id="transactionAdvisor" pointcut-ref="serviceOperation" advice-ref="txAdvice"/>
</aop:config>
	
<tx:advice id="txAdvice" transaction-manager="transactionManager">
	<tx:attributes>
		<tx:method name="save*" rollback-for="Exception"/>
		<tx:method name="update*" rollback-for="Exception"/>
		<tx:method name="remove*" rollback-for="Exception"/>
	</tx:attributes>
</tx:advice>

위와같이 해주었다면 트랜잭션 설정이 모두 마무리가 되었다.

임의의 테이블을 만들고 트랜잭션 테스트를 해보도록 하자

※ mysql 경우 table type이 innodb여야 트랜잭션처리가 적용이된다.

CREATE TABLE `test` (
  `test_column` varchar(5) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8

테이블 생성이 완료 되었다면 이제는 클래스에 controller/service/dao를 추가해주도록 하자

지난 포스팅에는 그냥 web내부에 controller/dao 패키지를 생성하였는데

web 패키지에 추가로 새로운 패키지를 생성하여 내부에 controller/service/dao를 작성하도록 하겠음.

패키지 구성은 다음과 같음.

다음구조와 같이 만들었다면 controller/service/dao 부분에 대하여 샘플 코드를 작성하도록 하자

@Controller
public class TestController {
	
    @Autowired
    private TestService service;
    
    @RequestMapping(value="/saveQuery")
   	public void saveQuery(){
    	try {
    		service.saveQuery();	
		} catch (SQLException e) {
			e.printStackTrace();
		}
    	
   	}
}

@Service
public class TestService {
	@Autowired
	private TestDao dao;

	public void saveQuery() throws SQLException {
		Map<String, String> map = null; 
		map = new HashMap<String, String>();
		map.put("test", "123");
		dao.saveQuery(map);
		map = new HashMap<String, String>();
		map.put("test", "1231111111111111");
		dao.saveQuery(map);
		map = new HashMap<String, String>();
		map.put("test", "123");
		dao.saveQuery(map);
	}
}

@Repository
public class TestDao {

	@Autowired
	private SqlSession sql;
	
	public void saveQuery(Map<String, String> map) throws SQLException {
		sql.insert("sql.saveQuery",map);
		
	}
}

마지막으로 sql.xml에 insert 쿼리 하나를 작성해주도록 하자

<insert id="saveQuery" parameterType="java.util.Map">
		INSERT INTO test VALUES(#{test})
</insert>

위의 로직상 설명을 한다면 return 타입은 없어서 우선적으로 웹페이지는 뜨지 않을것이다.

그리고 service 부분에 총 3번의 dao를 호출하는데 test 테이블의 test_column 컬럼의 제한수가 

총 5글자가 들어갈수 있다.

즉, 첫번째 insert는 정상적으로 테이블에 등록되고 두번째 insert에는 exception이 발생하여 

에러를 웹이랑 콘솔에 뿜을것이다.

그리고는 테이블에 데이터가 등록되지 않은것을 확인 하였다면 정상적으로 트랜잭션 처리가 된것임.

<tx:method name="abc*" rollback-for="Exception"/>

간혹가다가 트랜잭션 처리가 안될경우 mvc-config.xml 에 다음처럼 aop 추가를 해주도록 하자

<aop:config proxy-target-class="true">
	<aop:pointcut id="controllerOperation" expression="execution(public * com.spring.web..controller.*Controller.*(..))" />
</aop:config>

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!

아 이놈때문에 반나절 삽질한듯... -_-

일반 싱글 이미지업로드는 성공하였는데 html5 드래그앤드롭에서 삽질시작... 

에디터샘플소스에 이미지 업로드 관련 php 소스는 있지만 java/jsp 소스가 없는거 같아 포스팅 

하도록 한다.

싱글/멀티 이미지 업로드 모두포스팅 하였음!!!

이건 단순 출력물을 뽑기위해 대충 코딩 한것이므로 정리는 알아서들 하시길... ㅜ.ㅜ

스프링으로 파일처리는 쉬운대... ㅠㅠ jsp로 간만에 하려니ㅋㅋ gg.....

우선 지난 포스팅에 이어서 에디터 우측상단을 보게 된다면 사진이라는 버튼이 존재할 것임. 

2014/07/17 - [에디터연동/NAVER-스마트에디터] - 네이버의 스마트에디터를 연동해보고 서버에 내용을 전달해보자

각 브라우저별로 버튼 클릭시 업로드 기능에 대한 유형이 틀리다.

IE11 미만 버전에서는  싱글 멀티파트 업로드화면을 출력시키고

IE11, 크롬, 사파리 등에서는 드래그앤드롭기능으로 멀티파일 업로드(드래그앤드롭) 폼을 출력

시킨다.

commons-fileupload-1.2.2.jar

commons-io-1.4.jar

위 jar파일들을 lib 폴더에 넣도록 하자 

maven 이용자은 dependency 추가하자 (버전은 알아서 맞추자..)

<dependency>
	<groupId>commons-fileupload</groupId>
	<artifactId>commons-fileupload</artifactId>
	<version>1.3.1</version>
</dependency>
<dependency>
	<groupId>commons-io</groupId>
	<artifactId>commons-io</artifactId>
	<version>2.4</version>
</dependency>

spring 사용자는 파일처리를 위해 멀티파트 빈을 등록하면 될것이고...

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" />

이걸로 파일업로드 기초공사는 끝났으니... 에디터 디렉토리 -> photo_uploader -> popup 

디렉토리내의 소스 2가지를 수정해주도록 하자

   해당 form의 action은 무의미 한듯 -_- action="xxxxx" 자체를 삭제!

<form id="editor_upimage" name="editor_upimage" action="FileUploader.php" method="post" enctype="multipart/form-data" onSubmit="return false;>

  변경함수  :  callFileUploader() , html5Upload()

 첫번째로 싱글파일 업로드를 먼저 처리 하도록 하자

 관련 함수는 callFileUploader() 함수이다.

 변경 속성은  sUrl, sCallback이다

 본인은 WebContent경로 바로 밑에 file_uploader.jsp 를 생성하였다.

 위 jsp에 대한 내용은 하단에 기술하도록 하겠음...

 기존 file_uploader.php -> jsp로 변경만 한것뿐이다.

callback.html은 editor -> photo_uploader -> popup -> callback.html 의 경로를 절대경로로 

지정해줌

두가지 속성값을 하단처럼 변경함 

sUrl  : '/file_uploader.jsp',	//샘플 URL입니다.
sCallback : '/editor/photo_uploader/popup/callback.html',	//업로드 이후에 iframe이 redirect될 콜백페이지의 주소

다음으로 멀티이미지업로드를 위해 html5Upload() 함수내의 변수값 변경을 하도록 하자

헤더에 정보를 담는거 같은대 .. -0- 그냥 분석까지는 하기 싫으므로 

sUploadURL= 'file_uploader_html5.php'; 	//upload URL

이부분의 url을 jsp로 변경하도록 하자

sUploadURL= '/file_uploader_html5.jsp'; 	//upload URL

물론 file_uploader_html5.jsp로 WebContent 하단에 파일 생성함

오예 이제 jsp 코드 2개만 작성하면 끝난다!! 

간단하지 않은가~~~ 

import 클래스는 다음과 같다.

<%@page import="java.io.FileOutputStream"%>

<%@page import="java.io.OutputStream"%>

<%@page import="java.io.InputStream"%>

<%@page import="java.util.UUID"%>

<%@page import="java.text.SimpleDateFormat"%>

<%@page import="java.io.File"%>

<%@page import="org.apache.commons.fileupload.FileItem"%>

<%@page import="java.util.List"%>

<%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>

<%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>

String return1="";
String return2="";
String return3="";
//변경 title 태그에는 원본 파일명을 넣어주어야 하므로
String name = "";
if (ServletFileUpload.isMultipartContent(request)){
	ServletFileUpload uploadHandler = new ServletFileUpload(new DiskFileItemFactory());
	uploadHandler.setHeaderEncoding("UTF-8");
	List<FileItem> items = uploadHandler.parseRequest(request);
	for (FileItem item : items) {
		if(item.getFieldName().equals("callback")) {
			return1 = item.getString("UTF-8");
		} else if(item.getFieldName().equals("callback_func")) {
			return2 = "?callback_func="+item.getString("UTF-8");
		} else if(item.getFieldName().equals("Filedata")) {
			if(item.getSize() > 0) {
				//String name = item.getName().substring(item.getName().lastIndexOf(File.separator)+1);
                // 기존 상단 코드를 막고 하단코드를 이용
                name = item.getName().substring(item.getName().lastIndexOf(File.separator)+1);
				String filename_ext = name.substring(name.lastIndexOf(".")+1);
				filename_ext = filename_ext.toLowerCase();
			   	String[] allow_file = {"jpg","png","bmp","gif"};
			   	int cnt = 0;
			   	for(int i=0; i<allow_file.length; i++) {
			   		if(filename_ext.equals(allow_file[i])){
			   			cnt++;
			   		}
			   	}
			   	if(cnt == 0) {
			   		return3 = "&errstr="+name;
			   	} else {
			   		
			   		//파일 기본경로
		    		String dftFilePath = request.getServletContext().getRealPath("/");
		    		//파일 기본경로 _ 상세경로
		    		String filePath = dftFilePath + "editor" + File.separator +"upload" + File.separator;
		    		
		    		File file = null;
		    		file = new File(filePath);
		    		if(!file.exists()) {
		    			file.mkdirs();
		    		}
		    		
		    		String realFileNm = "";
		    		SimpleDateFormat formatter = new SimpleDateFormat("yyyyMMddHHmmss");
					String today= formatter.format(new java.util.Date());
					realFileNm = today+UUID.randomUUID().toString() + name.substring(name.lastIndexOf("."));
					
					String rlFileNm = filePath + realFileNm;
					///////////////// 서버에 파일쓰기 ///////////////// 
					InputStream is = item.getInputStream();
					OutputStream os=new FileOutputStream(rlFileNm);
					int numRead;
					byte b[] = new byte[(int)item.getSize()];
					while((numRead = is.read(b,0,b.length)) != -1){
						os.write(b,0,numRead);
					}
					if(is != null) {
						is.close();
					}
					os.flush();
					os.close();
					///////////////// 서버에 파일쓰기 /////////////////
		    		
		    		return3 += "&bNewLine=true";
                                // img 태그의 title 옵션에 들어갈 원본파일명
		    		return3 += "&sFileName="+ name;
		    		return3 += "&sFileURL=/editor/upload/"+realFileNm;
			   	}
			}else {
				  return3 += "&errstr=error";
			}
		}
	}
}
response.sendRedirect(return1+return2+return3);

하단은 멀티이미지업로드를 위한 샘플 코드이다 

import 클래스는 다음과 같다.

<%@page import="java.io.*"%>

<%@page import="java.util.UUID"%>

<%@page import="java.text.SimpleDateFormat"%>

//파일정보
String sFileInfo = "";
//파일명을 받는다 - 일반 원본파일명
String filename = request.getHeader("file-name");
//파일 확장자
String filename_ext = filename.substring(filename.lastIndexOf(".")+1);
//확장자를소문자로 변경
filename_ext = filename_ext.toLowerCase();
	
//이미지 검증 배열변수
String[] allow_file = {"jpg","png","bmp","gif"};

//돌리면서 확장자가 이미지인지 
int cnt = 0;
for(int i=0; i<allow_file.length; i++) {
	if(filename_ext.equals(allow_file[i])){
		cnt++;
	}
}

//이미지가 아님
if(cnt == 0) {
	out.println("NOTALLOW_"+filename);
} else {
//이미지이므로 신규 파일로 디렉토리 설정 및 업로드	
//파일 기본경로
String dftFilePath = request.getServletContext().getRealPath("/");
//파일 기본경로 _ 상세경로
String filePath = dftFilePath + "editor" + File.separator +"multiupload" + File.separator;
File file = new File(filePath);
if(!file.exists()) {
	file.mkdirs();
}
String realFileNm = "";
SimpleDateFormat formatter = new SimpleDateFormat("yyyyMMddHHmmss");
String today= formatter.format(new java.util.Date());
realFileNm = today+UUID.randomUUID().toString() + filename.substring(filename.lastIndexOf("."));
String rlFileNm = filePath + realFileNm;
///////////////// 서버에 파일쓰기 ///////////////// 
InputStream is = request.getInputStream();
OutputStream os=new FileOutputStream(rlFileNm);
int numRead;
byte b[] = new byte[Integer.parseInt(request.getHeader("file-size"))];
while((numRead = is.read(b,0,b.length)) != -1){
	os.write(b,0,numRead);
}
if(is != null) {
	is.close();
}
os.flush();
os.close();
///////////////// 서버에 파일쓰기 /////////////////

// 정보 출력
sFileInfo += "&bNewLine=true";
//sFileInfo += "&sFileName="+ realFileNm;;
// img 태그의 title 속성을 원본파일명으로 적용시켜주기 위함
sFileInfo += "&sFileName="+ filename;;
sFileInfo += "&sFileURL="+"/editor/multiupload/"+realFileNm;
out.println(sFileInfo);
}

이걸로 에디터 + 이미지 업로드 연동 끝!!! 

spring framework는 좀더 심플한대.... 연동 성공하시길 빌겠습돠~ 

실행동작을 보고 스마트에디터 연동은 이걸로 끝~

아하~ 잘 연동되는것이 확인되었다 ^^

이번 포스팅은 spring과 mybatis db 연동을 해볼 예정임

maven에 익숙치 않아서인지 삽질좀 한듯 -0-ㅋㅋㅋ

<!-- add maven -->
<dependency>
	<groupId>org.mybatis</groupId>
	<artifactId>mybatis</artifactId>
	<version>3.2.7</version>
</dependency>
<dependency>
	<groupId>org.mybatis</groupId>
	<artifactId>mybatis-spring</artifactId>
	<version>1.2.2</version>
</dependency>
<dependency>
	<groupId>commons-dbcp</groupId>
	<artifactId>commons-dbcp</artifactId>
	<version>1.4</version>
</dependency>
<dependency>
	<groupId>mysql</groupId>
	<artifactId>mysql-connector-java</artifactId>
	<version>5.1.31</version>
</dependency>
<dependency>
	<groupId>org.springframework</groupId>
	<artifactId>spring-jdbc</artifactId>
	<version>${spring-framework.version}</version>
</dependency>

<context:component-scan base-package="com.spring.web"/>
<bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close">
        <property name="driverClassName" value="com.mysql.jdbc.Driver" />
        <property name="url" value="jdbc:mysql://localhost:3306/db명" />
        <property name="username" value="아이디" />
        <property name="password" value="패스워드" />
</bean>
<!-- SESSIONFACTORY 설정 -->
 <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource" />
        <!-- ibatis와 다르게 sql디렉토리에 xml 추가만 해주면 별도추가없이 알아서 xml내의 쿼리 인식 -->
        <property name="mapperLocations" value="classpath*:sql/**/*.xml" />
 </bean>
 <bean id="sqlSession" class="org.mybatis.spring.SqlSessionTemplate">
        <constructor-arg ref="sqlSessionFactory" />
 </bean>

sql.xml

@Autowired
private SpringDao dao;
	
@RequestMapping("/queryTest")
public void queryTest(){
		try {
			ArrayList<Map<String, Object>> list = dao.queryTest();
			if(list != null && list.size() > 0){
				for(Map<String, Object> map : list) {
					Set key = map.keySet();
					  for (Iterator iterator = key.iterator(); iterator.hasNext();) {
					                   String keyName = (String) iterator.next();
					                   String valueName = (String) map.get(keyName);
					   
					                   System.out.println(keyName +" = " +valueName);
					  }
				}
			}
		} catch (SQLException e) {
			System.out.println(e.toString());
		}
}

package com.spring.web.dao;

import java.sql.SQLException;
import java.util.ArrayList;
import java.util.Map;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

@Repository
public class SpringDao {
	
	@Autowired
	private SqlSession sql;
	
	@SuppressWarnings("unchecked")
	public ArrayList<Map<String, Object>> queryTest() throws SQLException {
		return (ArrayList)sql.selectList("sql.queryTest");
	}
}

이걸로 jdbc 연동이 끝났다.

완전 심플하지 않은가~~!! 

물론 transaction 처리는 제외한 예제이다

위 소스를 실행후 웹페이지에 화면은 나오지 않을것이다.

Console에서 다음 하단 그림과 같이 값이 찍혀 나온다면 정상적으로 출력된다면 db연동은 끝~~

원래는 interface 만들고 implements 받고 해야하는데 귀찮음..

그냥 심플하게 연동만 해보는것임  

다음 포스팅은 transaction 관한 설정을 해보도록 하겠음!!

이번 포스팅에서는 웹소스에서 서버로 파일 전송을 위한 작업을 진행하기로 하겠음.

우선 파일업로드에 필요한 jar라이브러리를 추가하도록 하자

<dependency>
	<groupId>commons-fileupload</groupId>
	<artifactId>commons-fileupload</artifactId>
	<version>1.3.1</version>
</dependency>
<dependency>
	<groupId>commons-io</groupId>
	<artifactId>commons-io</artifactId>
	<version>2.4</version>
</dependency>

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" />

이제 파일처리에 대한 준비과정은 끝이 났다.

@RequestMapping("/formFile")
public String formFile(){
	return "formFile";
}

<form action="/requestFile" method="post" enctype="multipart/form-data">
	<input type="file" name="file" />
	<input type="submit" value="서버전달"/>
</form>

private MultipartFile file;
public MultipartFile getFile() {
	return file;
}
public void setFile(MultipartFile file) {
	this.file = file;
}

@RequestMapping("/requestFile")
public void requestFile(RequestModel model){
	System.out.println("파일명:"+model.getFile().getOriginalFilename());
	System.out.println("파일사이즈:"+model.getFile().getSize());
}

만약 console에 오류가 발생한다면 pom.xml -> Run As -> Maven Install 실행한번 해주도록 

합시다.

자, 이제 url 호출 후, 파일첨부 후 콘솔로 파일정보를 확인해보도록 하겠다.

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!