#2-2 / React - 회원가입 (data insert , React + 주소 api)

  👀 put + oracle  / React + 주소 api

-App.js

join 추가

import React,{} from 'react'
import { Route, Routes } from 'react-router-dom'
import Idcheck from './Idcheck' //상대경로 => src의 실제 js파일 찾을 때 사용(.js 작성 안해도 됨)
import { Join } from './Join' // 


//export하기 위한 함수
function App(){
	return(
	<>
	<Routes>
		<Route path='/Idcheck' element={<Idcheck />}></Route>
		<Route path='/Join' element={<Join />}></Route>	
	</Routes>
	</>
	);
}

export default App;

 

- join.js

import React, { useState } from 'react';
import { useDaumPostcodePopup } from 'react-daum-postcode';

export var Join=function(){
	const [level,mlevel]=useState("2");
	const[area,marea]=useState("A");

	//우편 번호 및 도로명 주소를 담는 변수
	const[posts,post_data]=useState("");	
	const[roads,road_data]=useState("");

	//React 자체로 외부 서버 js 파일 로드
	var script=function(){
		var tag=document.createElement("script");
		tag.innerHTML="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"
		tag.type="text/javascript";
		document.appendChild(tag);
	}

	//외부 서버에 있는 js를 로드하여  API를 활용
	var open=useDaumPostcodePopup("https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js");

	//API에서 결과값을 return 받는 함수
	var address=function(data){
		var zipcode=data.zonecode;	//우편 번호
		var road=data.roadAddress;	//도로명 주소
		//console.log(data); //API에서 제공하는 배열 확인
		post_data(zipcode);
		road_data(road);
	}
	
	//도로명 주소를 팝업 창으로 오픈
	var post=function(){
		open({onComplete:address});
	} 
	
	//ajax -> put API로 사용자 추가
	function put_ajax(){
		var c_id=document.getElementById("c_id").value;
		var c_name=document.getElementById("c_name").value;
		var c_hp=document.getElementById("c_hp").value;
		var c_email=document.getElementById("c_email").value;
		var c_post=document.getElementById("c_post").value;
		var c_road=document.getElementById("c_road").value;
		var c_address=document.getElementById("c_address").value;
		var c_level=document.getElementById("c_level").value;
		var c_area=document.getElementById("c_area").value;
		
		console.log(c_name)

		if(c_id==""){
			alert("아이디를 입력하세요.");
		} else if(c_name==""){
			alert("이름을 입력하세요.");
		} else if(c_hp==""){
			alert("전화번호를 입력하세요.");
		} else{	//put ajax로 전송(RestAPI)
			let fd=new FormData();

			fd.append("c_id",c_id);
			fd.append("c_name",c_name);
			fd.append("c_hp",c_hp);
			fd.append("c_email",c_email);
			fd.append("c_post",c_post);
			fd.append("c_road",c_road);
			fd.append("c_address",c_address);
			fd.append("c_level",c_level);
			fd.append("c_area",c_area);

			//ajax로 전송
			fetch("/api/joinok",{
				method : "put",
				body : fd
			}).then(function(result_data){	//API 회신 내용
				return result_data.text();
			}).then(function(result_res){		//API 회신 내용 출력
				if(result_res=="ok"){
					alert("회원가입이 완료되었습니다.");
				} else if(result_res=="no"){
					alert("오류가 발생하였습니다.");
					//window.location.href="./Join";
				}
			}).catch(function(error){
				console.log(error);
			});
		}
	}
	
	return(
		<section>
		<input type="hidden" id="c_level" value={level}/>
		<input type="hidden" id="c_area" value={area}/>
		아이디 : <input type="text" id="c_id"/><br/>
		고객명 : <input type="text" id="c_name"/><br/>	
		연락처 : <input type="text" id="c_hp"/><br/>
		이메일 : <input type="text" id="c_email"/><br/>
		우편 번호 : <input type="text" id="c_post" value={posts} readOnly/>
		<button type="button" onClick={post}>주소찾기</button><br/>
		도로명 : <input type="text" id="c_road" value={roads} readOnly/><br/>
		상세 주소 : <input type="text" id="c_address"/><br/>
		<button type="button" onClick={put_ajax}>회원가입</button>
		</section>
	);
}

https://dev-eunse.tistory.com/316   여기서 만든 dto와 name값 동일

 

 

- mapper.xml

<insert id="memberjoin">
insert into CUSTOMER values (CNO.NEXTVAL,#{c_id},#{c_name},#{c_hp},#{c_email},#{c_tel},#{c_post},#{c_road},#{c_address},#{c_level},#{c_area},SYSDATE)
</insert>

 

 

- api_member_repo.java (interface)

package kr.co.sen;

import java.util.List;
import java.util.Map;

import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface api_member_repo {
	int memberjoin(customer_dto dto);
}

 

 

- api_member_service (interface)

package kr.co.sen;

import java.util.List;
import java.util.Map;

public interface api_member_service {
	int memberjoin(customer_dto dto);
}

 

 

- api_member_impl.java

package kr.co.sen;

import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class api_member_impl implements api_member_service{
	
	@Autowired
	private api_member_repo apirepo; 
	
	@Override
	public int memberjoin(customer_dto dto) {
		int result = apirepo.memberjoin(dto);
		return result;
	}
}

 

 

- restapi.java (Controller)

package kr.co.sen;
//import 생략

@RestController //api 전용 controller
public class restapi {
	//api는 무조건 결과값을 전달해줘야함 - 해당 값을 받을 변수 미리 선언
	private String result = null;
	
	//Dto
	@Resource(name="customer_dto")
	customer_dto customer_dto;
	
	//Service Interface
	@Autowired
	api_member_service api_member_service;
	
	//회원가입 API
	@PutMapping("/api/joinok")
	public String joinok(@ModelAttribute customer_dto dto) {
		try {
		dto.setC_tel("01012345678");
		System.out.println(dto);
		
		int callback = api_member_service.memberjoin(dto);
		if(callback>0) {
			this.result="ok";
		}else {
			this.result="no";
		}
		}catch(Exception e) {
			e.printStackTrace();
			System.out.println(e);
			this.result="error";
		}
		return this.result;
	}
		
}

 

호엥 ㅠ