SpringBoot로 Web만들기(2)

Seok_IN 2022. 4. 20. 22:12

Happy House 만들기🙂 - 회원가입

1. DB 만들기

create database happyhouse2;

use happyhouse2;
create table member(
id varchar(20),
name varchar(20),
pw varchar(500)
);

2. index.html에 로그인 / 회원가입 기능 추가하기

<div id="loginDiv" style='color:white; font-size:17px'>
	ID<input id="id">
    PW<input id="pw">
    <button class="btn btn-outline-light" id="loginBtn">로그인</button>
    <button class="btn btn-outline-light" onclick="location.href='html/memberInsert.html'">회원가입</button>
</div>

<!-- 밑에 영역에 js 참조 코드 추가 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
		<script src="js/my.js"></script>

3. memberInsert.html 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<center>
	<h1>회원가입 페이지</h1>
	ID<input id="id">
	PW<input id="pw">
	NAME<input id="name">
	<button id="memberInsertBtn">가입하기</button>
</center>

</body>
</html>

4. 결과 테스트하기

5. SQL문 연동을 위한 mybatis/config/myBatisConfig.xml 만들기

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE configuration
  PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-config.dtd">
  
  <configuration>
  	<mappers>
  		<mapper resource="mybatis/mappers/member.xml" />  		
  	</mappers>
  </configuration>

6. mybatis/mappers/member.xml 만들기

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  
  <mapper namespace="com.ssafy.web.dao.MemberDAO">
  	<select id="login" parameterType="memberVO" resultType="String">
  		select name from member where id=#{id} and pw=#{pw}
  	</select>
  	<insert id="memberInsert" parameterType="memberVO">
  		insert into member(id, pw, name) values(#{id}, #{pw}, #{name})
  	</insert>
  </mapper>

7. MemberController 만들기

package com.ssafy.web.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;

import com.ssafy.web.service.MemberService;
import com.ssafy.web.vo.MemberVO;

@RestController
public class MemberController {
	@Autowired
	MemberService memberService;
	@PostMapping("memberInsert")
	public String memberInsert(MemberVO vo) {
		memberService.memberInsert(vo);
		return "ok";
	}
}

8. MemberVO만들기

package com.ssafy.web.vo;

import lombok.Data;
import lombok.ToString;

@Data
@ToString
public class MemberVO {
	private String id, pw, name;
}

9. MemberService만들기

package com.ssafy.web.service;

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

import com.ssafy.web.dao.MemberDAO;
import com.ssafy.web.vo.MemberVO;

@Service
public class MemberService {
	@Autowired
	MemberDAO memberDAO;
	
	public void memberInsert(MemberVO vo) {
		memberDAO.memberInsert(vo);		
	}

}

10. MemberDAO 만들기

package com.ssafy.web.dao;

import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;

import com.ssafy.web.vo.MemberVO;

@Repository
@Mapper
public interface MemberDAO {

	void memberInsert(MemberVO vo);

}

11. my.js 에 회원가입하는 내용 추가하기

$("#memberInsertBtn").click(function(){
		const id = $("#id").val();
		const pw = $("#pw").val();
		const name = $("#name").val();
		
		$.post('memberInsert', {id, pw, name}, function(data){
			if(data == "ok"){
				alert("회원가입 완료!");
				location.href="/";
			}
				
			else{
				alert("회원가입 실패..");
			}
		});
	});

12. 결과 확인

저작자표시 (새창열림)