본문 바로가기

개발/Spring

[Spring Boot] Restful 방식 셋팅

Front와 Back 따로!


Backend(Server) - STS

 

STS 설정

1. 프로젝트 생성

boot 

 

2. pom.xml에 spring boot start web + spring boot starter tomcat 추가

<?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 https://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.3.4.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.example</groupId>
	<artifactId>SpringBoot</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>SpringBoot</name>
	<description>Demo project for Spring Boot</description>

	<properties>
		<java.version>1.8</java.version>
	</properties>

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

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
			<exclusions>
				<exclusion>
					<groupId>org.junit.vintage</groupId>
					<artifactId>junit-vintage-engine</artifactId>
				</exclusion>
			</exclusions>
		</dependency>
		<!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-web -->
		<dependency>
		    <groupId>org.springframework.boot</groupId>
		    <artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-tomcat -->
		<dependency>
		    <groupId>org.springframework.boot</groupId>
		    <artifactId>spring-boot-starter-tomcat</artifactId>
		</dependency>
				
		
		
		
	</dependencies>

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

</project>

 

3. src/main/resources의 application.properties에 포트 설정

중복되지 않도록 3000번대로

 

4. Controller 설정

package bit.com.a.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

@RestController		// == @Controller + @Responsebody => Restful
public class HelloController {

	@RequestMapping(value = "/test", method = RequestMethod.GET)
	public String test() throws Exception{
		System.out.println("test()");
		return "test";
	}
	
}

 

5. 클라이언트에서 접속할 수 있도록 WebConfig 보안 설정

package bit.com.a;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

	@Override
	public void addCorsMappings(CorsRegistry registry) {
		// TODO Auto-generated method stub
	//	WebMvcConfigurer.super.addCorsMappings(registry);
		
		registry.addMapping("/**").allowedOrigins("http://localhost:8060");
		
	}

		
	
}

" 8060 포트에서 온 host는 허용해주어라!! "

 


Client(Front) - Eclipse 

 

1. index.html 파일로 만들어준다. jsp 파일 아님!

 

2. 작성하고 Ajax 로 데이터 보내보기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<p id="demo"></p>

<button type="button">click</button>

<script type="text/javascript">
$(document).ready(function () {
	
	$("button").click(function() {
	//	alert('click');
	
		$.ajax({
			url:"http://localhost:3010/test",
			type:'get',
			success:function(data){
			//	alert('success');
			//	alert(data);
				$("#demo").text(data);
			
			},
			error:function(){
				alert('error');
			}
		});
	});
});


</script>


</body>
</html>

 

 

클릭시 Controller에서 설정해주었던 test라는 글자가 뜨면 성공!