2022.10.27 Spring-7

차유빈·2022년 10월 31일
0

Open Framework (Spring & Egov)

목록 보기
7/7

기초개념보충




@GetMapping
@GetMapping은 HTTP GET 요청을 처리하는 메서드를 맵핑(@RequestMapping) 하는 어노테이션이다. 메서드(url)에 따라 어떤 페이지를 보여줄지 결정하는 역할

클라이언트가 서버로 요청을 보내는 방법인 HTTP Method의 2가지 방법

  • HTTP(Hypertext Transfer Protocol) : 하이퍼텍스트 전송 규약으로 Web-Client와 Web-Server간 데이터를 전송하는 프로토콜
  • HTTP 패킷 : Header 영역과 Body영역의 구조

1. Get 방식

  • 주소 뒤에 "이름"과 "값"이 결합된 스트링 형태로 전달
  • 주소창에 그대로 보여져서 보안성이 떨어짐
  • 길이 제한(즉, 전송 데이터의 한계)
  • Post방식보다 상대적으로 전송 속도가 빠름

GET 방식의 특징 => URL에 Parameter를 붙여서 전송

2. POST 방식

  • 일정 크기 이상의 데이터 전송 시 사용
  • 서버로 보내기 전 인코딩, 전송 후 다시 디코딩
  • URL에 데이터의 정보가 노출되지 않아 보안성이 높음
  • Get방식보다 상대적으로 전송 속도가 느림
  • String 뿐만 아닌 라디오 버튼, 텍스트 박스 같은 객체들의 값도 전송가능

POST 방식의 특징 => body영역에 데이터를 실어 보냄

MyBatis-1

데이터 입력

라이브러리 5개 추가

db.properties 파일 생성

Mybatis => Mapper 인터페이스 만들기
sql 쿼리문 작성하면 됨

ServletAppContext.java

  • BasicDataSource Bean => 접속 정보를 관리하는 객체인 BasicDataSource 추가

  • SqlSessionFactory Bean => SqlSessionFactory 는 접속, 쿼리 관리 등을 하는 객체

  • Mapper Bean => 쿼리문을 관리하는 Mapper를 정의합니다. 이 Mapper를 주입 받아 쿼리를 실행함

MyBatis-2

oracle DB에서 spring_mvc 테이블 만들기

DataBean.java (만든 테이블 데이터열과 동일하게)

index.jsp
input => 데이터 입력, read => 데이터 읽기

TestController.java에서 input 페이지, input_pro 페이지 이동 연결

  • MyBatis에서 생성되는 MapperInterface 사용

input_data.jsp에서 form 만들기

input_pro.jsp 저장완료 페이지

MapperInterface.java

  • Mybatis에서 변수값 넣을때는 #{data1} 처럼

결과

데이터 입력하면 DB에 저장되어있음

데이터 읽기

MapperInterface.java

TestController.java

read_data.jsp

  • 읽기 쉽게 JSTL 태그 추가
  • list로 넘어오는 데이터를 obj에서 하나씩 꺼내서 반환

결과






개념 정리

MVC => 여러 명이 같이 개발하기 쉬움

Bean

  • Component : 일반적인 객체를 bean으로 등록
  • RestController : 예를 들어서 오픈 소스 API에서 JASON 형식의 데이터 등록 시

게시판 프로젝트 소개

index.html 페이지를 index.jsp으로 바꿈

계속 반복되는 footer.jsp 및 menu.jsp 페이지를 include 폴더에 분리하여 넣고 url 걸기

  • index 페이지에서도 url 걸고 삭제(불필요한 부분은 생략하기 위함)

${root }로 기본 페이지 선언하기

<c:set var="root" value="${pageContext.request.contextPath }" />

root는 절대적인 기본 페이지로 설정 => http://localhost:8080/MiniProject/

BoardController.java 생성

UserController.java 생성



user 폴더 내의 4가지 jsp 페이지 만들기

login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!-- Jstl 태그 추가 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var='root' value="${pageContext.request.contextPath }/"/> 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>미니 프로젝트</title>
    <!-- Bootstrap CDN -->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  </head>
  <body>
    <!-- 상단 메뉴 부분 -->
  <c:import url="/WEB-INF/views/include/menu.jsp"/>

   <!-- 로그인 부분 -->
    <div class="container" style="margin-top: 100px">
      <div class="row">
        <div class="col-sm-3"></div>
        <div class="col-sm-6">
          <div class="card shadow">
            <div class="card-body">
              <div class="alert alert-danger">
                <h3>로그인 실패</h3>
                <p>아이디 비밀번호를 확인해주세요</p>
              </div>
              <form action="index.html" method="post">
                <div class="form-group">
                  <label for="user_id">아이디</label>
                  <input type="text" id="user_id" name="user_id" class="form-control" />
                </div>
                <div class="form-group">
                  <label for="user_pw">비밀번호</label>
                  <input type="password" id="user_pw" name="user_pw" class="form-control" />
                </div>
                <div class="form-group text-right">
                  <button type="submit" class="btn btn-primary">로그인</button>
                  <a href="join.html" class="btn btn-danger">회원가입</a>
                </div>
              </form>
            </div>
          </div>
        </div>
        <div class="col-sm-3"></div>
      </div>
    </div>

<!-- 하단 footer 부분 -->
    <c:import url="/WEB-INF/views/include/footer.jsp"/>

  </body>
</html>

logout.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var='root' value="${pageContext.request.contextPath }/"/>  
<script>
	alert('로그아웃 되었습니다')
	location.href = '${root}'
</script>

join.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!-- Jstl 태그 추가 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var='root' value="${pageContext.request.contextPath }/" />

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>미니 프로젝트</title>
<!-- Bootstrap CDN -->
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
	<!-- 상단 메뉴 부분 -->
	<c:import url="/WEB-INF/views/include/menu.jsp" />

	<!-- join 부분 -->
	<div class="container" style="margin-top: 100px">
		<div class="row">
			<div class="col-sm-3"></div>
			<div class="col-sm-6">
				<div class="card shadow">
					<div class="card-body">
						<form action="login.html" method="post">
							<div class="form-group">
								<label for="user_name">이름</label> <input type="text"
									id="user_name" name="user_name" class="form-control" />
							</div>
							<div class="form-group">
								<label for="user_id">아이디</label>
								<div class="input-group">
									<input type="text" id="user_id" name="user_id"
										class="form-control" />
									<div class="input-group-append">
										<button type="button" class="btn btn-primary">중복확인</button>
									</div>
								</div>
							</div>
							<div class="form-group">
								<label for="user_pw">비밀번호</label> <input type="password"
									id="user_pw" name="user_pw" class="form-control" />
							</div>
							<div class="form-group">
								<label for="user_pw2">비밀번호 확인</label> <input type="password"
									id="user_pw2" name="user_pw2" class="form-control" />
							</div>
							<div class="form-group">
								<div class="text-right">
									<button type="submit" class="btn btn-primary">회원가입</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
			<div class="col-sm-3"></div>
		</div>
	</div>

	<!-- 하단 footer 부분 -->
	<c:import url="/WEB-INF/views/include/footer.jsp" />
</body>
</html>

modify.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!-- Jstl 태그 추가 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var='root' value="${pageContext.request.contextPath }/" />

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>미니 프로젝트</title>
<!-- Bootstrap CDN -->
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
	<!-- 상단 메뉴 부분 -->
	<c:import url="/WEB-INF/views/include/menu.jsp" />

	<!-- modify 부분 -->
    <div class="container" style="margin-top: 100px">
      <div class="row">
        <div class="col-sm-3"></div>
        <div class="col-sm-6">
          <div class="card shadow">
            <div class="card-body">
              <form action="modify_user.html" method="post">
                <div class="form-group">
                  <label for="user_name">이름</label>
                  <input
                    type="text"
                    id="user_name"
                    name="user_name"
                    class="form-control"
                    value="홍길동"
                    disabled="disabled"
                  />
                </div>
                <div class="form-group">
                  <label for="user_id">아이디</label>
                  <input
                    type="text"
                    id="user_id"
                    name="user_id"
                    class="form-control"
                    value="abc"
                    disabled="disabled"
                  />
                </div>
                <div class="form-group">
                  <label for="user_pw">비밀번호</label>
                  <input
                    type="password"
                    id="user_pw"
                    name="user_pw"
                    class="form-control"
                    value="1234"
                  />
                </div>
                <div class="form-group">
                  <label for="user_pw2">비밀번호 확인</label>
                  <input
                    type="password"
                    id="user_pw2"
                    name="user_pw2"
                    class="form-control"
                    value="1234"
                  />
                </div>
                <div class="form-group">
                  <div class="text-right">
                    <button type="submit" class="btn btn-primary">정보수정</button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
        <div class="col-sm-3"></div>
      </div>
    </div>

	<!-- 하단 footer 부분 -->
	<c:import url="/WEB-INF/views/include/footer.jsp" />
</body>
</html>

BoardController.java에 메서드 추가

board 폴더에 4가지 jsp 만들기

첨부이미지 경로 수정해줘야 이미지 생성됨

profile
차유빈
chacha's 프로그래밍 공부
이전 포스트

2022.10.26 Spring-6

0개의 댓글