Programing/Java & Spring

Spring MVC를 이용하여 웹 페이지 제작 vo3 : Json File을 연결한 후 view(jsp)를 이용하여 확인해보자.

세기루민 2021. 1. 12. 21:40
728x90

 

 

sg-moomin.tistory.com/45

 

Spring MVC를 이용하여 웹 페이지 제작 vo2 : spring 초기 설정을 해보자

sg-moomin.tistory.com/44 Spring MVC를 이용하여 웹 페이지 제작 vo1 : Spring MVC을 이해하자 우선 Spring Mvc를 이용해서 웹 페이지를 만드는 걸 주로 했는데 기록으로 남긴건 항상 포토폴리오를 제외하고는 없

sg-moomin.tistory.com

우선 초기 셋팅까지 저번 포스팅에서 진행이 완료됬는데 

혹시나 궁금하다면 위에 포스팅을 참고하는걸 추천합니다.

 


우선 현재 그림은 기본 셋팅을 하는 과정에서 제가 하려는 방식을 그림으로 표현해봤습니다. 

저번 포스팅에서는 tomcat을 연동까지 진행을 했는데 

Index.Jsp부터 진행을 해보도록 하죠 


index.jsp라는 페이지를 생성합니다.

이유는? 처음에 프로젝트를 실행 시 내가 지정하는 .do로 위치 시키기 위해서 만들어 줍니다.

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<c:redirect url="/moomin/main.do"/>
</body>
</html>

바로 redirect를 이용해서 해당 /moomin/main.do로 연결해줍니다.

이렇게 하면 처음 시작을 했을 때 moomin/main.do에서 실행이 됩니다. 

폴더의 위치는!

WebContent 아래에 생성해주면 됩니다. 

우선 여기까지 진행이 된다면 main.do에서 실행이 될것입니다. 


Spring MVC를 이용하게 되면 

Controller -> Service -> Stroe(DAO) 구조로 데이터를 주고 받게 되는데 

여기서 Store와 연결을 하는 방법은 다양합니다. 

JDBC, Mybatis, Json File 등

저는 Json File을 이용해봤고 오늘 포스팅에서는 연동까지 진행했습니다. 

간단하게 데이터만 입출력하는 걸로 진행했습니다. 

소스 구조는 위에 보이는것처럼 구성했습니다. 

Controller -> Service -> Store로 구성했습니다.

우선 main.jsp부터 시작해보죠!


main.jsp 

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<html>
<head>
<meta charset="EUC-KR">
<title>sg-moomin</title>
</head>
<body>
<div class="card-body">
	<div class="table-responsive">
		<table class="table table-bordered" id="dataTable" width="100%"
			cellspacing="0">
			<thead>
				<tr>
					<td class="border-0" id=title>이름</td>
					<td class="border-0" id=title>나이</td>
					<td class="border-0" id=title>전화번호</td>
					<td class="border-0" id=title>이메일</td>
				</tr>
			</thead>
			<tbody>
				<c:forEach var="list" items="${JsonData}">
					<tr>
						<td class="text-center">${list.userName}</td>
						<td class="text-center">${list.age }</td>
						<td class="text-center">${list.userNumber}</td>
						<td class="text-center">${list.email }</td>
					</tr>
				</c:forEach>
			</tbody>
		</table>
	</div>
</div>
</body>
</html>

우선은 디자인은 안입힌 상태입니다.

추후에 Bootstrap을 입힐 예정입니다. 

우선은 forEach를 이용해서 Controller에서 받아온 데이터가 있는 만큼 출력해줍니다. 

참고로 forEach를 이용하기 위해서는 c tag를 사용해야하는데 

위에 꼭 추가해줘야 합니다! 


mainController.java

package controller;

import java.io.IOException;
import java.util.ArrayList;

import org.json.simple.parser.ParseException;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import domain.user;
import service.userService;

@Controller
@RequestMapping("moomin")
public class mainController {

	@Autowired
	private userService user;
	
	@RequestMapping(value = "main.do", method= RequestMethod.GET)
		public String main(Model model) throws IOException, ParseException {
		ArrayList<user> userJsonList = new ArrayList<user>();
		userJsonList = user.selectJsonUser();	
		model.addAttribute("JsonData", userJsonList);
	
		return "main/main";
	}
	
}

main Controller에서는 store에서 넘겨주는 데이터를 받아서 jsp로 넘겨주는데 

넘길 땐 model을 이용해서 넘겨주게 됩니다.

어노테이션은 꼭 써줘야하는데 

Controller 역할을 하기 때문에 @Controller!

moomin이라고 url로 맵핑할 수 있도록 @RequestMapping!

상황에 알맞게 beans를 자동으로 주입할 수 있도록 @Autowired!

위에 3가지는 상황에 알맞게 꼭 작성해줘야 합니다.


user.java

package domain;

public class user {

	public String userName;
	public String userNumber;
	public String email;
	public int age;
	
	
	public String getUserName() {
		return userName;
	}
	public void setUserName(String userName) {
		this.userName = userName;
	}
	public String getUserNumber() {
		return userNumber;
	}
	public void setUserNumber(String userNumber) {
		this.userNumber = userNumber;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	
	
}

user 도메인을 생성해줍니다. 

도메인을 생성하는 이유는 진짜 단순하게 추후에 객체를 사용하기 위함이라고 보면 됩니다. 


userService.java

package service;

import java.io.IOException;
import java.util.ArrayList;

import org.json.simple.parser.ParseException;

import domain.user;

public interface userService {

	public ArrayList<user> selectJsonUser() throws IOException, ParseException ;

}

 

우선 Service 구조에서 userService interface를 생성해줍니다.

참고로 interface를 안만들고 구성해도 무관합니다!

생성한 인터페이스는 logic에서 implements하여 사용하면 됩니다. 

현재는 연결을 확인하기 위한 select에 대한 메소드를 생성해줍니다.

 

 userServiceLogic.java

package service.logic;

import java.io.IOException;
import java.util.ArrayList;

import org.json.simple.parser.ParseException;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import domain.user;
import service.userService;
import store.userJson;

@Service
public class userServiceLogic implements userService{

	@Autowired
	private userJson userJ;
	
	@Override
	public ArrayList<user> selectJsonUser() throws IOException, ParseException {
		return userJ.selectJUser();
	}

}

 

Logic에서는 결과를 처리하거나 store로부터 데이터를 받아오는데 

현재는 계산이 필요없기 때문에 store에서 값을 반환해옵니다. 

추가적으로 꼭 적어줘야 하는 어노테이션이 있는데 

@Serivce 어노테이션은 필수입니다. 

이유는 해당 logic의 역할으 service 로직 역할을 하고 있다고 알려줘야 하기 때문이죠 

 


userStore.java

package store;

import java.io.IOException;
import java.util.ArrayList;

import org.json.simple.parser.ParseException;

import domain.user;

public interface userJson {

	public ArrayList<user> selectJUser() throws IOException, ParseException;
	public String insertUser() throws IOException ;
}

Store도 동일하게 interface를 생성해줍니다. 

현재 여기서는 insert / select 2개를 만들어줬습니다. 

userStoreLogic.java

@Repository
public class userJsonLogic implements userJson{
	
	File file = new File("자신이 json을 생성하려는 위치로 생성");
	JSONParser jsonParser = new JSONParser();
	
	
	public ArrayList<user> selectJUser() throws IOException, ParseException{
		ArrayList<user> userList = new ArrayList<user>();
		FileInputStream  fileInputStream = new FileInputStream(file);
		InputStreamReader inputStreamReader = new InputStreamReader(fileInputStream, "MS949");
		BufferedReader bufferedReader = new BufferedReader(inputStreamReader);

		
		JSONObject jsonObject = (JSONObject) jsonParser.parse(bufferedReader);
		
		Iterator<String> iter = jsonObject.keySet().iterator();

			user userObject = new user();
			String age = (String)jsonObject.get("age");
			userObject.setUserName((String)jsonObject.get("name"));
			userObject.setUserNumber((String)jsonObject.get("number"));
			userObject.setEmail((String)jsonObject.get("email"));
			userObject.setAge(Integer.parseInt(age));
			userList.add(userObject);
			System.out.println("1");
		
		
		return userList;
	
	}
	
	public String insertUser() throws IOException {
		
		JSONObject jsonDAO = new JSONObject();
		jsonDAO.put("name", "sg-moomin.tistory.com");
		jsonDAO.put("number", "010-1146-8954");
		jsonDAO.put("email", "lumingin12@tistory.com");
		jsonDAO.put("age", "27");
		
		
		FileOutputStream fileOutputStream = new FileOutputStream(file);
		OutputStreamWriter OutputStreamWriter = new OutputStreamWriter(fileOutputStream, "MS949");
		BufferedWriter bufferedWriter = new BufferedWriter(OutputStreamWriter);
		
		bufferedWriter.write(jsonDAO.toString());
		bufferedWriter.flush();
		bufferedWriter.close();
		
		return jsonDAO.toString();
	}

	
}

 

우선 inserUser를 먼저 보면!

결과에서 보여준 값을 그대로 넣어줬습니다 

위에 보이는 것처럼 json 형태로 데이터가 생성됩니다. 

JsonObject를 생성해서 해당 json 객체에 값을 넣어주고 

FileOutPutStream -> OutputStreamWriter -> BufferedWriter 순서로 파일을 만들어줍니다. 

위의 경우 이렇게 안만들고 fileWriter로 만들어도 됩니다.

그렇지만 저의 경우 발생했던 오류가 있었는데 

nested exception is Unexpected token END OF FILE at position 0.

바로 인코딩이 안되서 생기는 문제가 있었습니다.

그래서 저는 오류를 해결하기 위해서 이렇게 파일을 생성해줬습니다. 

selectJUser에서는 File에 있는 값을 불러와서 userList에 데이터를 추가하는 코드를 구성했습니다.

위의 코드에서 조금 수정해야 하는 부분이 존재하는데 

우선적으로 데이터가 1개가 아니기 때문에 반복문을 이용해서 호출해줘야 합니다. 

따라서 iterator를 이용해야하는데 

데이터 반복문 돌리는 과정에서 무한루프에 걸리는 상황이 발생해서 

그 부분은 추후 포스팅에서 다루도록 하겠습니다. 

우선적으로 위의 코드처럼 작성하게 되면 jsp에 값을 출력되는 걸 확인할 수 있습니다. 


오늘 포스팅은 여기까지! 

우선적으로 controller -> service(interface) -> serviceLogic -> store(interface) -> storeLogic(Json)로 구성했습니다. 

원래는 mybatis로 구성할까 고민했는데 

file 입출력으로 해보는것도 괜찮을꺼 같아서 진행해봤습니다. 

포스팅을 최대한 빠르게 하고싶은데...ㅠㅠ

직접 완성을 시킨 후 포스팅을하는거라 조금 늦을 수 있다는 점 ㅠㅠ 

그래도 다음 포스팅에서는 최대한 좋은 내용으로 찾아오겠습니다! 

 

728x90