- [SpringBoot] 6. 메인컨트롤러와 메인페이지 구현하기2024년 08월 05일
- Song hyun
- 작성자
- 2024.08.05.:38
728x90반응형1. 프레임워크와 라이브러리의 개념
2. IoC의 개념(제어의 역전
3. 프레임워크로 구현하기
(1) 메인 컨트롤러(mainController.java)
package com.tenco.bank.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; @Controller // IoC의 대상(싱글톤 패턴으로 관리된다.) // IoC = inversion of controll (=제어의 역전) public class MainController { // REST API 기반으로 주소 설계 가능 // 주소 설계 // http://localhost:8080/main-page @GetMapping({"/main-page", "/index"}) public String mainPage() { System.out.println("mainPage() 호출 확인"); // [JSP 파일 찾기(yml)] - 뷰 리졸버 // prefix: /WEB-INF/view // /main // suffix: .jsp // application.yml 에서 설정한 전위, 후위연산자를 통해 더욱 간단하게 사용이 가능하다. return "/main"; } }(2) 메인 페이지
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html lang="en"> <head> <title>myBank</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="jumbotron text-center m--banner-imgs" style="margin-bottom: 0"> <h1>My Bank</h1> <p>MyBatis를 활용한 Springboot 앱 만들어보기</p> </div> <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"><a class="nav-link" href="#">Link</a></li> <li class="nav-item"><a class="nav-link" href="#">Link</a></li> <li class="nav-item"><a class="nav-link" href="#">Link</a></li> </ul> </div> </nav> <div class="container" style="margin-top: 30px"> <div class="row"> <div class="col-sm-4"> <h2>About Me</h2> <h5>Photo of me:</h5> <div class="m--profile"></div> <p>코린이 개발을 위한 뱅크 앱</p> <h3>Some Links</h3> <p>Lorem ipsum dolor sit ame.</p> <ul class="nav nav-pills flex-column"> <li class="nav-item"><a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"><a class="nav-link" href="#">Link</a></li> <li class="nav-item"><a class="nav-link" href="#">Link</a></li> <li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a> </li> </ul> <hr class="d-sm-none"> </div> <!-- END OF HEADER.JSP -->@charset "UTF-8"; .m--banner-imgs { background-image: url(https://picsum.photos/id/1/600); width: 100%; background-size: cover; background-position: center; } .m--profile { background-image: url(https://picsum.photos/id/1/350); width: 100%; height: 200px; background-size: cover; background-position: center; }
(1) header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html lang="en"> <head> <title>myBank</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="m--flex-container"> <div class="m--container"> <div class="jumbotron text-center m--banner-imgs" style="margin-bottom: 0"> <h1>My Bank</h1> <p>MyBatis를 활용한 Springboot 앱 만들어보기</p> </div> <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"><a class="nav-link" href="#">Link</a></li> <li class="nav-item"><a class="nav-link" href="#">Link</a></li> <li class="nav-item"><a class="nav-link" href="#">Link</a></li> </ul> </div> </nav> <div class="container" style="margin-top: 30px"> <div class="row"> <div class="col-sm-4"> <h2>About Me</h2> <h5>Photo of me:</h5> <div class="m--profile"></div> <p>코린이 개발을 위한 뱅크 앱</p> <h3>Some Links</h3> <p>Lorem ipsum dolor sit ame.</p> <ul class="nav nav-pills flex-column"> <li class="nav-item"><a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"><a class="nav-link" href="#">Link</a></li> <li class="nav-item"><a class="nav-link" href="#">Link</a></li> <li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a> </li> </ul> <hr class="d-sm-none"> </div> <!-- END OF HEADER.JSP -->(2) main.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!-- header.jsp --> <%@ include file="/WEB-INF/view/layout/header.jsp" %> <!-- START OF CONTENT.JSP(XXX.JSP) --> <div class="col-sm-8"> <h2>TITLE HEADING</h2> <h5>Title description, Dec 7, 2017</h5> <div class="fakeimg">Fake Image</div> <p>Some text..</p> <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> <br> <h2>TITLE HEADING</h2> <h5>Title description, Sep 2, 2017</h5> <div class="fakeimg">Fake Image</div> <p>Some text..</p> <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> </div> </div> </div> <!-- END OF CONTENT.JSP(XXX.JSP) --> <!-- footer.jsp --> <%@ include file="/WEB-INF/view/layout/footer.jsp" %>(3) footer.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!-- START OF FOOTER.JSP --> <div class="jumbotron text-center" style="margin-bottom: 0"> <p>Footer</p> </div> </div> </div> </body> </html> <!-- END OF FOOTER.JSP -->(4) common.css
@charset "UTF-8"; body{ height: 100vh; margin: 0; } .m--flex-container { display: flex; flex-direction: column; height: 100%; } .m--container { flex: 1; } .m--banner-imgs { background-image: url(https://picsum.photos/600); width: 100%; background-size: cover; background-position: center; } .m--profile { background-image: url(https://picsum.photos/id/1/350); width: 100%; height: 200px; background-size: cover; background-position: center; }728x90반응형'Springboot' 카테고리의 다른 글
[SpringBoot] 8. 에러 페이지 생성 (0) 2024.08.06 [SpringBoot] 7. Exception Handler 처리 (0) 2024.08.05 [SpringBoot] 5. 화면 구현 (0) 2024.08.05 [SpringBoot] 4. 모델링(2) - DTO 모델링 (0) 2024.08.05 [SpringBoot] 4. 모델링(1) - DB 모델링 (0) 2024.08.05 다음글이전글이전 글이 없습니다.댓글
스킨 업데이트 안내
현재 이용하고 계신 스킨의 버전보다 더 높은 최신 버전이 감지 되었습니다. 최신버전 스킨 파일을 다운로드 받을 수 있는 페이지로 이동하시겠습니까?
("아니오" 를 선택할 시 30일 동안 최신 버전이 감지되어도 모달 창이 표시되지 않습니다.)