Spring

2023.02.22

연을 2023. 2. 22. 17:30
728x90

[Sping]

2004년 책에 제안한 내용이 시초

Spring(Framework) ~3.0 Legacy

Spring Boot 4.0~

 

방법

1) Eclipse <= STS(Spring Tool Suite) 플러그인(Plug-in) 설치

2) IntellJ STS

 

[이클립스 들어가서 spring 만들기] 

file->new->other->filter text : spring -> spring starter project
html .html thymeleaf
JSP(Java Server Page) .jsp  
ASP    
외우기 web을 만들때마다 필수로 만들어야 한다
외워둬야 한다.
static = html

webapp = jsp
추가해야지 나온다.
 
 
gradle을 할 경우 오른쪽 버튼 클릭 후
Gradle의 Refresh Gradle Project를 눌러야 한다.


옆 사진에서 static의 sub를 삭제시켜야 나온다.

<결과>

MVC

  • Model(Class) java
  • View(Screen-WB) jsp
  • Controller(Server-WS) java : 1_URL(RequestMapping) / 2_method(String)

 springboot: 서버쪽 (빨간색)
index.jsp: 클라이언트 (주황색)
java 추가
   

[GET / POST]

주소창 이동
document.location=".....";
<form mehod='GET'/'POST'
           action=서버프로그램명>
<input
<select
<textarea>
</form>		 GET POST
view에서 GET으로 보내면 server도
GET으로 받는다.		  

<MyController 코드>

package com.human.springboot;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class MyController {
	//localhost:8081/home을 웹브라우저에서 입력하면,
	//WS에서는 home()을 실행한다(test1.jsp를 웹브라우저에게 보낸다.)
	@GetMapping("/")
	public String messi(Model model) {
		String nickname = "홍길동";
		model.addAttribute("value"+1,nickname);
		model.addAttribute("value"+2,"12345645");
		model.addAttribute("value"+3,1443);
		return "root";
	}
}

<root 코드>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
Nickname: ${value1}<br>
Mobile: ${value2}<br>
Birthday: ${value3}<br>
</body>
</html>

<결과>

<코드>

package com.human.springboot;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class MyController {

	@GetMapping("/")
	public String messi(Model model) {
		int i;
		for(i=1;i<10;i++) {
			model.addAttribute("value"+i,"9 x"+i+"="+(9*i));
		}
}
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
9단<br>
${value1}<br>
${value2}<br>
${value3}<br>
${value4}<br>
${value5}<br>
${value6}<br>
${value7}<br>
${value8}<br>
${value9}<br>
</body>
</html>

<결과>

<코드>

home

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href='/resources/css/back.css'>
    <title>Document</title>
</head>
<style>
    table{
        border-collapse: collapse;
        background-color: rgba(0,0,0,0);
    }
    td{
        text-align: left;
    }
    a{
        color: white;
    }
</style>
<body>
	
    <table>
        <tr>
            <td><a href="/login">로그인&nbsp;|</a><a href="/singin"> 회원가입</a></td>
        </tr>
    </table>
    
</body>
</html>

login

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href='/resources/css/back1.css'>
    <title>Document</title>
</head>
<style>
    table{
        border: 5px solid rgb(248, 226, 198);
        border-radius: 10px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 300px;
        background-color:rgb(248, 226, 198);
        opacity: 0.9;
        box-shadow: 5px 5px lightgray;
    }
    td{
        width: 100px;
        height: 50px;
    }
    button{
        background-color:rgba(0, 0, 0, 0); 
        color:rgb(175, 131, 131); 
        border: 1px solid rgb(175, 131, 131); 
        border-radius: 5px;
    }
    button:hover{
        color: white;
        background-color: rgb(175, 131, 131);
    }
    body{
        padding: 20px;
        background-size: 1400px;
    }
    input{
        outline: none;
    }
    a{
        color: rgb(175, 131, 131);
    }
</style>
<body>
    <table>
        <tr>
            <td>ID </td><td><input type="text" style="width: 120px;" id="login" placeholder="ID" ></td>
        </tr>
        <tr>
            <td>PASSWORD </td><td><input type="password" style="width: 120px;" id="password" placeholder="PASSWORD"></td>
        </tr>
        <tr align="center" width="100px">
            <td colspan="2"><button id="checklogin">로그인</button><button id="cancle">취소</button></td>
            
        </tr>
        <tr>
            <td></td>
            <td align="right"><a href="/singin">회원가입</a></td>
        </tr>
    </table>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(document)
    .on('click','#checklogin',function(){
        if($('#login').val()==''){
            alert('아이디를 입력하세요');
        }else if($('#password').val()==''){
            alert('비밀번호를 입력하세요');
        }else{
            location.href='/home';
        }
        
    })
    .on('click','#cancle',function(){
        location.href='/home';
    })
</script>
</html>

singin

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href='/resources/css/back2.css'>
    <title>Document</title>
</head>
<style>
    table{
        border: 1px solid lightgray;
        border-radius: 5px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 250px;
        background-color:lightgray;
        opacity: 0.8;
        width: 270px;
        box-shadow: 5px 5px;
    }
    td{
        width: 100px;
        height: 30px;
    }
    button{
        background-color:rgba(0, 0, 0, 0); 
        color:gray; 
        border: 1px solid gray; 
        border-radius: 5px;
    }
    button:hover{
        color: white;
        background-color: gray;
    }
    body{
        padding: 20px;
        background-size: 1400px;
    }
    span{
        font-size: 2px;
        color: red;
    }
</style>
<body>
    <table>
        <th colspan="2"><h2>회원가입</h2></th>
        <tr><td>아이디 </td><td><input type="text" style="width: 130px;" id="login"  placeholder="아이디 입력."></td></tr>
        <tr><td>비밀번호 </td>
            <td><input class='pw' type="password" style="width: 130px;" id="password" placeholder="비밀번호 입력."></td></tr>
        <tr><td>비밀번호확인 </td>
            <td colspan="2"><input class='pw' type="password" style="width: 130px;" id="checkpassword" placeholder="비밀번호 다시 확인.">
            <span id="same" size="'5"></span></td></tr>
        <tr><td>실명 </td><td><input type="text" style="width: 130px;" id="name" placeholder="실명 입력."></td></tr>
        <tr>
            <td>성별</td>
            <td><input type="radio" name="gender" id="gender" value="남자">남성
                <input type="radio" name="gender" id="gender" value="여자">여성</td>
        </tr>
        <tr>
            <td>번호</td><td><input type="text" style="width: 130px;" id="mobile" placeholder="핸드폰 번호 입력."></td>
        </tr>
        <tr >
            <td colspan="2" align="left">관심분야<br>
                <input id='interest' type="checkbox" name="interest" value="정치">정치&nbsp;
                <input id='interest' type="checkbox" name="interest" value="경제">경제&nbsp;
                <input id='interest' type="checkbox" name="interest" value="사회">사회<br>
                <input id='interest' type="checkbox" name="interest" value="문화">문화&nbsp;
                <input id='interest' type="checkbox" name="interest" value="종교">종교&nbsp;
                <input id='interest' type="checkbox" name="interest" value="제테크">제테크<br>
                <input id='interest' type="checkbox" name="interest" value="연예">연예&nbsp;
                <input id='interest' type="checkbox" name="interest" value="IT">IT&nbsp;
                <input id='interest' type="checkbox" name="interest" value="스포츠">스포츠<br><br></td>
                
        </tr>
        <tr align="center">
            <td colspan="2"><button id="enrollment" >등록</button><button id="cancle">취소</button></td>
        </tr>
    </table>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(document)
    .on('click','#enrollment',function(){
        if($('#login').val()==''){
            alert('아이디를 입력하세요');
        }else if($('#password').val()==''){
            alert('비밀번호를 입력하세요');
        }else if($('#name').val()==''){
            alert('실명을 입력하세요');
        }else if($("input[name=gender]:checked").val()==null){
            alert('성별을 클릭하세요');
        }else if($('#mobile').val()==''){
            alert('번호를 입력하세요');
        }else if($('#mobile').val().length!=11){
            alert('번호를 확인하세요');
        }else{
            location.href='/home';
            
            var len = $("input[name=interest]:checked").length;
            var checkar = [];
            if(len>1){
                $("input[name=interest]:checked").each(function(){
                    str=$(this).val();
                    checkar.push(str);
                })
            }
            alert('아이디 : '+$('#login').val()+'\n'+'실명 : '+$('#name').val()+'\n'
                +'성별 : '+$("input[name=gender]:checked").val()+'\n'+'모바일 : '+$('#mobile').val()+'\n'
                +'관심분야 : '+checkar);
        }
    })
    .on('click','#cancle',function(){
       location.href='/login';
    })
    .on('keyup','.pw',function(){
        if($('#password').val()!=$('#checkpassword').val()){
            $('#same').html('비밀번호가 일치하지 않습니다.');
        }else{
            $('#same').html(null);
        }
        
    })
</script>
</html>

Mycontroller

package com.human.springboot;

import java.util.ArrayList;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class MyController {
	@GetMapping("/home")
	public String home() {
		return "home";
	}
	@GetMapping("/login")
	public String login() {
		return "login";
	}
	@GetMapping("/singin")
	public String singin() {
		return "singin";
	}
}

배경화면이 안들어가서 따로 넣어서 만듬

<결과>

home login singin

 

728x90