1) SpringBoot
1-1) 간단한 Web Page 예제
1-2) 추가 정리 사항
1) SpringBoot
1-1) 간단한 Web Page 예제
(1) [src/main/java] - [net.datasa.web1] 안에 WebController.java 파일 생성 후 아래와 같이 작성
package net.datasa.web1;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class WebController {
@GetMapping({"", "/"})
public String webMethod() {
System.out.println("webMethod() 지나감");
return "web1";
}
}
(2) [src/main/java] - [net.datasa.web1] 안에 StaticTestController.java 파일 생성 후 아래와 같이 작성
package net.datasa.web1;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class StaticTestController {
@GetMapping("image")
// 외부에서 불러오기 위해 "public"을 사용하고,
// 문자열로 "파일명"을 불러오기 위해 "String"을 사용함!
public String image() {
return "imageView";
}
@GetMapping("sub/image")
// @GetMapping("sub/aa/bb/image")
// 외부에서 불러오기 위해 "public"을 사용하고,
// 문자열로 "파일명"을 불러오기 위해 "String"을 사용함!
public String image2() {
return "imageView2";
}
@GetMapping("css")
// 외부에서 불러오기 위해 "public"을 사용하고,
// 문자열로 "파일명"을 불러오기 위해 "String"을 사용함!
public String css() {
return "cssView";
}
@GetMapping("jstest")
// 외부에서 불러오기 위해 "public"을 사용하고,
// 문자열로 "파일명"을 불러오기 위해 "String"을 사용함!
public String jstest() {
return "jsTestView";
}
}
(3) [src/main/resources] - [templates] 안에 web1.html 파일 생성 후 아래와 같이 작성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>web1</title>
</head>
<body>
<h1>[ web1 ]</h1>
<ol>
<li>
<a href="image">정적 리소스 사용 - 이미지</a>
</li>
<li>
<a href="sub/image">정적 리소스 사용 - 이미지</a>
</li>
<li>
<a href="css">정적 리소스 사용 - css 파일</a>
</li>
<li>
<a href="jstest">정적 리소스 사용 - js 파일</a>
</li>
</ol>
</body>
</html>
(4) [src/main/resources] - [templates] 안에 imageView.html 파일 생성 후 아래와 같이 작성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>imageView.html</title>
</head>
<body>
<h1>[ 이미지 사용 ]</h1>
<p>
<img src="imagefile/htmlLogo.png">
</p>
<p>
<img src="./imagefile/htmlLogo.png">
</p>
<p>
<img src="/imagefile/htmlLogo.png">
</p>
</body>
</html>
(5) [src/main/resources] - [templates] 안에 imageView2.html 파일 생성 후 아래와 같이 작성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>imageView2.html</title>
</head>
<body>
<h1>[ 이미지 사용 ]</h1>
<p>
<img src="../imagefile/htmlLogo.png">
</p>
<p>
<img src="./../imagefile/htmlLogo.png">
</p>
<p>
<img src="/imagefile/htmlLogo.png">
</p>
<!--
@GetMapping("sub/aa/bb/image") case
<h1>[ 이미지 사용 ]</h1>
<p>
<img src="../../../imagefile/htmlLogo.png">
</p>
<p>
<img src="./../../../imagefile/htmlLogo.png">
</p>
<p>
<img src="/imagefile/htmlLogo.png">
</p>
-->
</body>
</html>
(6) [src/main/resources] - [templates] 안에 cssView.html 파일 생성 후 아래와 같이 작성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cssView.html</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<h1>[ cssView.html ]</h1>
<p>p 태그를 이용한 문자열</p>
</body>
</html>
(7) [src/main/resources] - [templates] 안에 jsTestView.html 파일 생성 후 아래와 같이 작성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jsTestView.html</title>
<script src="js/test.js" type="text/javascript"></script>
</head>
<body>
<h1>Js Test View</h1>
<button id="btn">jstest 함수 버튼</button>
</body>
</html>
(8) [src/main/resources] - [static] - [css] 안에 main.css 파일 생성 후 아래와 같이 작성
@charset "UTF-8";
/* h1 태그를 사용한 곳은 빨간 글자 */
/* p 태그를 사용한 곳은 파란 글자 */
h1 {
color: red;
font-weight: bold;
}
p {
color: blue;
font-weight: bold;
}
(9) [src/main/resources] - [static] - [js] 안에 test.js 파일 생성 후 아래와 같이 작성
/*
static/js/test.js
*/
/*
html 문서 상 button 태그에 직접 "onclick" 이벤트를 건 경우 아래와 같이 함수만 정의하면 됨!
function output() {
alert('output 함수 실행됨');
}
*/
window.onload = function() {
let btn = document.querySelector('#btn');
btn.addEventListener('click', function output() {
alert('output 함수 실행됨');
});
}
/*
메인화면에서 jstest 경로의 링크를 클릭하면 나타나는 화면에서
버튼을 클릭하면 위의 함수가 실행됨
*/
(10) 결과 페이지 화면
1-2) 추가 정리 사항
※ 경로 중요사항 정리
- Spring Boot에서는 첫 번째 “/”를 기준으로 그 바로 뒤에 절대경로(ex. /sub/image)가 붙게 된다!
- “http://localhost:8888/”이 root 경로가 되고, 이를 기준으로 상대경로 및 절대경로를 계산하면 된다!
'SpringBoot' 카테고리의 다른 글
| SpringBoot(6) - 계산기 예제(Version 2개), Session (0) | 2024.06.27 |
|---|---|
| SpringBoot(5) - Web Page 예제2 추가 수정, 추가 정리 사항 (0) | 2024.06.26 |
| SpringBoot(4) - Web Page 예제2, 추가 정리 사항 (0) | 2024.06.26 |
| SpringBoot(2) - 새 프로젝트 생성(복습), 실습, 추가 정리 (0) | 2024.06.21 |
| SpringBoot(1) - 개발 환경 설치, 새 프로젝트 생성 (0) | 2024.06.20 |
