본문 바로가기
[study]이론정리/Spring Boot

Spring MVC - JSP(js,css,image)

by yoon9i 2024. 7. 2.

바. jsp 에서 정적파일 사용하기 (js, css, image)
- 정적파일은 src/main/resources/static 폴더에 저장해야 된다.

a. static 폴더 작성

  src/main/resources/
                ㄴstatic
                    ㄴjs
                      ㄴtest.js
                    ㄴcss
                      ㄴtest.css
                    ㄴimages
                      ㄴthymeleaf.png

 

b. jsp 사용
<head>
  ...
  <link rel="stylesheet" href="css/test.css">
  <script src="js/test.css"></script>
</head>
<body>
  ...
  <img src="images/thymeleaf.png" width="100" height="100">
</body>

 

package com.exam;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Application {

	public static void main(String[] args) {
		SpringApplication.run(Application.class, args);
	}
	
	
}
package com.exam.controller;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class MainController {
	
	Logger logger = LoggerFactory.getLogger(getClass());
	
	// 요청 url 문법? http://localhost:8090/app/요청맵핑값 (*)
	
	// 요청 url? http://localhost:8090/app/list
	@RequestMapping("/list")
	public String list() { // String 값은 view 정보
		
		logger.info("logger: MainController:{}", "/list요청");
		return "hello"; 
	}
	
	// url 변경 -> redirect 방식
	// url 변경 x -> forward 방식
	
	// 요청 url? http://localhost:8090/app/add
	@RequestMapping("/add")
	public String add() {
		
		logger.info("logger: MainController:{}", "/add요청");
		return "/WEB-INF/views/hello.jsp"; // jsp 정보
	}
}
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/test.css">
    <script src="js/test.css"></script>
</head>

<body>
    <p>안녕하세요</p>
    <p>Hello</p>
    <img src="images/thymeleaf.png" width="100" height="100">
</body>

</html>
/* test.css */

p {
	color: red;
}
// test.js

alert("test.js");
# application.properties
logging.level.org.springframework=info

# tomcat port 번호 변경
server.port=8090

# context 명 변경
server.servlet.context-path=/app

# jsp 의 경로와 확장자 지정
spring.mvc.view.prefix=/WEB-INF/views/
spring.mvc.view.suffix=.jsp
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 
	http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.7.18</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.exam</groupId>
	<artifactId>demo</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>demo</name>
	<description>Demo project for Spring Boot</description>
	<properties>
		<java.version>11</java.version>
	</properties>
	<dependencies>
		
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-devtools -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-devtools</artifactId>
</dependency>
<dependency>
	<groupId>org.apache.tomcat.embed</groupId>
	<artifactId>tomcat-embed-jasper</artifactId>
	<scope>provided</scope>
</dependency>
<dependency>
	<groupId>javax.servlet</groupId>
	<artifactId>jstl</artifactId>
</dependency>


		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>