(글 읽어보시다가 제가 잘못 이해하고 있는 부분이 있으면 알려주세요.)
우선 아래 그림을 보고 전반적인 로직을 보고 아래 내용을 참고 하면 좋을거 같다.
웹을 구성하는데 있어서 개인 적으로 가장 중요하다고 생각하는 부분은 application.properties 파일과 pom.xml 파일이라고 생각한다. 그 이유는
<?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
'workSpace > JAVA' 카테고리의 다른 글
[PHP] atom beautify 줄 맞춤 (0) | 2021.03.18 |
---|---|
[PHP] string boot 에 vue 연동 (0) | 2021.03.18 |
[PHP] Spring 상세설정 (0) | 2021.03.10 |
[PHP] Spring (0) | 2021.03.09 |
[PHP] cookie, session (0) | 2021.03.05 |