[Nuxt.js + Spring Boot] simple example

스프링 부트

+lombok

+jpa

+h2

+web starter

+rest repository

 

 

 

 

lombok실행시켜서 sts에 설치

안하고 의존성만 추가하면 bean error

 

 

프로젝트 구조

 

 

 

 

 

PostController.java

@RestController
public class PersonController {
	private PostRepository personRepository;
	
	@Autowired
	PostService personService;
	
	public PersonController(PostRepository personRepository) {
		this.personRepository=personRepository;
	}
	
	@GetMapping("/post")
	@CrossOrigin(origins = "http://localhost:3000")
	public List goodPersons(){
		return personRepository.findAll();
	}
	
	@PostMapping("/post")
	@CrossOrigin(origins = "http://localhost:3000")
	public void registration(@ModelAttribute("personForm") Post postForm) {
		System.out.println(postForm);
		personService.savePost(postForm);
	}
}

 

CORS때문에 CrossOrigin 선언.

해당 url에서 오는 요청은 막지않음

 

 

 

 

 

Post.java

@Data
@NoArgsConstructor
@Entity
public class Post {
	public Post(String title) {
		this.title = title;
	}
	
	@Id
	@GeneratedValue
	private Long id;
	
	private String title;
	
	private String content;
}

 

 

 

 

 

PostRepository.java

@RepositoryRestResource
public interface PostRepository extends JpaRepository<Post, Long>{

}

 

 

 

PostService.java

public interface PostService {
	void savePost(Post post);
}

 

 

 

PostServiceImpl.java

@Service
public class PostServiceImpl implements PostService{

	@Autowired
	private PostRepository personRepository;
	
	@Override
	public void savePost(Post post) {
		// TODO Auto-generated method stub
		personRepository.save(post);
	}

}

 

 

 

 

 

정도로만 구성해놓고, Postman으로 테스트

Body - formdata 로 name을 보내면,

 

 

 

 

 

 

 

 

 

 

 

=============================Nuxt===========================

 

 

+node.js 다운

 

 

 

https://ko.nuxtjs.org/guide/installation

nuxtjs.org

 

 

 

>vue init nuxt-community/starter-template <project-name>

>cd <project-name>

>npm install

>npm run dev

 

 

 

초기 실행화면 http://localhost:3000/

 

일단, axios 통신을 하기 때문에

 

 

 

 

 

 

>npm i axios

실행시켜서 다운로드 해준다.

 

 

index.vue

 

 

axios 통신으로 data를 가져오고, 그값으로 v-for를 통해 뿌려준다

 

 

입력된 데이터값이 v-for로 뿌려치는것을 확인할 수 있다.

데이터를 받는것을 성공했으니

보내는 것도 해보자.

pages 밑에 add.vue를 만들고

@submit.prevent="sendPost"는

from post형식의 sendPost라는 함수를 만든다.

return 에있는 posttitle, postcontent는 위에 v-model에서 작성된 값으로 양방향 매칭이기 때문에,

사용자가 입력하는 값이 실시간으로 반영이 된다.

v-model.lazy는 키를 막 입력하는 도중에 post 될 경우를 대비하여 시간차를 두는것.

 

methods:{  ...  } 에    함수를 정의한다

form data 형식으로 보낼것이기 때문에, formData()를 선언해주고

값을 append 하여 보내준다.

값이 잘 들어온것을 확인할 수 있다.

 

 

 

 

 

 

이제 title 클릭시 content가 보이도록 링크를 걸어둔다.

우선 게시판 새부사항을 볼수 있는 page를 만든다

 

pages -> posts (생성) -> _post.vue (생성)

 

nuxt에선 _ 를 붙이면 동적라우팅 기능이 활성화 되어 자동으로 매핑시켜준다

*pages 폴더 안에서만 가능

 

 

Link가 잘 되는지 확인하기 위해

_post.vue에 기본 템플릿만 만들어두고,

 

 

 

index.vue에서

<div v-for> 부분을 링크가 가능한 <nuxt-link v-for> 형식으로 바꾸고,

:to={name: 'posts-post'} 는 아까전 posts폴더의 _post로 매핑시킨다는 것이고,

params:{post:post}는 말그대로 파라메타를 넘겨준다.

 

버튼을 를 클릭한다면,

게시물이 보이도록 해보자

 

 

 

 

 

_post.vue 수정

title에 params 받은것을 토대로 내용물을 검색한다

 

 

 

 

=================================결과물==============================--

 

메인화면

 

 

 

 

 

add

 

 

 

 

 

 

 

 

title의 버튼 클릭시