스프링부트+jsp로 배달사이트 만들기-02 메인페이지 만들기1
2021. 12. 3. 22:02ㆍ스프링부트
<!-- JSP 템플릿 엔진 -->
<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
</dependency>
<!-- JSTL -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
</dependency>
jsp를 사용하기 위해서 pom.xml에 위 코드를 추가합니다
webapp 아래에 WEB-INF -> view -> home.jsp 파일을 생성하고
MainController의 메서드를 수정합니다
클래스에 @Controller 어노테이션을 붙이면
메서드의 매핑된 url을 찾아 메서드를 실행하고 return 되는 페이지를 찾아 화면에 보여줍니다
@Controller
public class MainController {
@GetMapping("/")
public String test() {
System.out.println("test");
return "/WEB-INF/view/home.jsp";
}
}
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
test page
</body>
</html>
실행결과
return 값의 /WEB-INF/view/test.jsp에서 /WEB-INF/ 와 .jsp는 공통부분이므로 설정파일에 따로 빼줍니다
spring.mvc.view.prefix=/WEB-INF/view/
spring.mvc.view.suffix=.jspreturn 으로 반환되는 값의 앞에 /WEB-INF/view/, 뒤에 .jsp를 붙여줍니다
@Controller
public class MainController {
@GetMapping("/")
public String main(){
System.out.println("main");
return "home";
}
}이제 view의 이름만 써도 페이지를 찾아줍니다
home.jsp를 생성합니다
home.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/include/link.jsp" %>
<link rel="stylesheet" href="/css/layout/nav.css">
<link rel="stylesheet" href="/css/home.css">
<%@ include file="/WEB-INF/view/include/header.jsp" %>
<!-- 콘텐츠 -->
<div class="wrap">
<main>
<section class="address_search">
<div id="search_box">
<div>
<input type="hidden" id="deleveryAddress1" placeholder="우편번호" value="${BMaddress.address1 }" name="address1" readonly>
<input type="text" value="${BMaddress.address2 }"
id="deleveryAddress2" readonly placeholder="주소를 입력해 주세요" name="address2"><br>
</div>
<div class="search_btn">
<label for="search_btn">
<i class="fas fa-search"></i>
</label>
<input type="button" name="search" id="search_btn">
</div>
</div>
</section>
<section class="category_box">
<div class="box">
<ul class="category">
<li>
<div>
<div class="img_box">
<img src="/img/pizza2.png" alt="이미지">
</div>
</div>
<div class="name">피자</div>
</li>
<li>
<div>
<div class="img_box">
<img src="/img/chicken1.png" alt="이미지">
</div>
</div>
<div class="name">치킨</div>
</li>
<li>
<div>
<div class="img_box">
<img src="/img/hamburger4.png" alt="이미지">
</div>
</div>
<div class="name">패스트푸드</div>
</li>
<li>
<div>
<div class="img_box">
<img src="/img/bunsik1.png" alt="이미지">
</div>
</div>
<div class="name">분식</div>
</li>
<li>
<div>
<div class="img_box">
<img src="/img/dessert2.png" alt="이미지">
</div>
</div>
<div class="name">카페/디저트</div>
</li>
<li>
<div>
<div class="img_box">
<img src="/img/cutlet1.png" alt="이미지">
</div>
</div>
<div class="name">돈까스/일식</div>
</li>
<li>
<div>
<div class="img_box">
<img src="/img/chinese1.png" alt="이미지">
</div>
</div>
<div class="name">중국집</div>
</li>
<li>
<div>
<div class="img_box">
<img src="/img/jockbal1.png" alt="이미지">
</div>
</div>
<div class="name">족발/보쌈</div>
</li>
<li>
<div>
<div class="img_box">
<img src="/img/jockbal2.png" alt="이미지">
</div>
</div>
<div class="name">야식</div>
</li>
<li>
<div>
<div class="img_box">
<img src="/img/bibimbap.jpg" alt="이미지">
</div>
</div>
<div class="name">한식</div>
</li>
<li>
<div>
<div class="img_box">
<img src="/img/jockbal3.png" alt="이미지">
</div>
</div>
<div class="name">1인분</div>
</li>
<li>
<div>
<div class="img_box">
<img src="/img/dosirac.jpg" alt="이미지">
</div>
</div>
<div class="name">도시락</div>
</li>
</ul>
</div>
</section>
</main>
</div>
<!-- 콘텐츠 -->
<!-- 하단 메뉴 -->
<%@ include file="/WEB-INF/view/include/nav.jsp" %>
<!-- 하단 메뉴 -->
<!-- 푸터 -->
<%@ include file="/WEB-INF/view//include/footer.jsp" %>
<!-- 푸터 -->
<script>
$(".category li").click(function(){
let address1 = $("#deleveryAddress1").val();
if(!address1) {
swal("배달 받으실 주소를 입력해 주세요");
return false;
}
const index = $(this).index();
location.href = "/store/" + (100+index) + "/" +address1;
})
</script>
</body>
</html>
압축을 풀고 해당위치에 붙여넣고 실행합니다
input태그의 value로 들어간 ${BMaddress.address1},${BMaddress.address2}는 다음장에서 구현할
주소를 쿠키와 세션에 저장후 읽을때 사용합니다
실행화면
'스프링부트' 카테고리의 다른 글
| 스프링부트+jsp로 배달사이트 만들기-04 mypage, 로그인페이지 만들기 (0) | 2021.12.04 |
|---|---|
| 스프링부트+jsp로 배달사이트 만들기-03 메인페이지 만들기2(쿠키,세션으로 주소저장) (0) | 2021.12.04 |
| 스프링부트+jsp로 배달사이트 만들기-01 프로젝트 생성 (3) | 2021.12.03 |
| JSON 변환하기 (Gson , json-simple) (0) | 2021.11.29 |
| 웹 소켓 기본 (0) | 2021.11.10 |