[PHP] Spring Mysql MyBatis webApp

(글 읽어보시다가 제가 잘못 이해하고 있는 부분이 있으면 알려주세요.)

우선 아래 그림을 보고 전반적인 로직을 보고 아래 내용을 참고 하면 좋을거 같다. 

전반적인 로직

navigation

---

웹을 구성하는데 있어서 개인 적으로 가장 중요하다고 생각하는 부분은 application.properties 파일과 pom.xml 파일이라고 생각한다. 그 이유는 

application.properties 파일

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.4.3</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.example</groupId>
	<artifactId>webApp4</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>war</packaging>
	<name>webApp4</name>
	<description>Demo project for Spring Boot</description>
	<properties>
		<java.version>11</java.version>
	</properties>
	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-tomcat</artifactId>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>org.apache.tomcat.embed</groupId>
			<artifactId>tomcat-embed-jasper</artifactId>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-jdbc</artifactId>
		</dependency>
		<dependency>
			<groupId>org.mybatis.spring.boot</groupId>
			<artifactId>mybatis-spring-boot-starter</artifactId>
			<version>2.1.4</version>
		</dependency>
		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<scope>runtime</scope>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

pom.xml file

위 사진 처럼 우리가 앱에 설정해야할 가장 기초적인 또는 전체적인 틀을 설정 해주는 부분이니까...

---

게시판에서 사용할 자바 클래스

package com.example.demo;

import java.util.ArrayList;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class MsgController {
	
	@Autowired
	private MsgService service;
	
	@RequestMapping("/msg/list")
	public void list(Model m) {//Model객체는 뷰 페이지에 자동으로 전달됨 
		ArrayList<MsgVo> list = service.getAll();
		m.addAttribute("list", list);
	}
	
	@GetMapping("/msg/write")//글작성 폼
	public void writeForm() {
		//return "board/write";
	}
	
	@PostMapping("/msg/write")//글작성 완료
	public String write(MsgVo mv) {
		service.addMsg(mv);
		return "redirect:/msg/list";	//redirect로 페이지 이동. 클라이언트가 이 url을 요청
	}
	
	@RequestMapping("/msg/edit")
	public String edit(MsgVo mv) {
		service.editMsg(mv);
		return "redirect:/msg/list";
	}
	
	@RequestMapping("/msg/del")
	public String del(int num) {
		service.delMsg(num);
		return "redirect:/msg/list";
	}
}

 

위 클래스는 뷰와 저장소를 이어주는 연결 다리라고 생각하면 된다. 

즉, 이 클래스가 하는 역할은 각 뷰에서 요청 정보들을 전달및 저장소에 저장해주는 역할을 한다.

package com.example.demo;

import java.util.ArrayList;

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

@Service
public class MsgService {
	
	@Autowired
	private MsgDao dao;
	
	public void addMsg(MsgVo mv) {
		dao.insert(mv);
	}
	
	public MsgVo getMsg(int num) {
		return dao.select(num);
	}
	
	public ArrayList<MsgVo> getAll(){
		return dao.selectAll();
	}
	
	public void editMsg(MsgVo mv) {
		dao.update(mv);
	}
	
	public void delMsg(int num) {
		dao.delete(num);
	}
}

위 클래스는 함수들을 전부 관리하는 클래스로서, 이 클래스의 함수들을 사용해 저장소를 컨트롤 할 수 있게 만들었다.

package com.example.demo;

public class MsgVo {
	private int num;
	private String email;
	private String pwd;
	private String msg;

	public MsgVo() {
	}

	public MsgVo(int num, String email, String pwd, String msg) {
		this.num = num;
		this.email = email;
		this.pwd = pwd;
		this.msg = msg;
	}

	public int getNum() {
		return num;
	}

	public void setNum(int num) {
		this.num = num;
	}

	public String getEmail() {
		return email;
	}

	public void setEmail(String email) {
		this.email = email;
	}

	public String getPwd() {
		return pwd;
	}

	public void setPwd(String pwd) {
		this.pwd = pwd;
	}

	public String getMsg() {
		return msg;
	}

	public void setMsg(String msg) {
		this.msg = msg;
	}

	@Override
	public String toString() {
		return "MsgVo [email=" + email + ", pwd=" + pwd + ", msg=" + msg + "]";
	}

}
//mysql> create table msg(
//	    -> num int auto_increment primary key,
//	    -> email varchar(50) not null,
//	    -> pwd varchar(20) not null,
//	    -> msg varchar(100)
//	    -> );

위 클래스는 하나의 객체에 대한 정보를 담고 있는 클래스로 getter setter를 포함하고 있어 이 클래스를 활용해서 
Network traffic이 줄어 들어 메모리를 적게 사용할 수 있으므로 좋다.

---

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>   
<script>
	$(document).ready(function() {
		//클래스가 edit인 요소 클릭하면 실행하는 함수 등록
		$(".edit").click(function() {
			var num = $(this).attr("num");//$(this):클릭이 발생한 현재 객체. attr(속성이름):속성값 반환
			var pwd = $(this).attr("pwd");
			var pwd2 = prompt("글 비밀번호를 입력하시오");
			if(pwd==pwd2){
				var msg = prompt("새 메시지를 입력하시오");
				location.href="${pageContext.request.contextPath }/msg/edit?num="+num+"&msg="+msg;
			}else{
				alert("글 비밀번호가 맞지 않습니다. ");
			}
		});
		
		//클래스가 del인 요소 클릭하면 실행하는 함수 등록
		$(".del").click(function() {
			var num = $(this).attr("num");//$(this):클릭이 발생한 현재 객체. attr(속성이름):속성값 반환
			var pwd = $(this).attr("pwd");
			var pwd2 = prompt("글 비밀번호를 입력하시오");
			if(pwd==pwd2){
				location.href="${pageContext.request.contextPath }/msg/del?num="+num;
			}else{
				alert("글 비밀번호가 맞지 않습니다. ");
			}
		});
	});
</script>
</head>
<body>
<h3>msg 목록</h3>
<a href = "${pageContext.request.contextPath }/msg/write">메시지 작성</a><br>
<table border="1">
<tr><th>글번호</th><th>글내용</th><th>작성자</th><th>수정/삭제</th></tr>
<c:forEach var="msg" items="${list }">
<tr>
<td>${msg.num }</td><td>${msg.msg }</td><td>${msg.email }</td>
<td>
<input type="button" value="수정" class="edit" num="${msg.num }" pwd="${msg.pwd }">
<input type="button" value="삭제" class="del" num="${msg.num }" pwd="${msg.pwd }">
</td>
</tr>
</c:forEach>
</table>
</body>
</html>

list.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<h3>글작성</h3>
<form action="${pageContext.request.contextPath }/msg/write" method="post">
<table border="1">
<tr><th>작성자 이메일</th><td><input type="text" name="email"></td></tr>
<tr><th>글 비밀번호</th><td><input type="password" name="pwd"></td></tr>
<tr><th>내용</th><td><textarea rows="10" cols="45" name="msg"></textarea></td></tr>
<tr><td colspan="2"><input type="submit" value="save"></td></tr>
</table>
</form>
</body>
</html>

write.jsp

위 2개의 jsp파일을 웹에서의 html(뼈대), css(살)의 역할을 맞고 있다. >> UI 담당

---

참고하면 이해하기 좋은 블로그 

m.blog.naver.com/ljc8808/220462395989

VO, DAO, DTO, CRUD란 무엇인가?