REACT DB정보 연동하기

1. 비동기 통신으로 input창에 입력된 title값과 artist 값을 axios를 통해 컨트롤러로 전송한다.

1-1 home.js

//노래를 검색해서 콘솔로 url 출력
  const [inputSongName,setInPutSongName] =useState("");
  const [inputArtName,setInPutArtName] =useState("");
//엔터키를 눌러야 onFindSong이 실행되게 한다.
  const onEnter=(e)=>{
    if(e.key==='Enter'){
      onFindSong();
    }
//비동기 통신으로 받아온 노래 이름과 아티스트 이름으로 URL을 검색한다.
  const onFindSong=async()=>{
    const songFind = await AxiosApi.songFind(inputSongName,inputArtName);
    console.log(inputSongName);
    console.log(inputArtName);
    console.log(songFind.data[0].url);
		//DB에서 Array로 넘어오는 data값에서 url을 추출한다
		//Array값은 JAVA VO에서 설정 할 수 있습니다.
		setSongUrl(songFind.data[0].url);
		//ContextApi 값인 {songUrl}를 설정하여 audio src=값에다가 넣을 수 있다.
  }
//노래 이름을 검색
  const onChangeSong =e=>{
    setInPutSongName(e.target.value);
  }
  //아티스트를 검색
  const onChangeArtist=e=>{
    setInPutArtName(e.target.value);
  }


return(

<SearchBox>
      <Icon className="icon" />
      <SearchInput type="text" placeholder="노래 검색" 
       onKeyDown={onEnter} value={inputSongName} onChange={onChangeSong}/>
       <SearchInput type="text" placeholder="아티스트 검색" 
       onKeyDown={onEnter} value={inputArtName} onChange={onChangeArtist}/>
</SearchBox>
);

1-2 AxiosApi.js

//노래 검색
    songFind : async(title,artist) =>{
        const member ={
            title : title,
            artist : artist
        };
        return await axios.post(Story_Board + "/findsong", member);
    },

1-3.ContextApi.js

//추가
const [songUrl, setSongUrl] = useState("");

return(
        //2. 정보는 이런 방식으로 넘겨주겠다는 의미 **이 양식은 변하지 않는다.**
        <UserContext.Provider value={{
            userId, setUserId, 
            password, setPassword, 
            isLogin, setIsLogin,
            signUpId,setSignUpId,
            addr,setAddr,
            songUrl, setSongUrl}}>
            {props.children}
        </UserContext.Provider>        
    );

2.컨트롤러에서 Post값을 받아준다

2-1.controller.java

@PostMapping("/findsong")
    //POST : 노래찾기
    public ResponseEntity<List<MemberVO>> findSong(@RequestBody Map<String, String> songData){
        String title = songData.get("title"); //키 값이 입력되어 value 값을 출력 할 수 있다.
        String artist = songData.get("artist");
        System.out.println("TITLE : " + title);
        System.out.println("artist : " + artist);
        MemberDAO dao = new MemberDAO();
        List <MemberVO> url = dao.songCheck(title,artist);
        return new ResponseEntity<>(url, HttpStatus.OK);
    }

2-2. VO.java

private String url;
//추가

2-3 DAO.java

//노래찾기
    public List<MemberVO> songCheck(String title, String artist) {
        List<MemberVO> list = new ArrayList<>();
        try {
            conn = Common.getConnection();
            stmt = conn.createStatement(); // Statement 객체 얻기
            String sql = "SELECT URL FROM SONG WHERE TITLE = " + "'" + title + "'AND ARTIST=" + "'" + artist +"'";
            rs = stmt.executeQuery(sql);
            System.out.println("노래 타이틀: " + title);
            System.out.println("아티스트: " + artist);
            while(rs.next()) { // 읽은 데이타가 있으면 true
                String sqlUrl = rs.getString("URL"); // 쿼리문 수행 결과에서 ID값을 가져 옴
                System.out.println("노래 타이틀 와일: " + sqlUrl);
                MemberVO vo = new MemberVO();
                vo.setUrl(sqlUrl);
                list.add(vo);
                }
            Common.close(rs);
            Common.close(stmt);
            Common.close(conn);
        } catch(Exception e) {
            e.printStackTrace();
        }
        for(int i =0; i<list.size();i++) {
            System.out.println("여긴리스트 향상 포문 :" + list.get(i));
        }
        return list;
    }