[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
Nuxt.js official website
ko.nuxtjs.org
>vue init nuxt-community/starter-template <project-name>
>cd <project-name>
>npm install
>npm run dev
일단, 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 받은것을 토대로 내용물을 검색한다
=================================결과물==============================--
