✔구현 목표
전자정부프레임워크 3.1 환경에서 jsp 및 spring을 통한 게시판 기본구성
✔목표 기능
게시판 읽기
- 10개씩 페이징 하여 게시판 읽기
- 게시판 상세보기
게시판 쓰기
- 게시판 작성 기능
- 게시판 수정 기능
게시판 삭제
- 게시판 삭제 기능
위처럼 상당히 기본적인 기능들만 몇가지를 구현하며, 기본적인 spring-jsp 동작 구성을 확인 및 테스트해보았다.
✔tiles
vue 구성시 가장 인상깊었던 기능이라고 하면, App.vue을 통하여 router-view를 통한 페이지의 모듈화였다.
jsp에서는 위와같은 구성이 불가능할까? include를 통한 접근도 해보았지만, tiles를 통한 구성이 해당기능과 가장 유사하다 여겨 해당기능을 통해 페이지를 구성하였다.
기본 구성
pom.xml
<!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-jsp -->
<dependency>
<groupId>org.apache.tiles</groupId>
<artifactId>tiles-jsp</artifactId>
<version>3.0.8</version>
</dependency>egov-com-sevlet.xml (context-servlet.xml 등 설정파일)
<bean id="urlBasedBiewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver">
<property name="viewClass" value="org.springframework.web.servlet.view.tiles3.TilesView"/>
<property name="order" value="0"/>
</bean>
<bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
<property name="definitions">
<list>
<value>/WEB-INF/config/springmvc/tiles.xml</value>
</list>
</property>
</bean>tiles.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN" "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
<tiles-definitions>
<definition name="default_main"
templateExpression="/WEB-INF/jsp/layout.jsp">
<put-attribute name="css"
expression="/WEB-INF/jsp/tiles/css.jsp" />
<put-attribute name="script"
expression="/WEB-INF/jsp/tiles/script.jsp" />
<put-attribute name="header"
expression="/WEB-INF/jsp/tiles/header.jsp" />
<!-- <put-attribute name="footer"
expression="/WEB-INF/jsp/tiles/footer.jsp" /> -->
</definition>
<!-- tiles 사용하여 화면에 표현 -->
<definition name=".tiles/*" extends="default_main">
<put-attribute name="body"
value="/WEB-INF/jsp/{1}.jsp" /> <!-- controller에서 사용하기 위한 방법을 설정 -->
</definition>
</tiles-definitions>
layout.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<tiles:insertAttribute name="css" />
<tiles:insertAttribute name="script" />
</head>
<body>
<tiles:insertAttribute name="header" />
<div id="content">
<div class="page-contentinbe">
<tiles:insertAttribute name="body" />
</div>
</div>
</body>
</html>Controller.java
@GetMapping("/write")
public String goWrite() {
LOGGER.info("/write");
return ".tiles/write";
}✔resources
header.jsp
<div id="header">
<div class="logo">
<a href="/nicc">
<img src="resources/img/nicclogo.jpg">
</a>
</div>
</div>위처럼 img태그등을 사용할시에, 파일위치는 어떻게 해야할까?
egov-com-servlet.xml
<mvc:resources mapping="resources/**" location="/resources/"/>
위처럼 rsources 관련 매핑 설정을 추가하여 해결하였다
✔fetch로 요청보내기
기본적으로 restcontroller를 사용하지 않았으나, POST, DELETE와 같은 메소드는 js에서 fetch를 통해 보내는것이 더 효율적이라 판단하여 controller 및 js를 구성하였다
write.jsp
let writeButton = document.getElementById("writebutton");
writeButton.addEventListener("click", e=>{
let data = {
'btitle' : document.getElementById("btitle").value,
'bcontent' : document.getElementById("bcontent").value,
}
console.log(data)
fetch('/nicc/write',{
method: 'POST',
headers: {
"Content-Type": "application/json; charset=utf-8",
},
body: data,
})
location.href='/nicc'
});Controller.java
@PostMapping("/write")
public void doWrite(@RequestBody BoardEntity boardEntity) throws IOException{
LOGGER.info("/write, boardEntity : {}",boardEntity);
niccService.writeBoard(boardEntity);
}