[Spring Boot] CrudRepository, RestController

2023.11.29 - [Framework/SpringBoot] - [Spring Boot] JPA로 게시판 구현하기

[Spring Boot] JPA로 게시판 구현하기

이전 포스트의 프로젝트에서 작업

 

1. 회원등록폼 - 코드 작성

지난 포스트의 Article과 동일한 구성으로 작성합니다.

1) Member

@Entity
@AllArgsConstructor
@NoArgsConstructor
@ToString
@Getter
public class Member {
	@Id
	@GeneratedValue
	private Long id;
	@Column
	private String email;
	@Column
	private  String password;
}

 

2) MemberForm

@AllArgsConstructor
@ToString
public class MemberForm {
	private Long id;
	private String email;
	private String password;
	
	public Member toEntity() {
		return new Member(id, email, password);
	}
}

 

3) MemberRepository 

@Repository
public interface MemberRepository extends CrudRepository<Member, Long> {
	@Override
	ArrayList<Member> findAll();
}

 

4) MemberController 

@Controller
public class MemberController {
	@Autowired
	private MemberRepository memberRepository;
	
	@GetMapping("/member/new")
	public String newMemberForm() {
		return "member/new";
	}
	
	@GetMapping("/signup")
	public String signUpPage() {
		return "member/new";
	}
	
	@PostMapping("/member/create")
	public String memberCreate(MemberForm memberForm) {
		Member member =  memberForm.toEntity();
		Member saved = memberRepository.save(member);
		return "redirect:/member/" + saved.getId();
	}
	
	@GetMapping("/member/{id}")
	public String show(@PathVariable Long id, Model model) {
		Member member = memberRepository.findById(id).orElse(null);
		model.addAttribute("member", member);
		return "member/show";
	}
	
	@GetMapping("/member")
	public String index(Model model) {
		List<Member> member = memberRepository.findAll();
		model.addAttribute("member", member);
		return "member/index";
	}
	
	@GetMapping("/member/{id}/edit")
	public String edit(@PathVariable Long id, Model model) {
		Member memberEntity	= memberRepository.findById(id).orElse(null);
		model.addAttribute("member", memberEntity);
		return "member/edit";
	}
	
	@PostMapping("/member/update")
	public String update(MemberForm form) {
		Member memberEntity = form.toEntity();
		Member target = memberRepository.findById(memberEntity.getId()).orElse(null);
		if(target != null) {
			memberRepository.save(memberEntity);
		}
		return "redirect:/member/" + memberEntity.getId();
	}
	
	@GetMapping("/member/{id}/delete")
	public String delete(@PathVariable Long id,
			RedirectAttributes rttr, Model model) {
		Member target = memberRepository.findById(id).orElse(null);
		if(target != null) {
			memberRepository.delete(target);
			rttr.addFlashAttribute("msg","삭제");
		}
		return "redirect:/member";
	}
}

 

 

2. jsp

화면처리도 Article과 동일하게 구성하여 컨트롤러에 맞게 내용을 수정합니다.

동일한 방식으로 crud 가 동작하며, Member 테이블에 등록된 데이터를 Json 형태로 조회할 수 있도록 다음 작업을 진행합니다.

 

3. RestController

1) 코드 작성

@RestController
public class MemberApiController {
	@Autowired
	private MemberRepository memberRepository;
	
	@GetMapping("/api/member")
	@CrossOrigin
	public List<Member> index() {
		return memberRepository.findAll(); 
	}
	
	@GetMapping("/api/member/{id}")
	@CrossOrigin
	public Member show(@PathVariable Long id) {
		return memberRepository.findById(id).orElse(null);
	}
}

 

2) 💻구동 결과

 

💡 Member의 데이터를 리액트에서 사용하기

4. React에서 Spring Boot로 입력한 데이터를 불러오기

1) 리액트 프로젝트 생성 (testapi 프로젝트 생성)

프로젝트를 생성할 폴더의 위치에서 cmd로 npx create-react-app testapi 실행

 

2) Axios 설치

프로젝트에서 터미널을 실행하고 npm i axios 실행

 

3) App.js 코드

import axios from 'axios';
import { useEffect, useState } from 'react';

function App() {
  const [memberData, setMemberData] = useState([])
  const callApi = async()=>{
  try {
      const response = await axios.get("http://localhost:8081/api/member")
      // const response = await axios.get("http://localhost:8081/api/member/1")
      console.log(response.data);
      setMemberData(response.data);
    } catch (error) {
      console.error("error" + error);
    }
  }

  useEffect(()=>{
    callApi()
  }, [])
  return (
    <div className="App">
      {/* 단일조회 */}
      {/* {memberData.email}
      {memberData.password} */}

      {/* 전체조회 */}
      {
        memberData.map((item,i)=>{
          return(
            <li key={i}>
              {item.email} / {item.password}
            </li>
          )
        })
      }
    </div>
  );
}

export default App;

 

4) 💻ReactApp 실행 결과

스프링부트에서 입력한 데이터가 리액트 앱 실행 화면에 출력된다.