사자가 된 감자 4주차

오늘은 스프링으로 계산기를 만들어 보아요오오

우선 먼저 스프링 프로젝트를 생성합니당.

슉슉 금방 누르기만 하면 만들어져요!

주의할 점은 War파일로 만들어야 한다는 것입니당.

 

그럼 이제 만들어 보겠읍니다.

package hello.servlet;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.servlet.ServletComponentScan;


@ServletComponentScan
@SpringBootApplication
public class ServletApplication {
	public static void main(String[] args) {SpringApplication.run(ServletApplication.class, args);

	}
}

먼저, Application클래스에 ServletComponentScan 어노테이션을 지정합니다.

이걸 지정해야 서블릿을 사용할 수 있어요!!

 

그 다음은 계산기에서 계산한 값을 저장할 Data 클래스를 만들었어요! lombok을 사용하면 어노테이션 만으로 getter, setter를 설정할 수 있답니다.

package hello.servlet;

import lombok.Getter;
import lombok.Setter;

@lombok.Data
@Getter
@Setter
public class Data {
    int bunMo;
    int bnuJa;
    int result;
    public Data(int bunMo, int bnuJa, int result) {
        this.bunMo = bunMo;
        this.bnuJa = bnuJa;
        this.result = result;
    }
}

 

이렇게 Data클래스를 지정했다면 다음은 Controller를 만들거에요! controller는 페이지간의 데이터 전송이나 페이지 이동을 처리할 겁니당

package hello.servlet.Controller;

import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

@Slf4j
@Controller()
@RequestMapping("/calc")
public class mainController {

    @GetMapping("/main")
    public String mainPageCall(){
        return "main";
    }

    @GetMapping("/multiple")
    public String multiple(){
        return "multiple";
    }

    @PostMapping("/multiple")
    public String calcMultiple(@RequestParam String front, String back, Model model){
        model.addAttribute("mode","multiple");
        try {
            double a = Double.parseDouble((front));
            double b = Double.parseDouble((back));
            double result = a*b;
            model.addAttribute("data",result);
        }
        catch (NumberFormatException e){
            model.addAttribute("error","값이 비어있거나 잘못된 입력입니다.");
        }
        return "result";
    }

    @GetMapping("/divide")
    public String divide(){
        return "divide";
    }

    @PostMapping("/divide")
    public String divideCalc(@RequestParam String bunMo, String bunJa, Model model){
        model.addAttribute("mode","divide");
        try{
            double a = Double.parseDouble(bunMo);
            double b = Double.parseDouble(bunJa);
            double result=0;
            if(a!=0){
                result = b/a;
                model.addAttribute("data",result);
            }
            else{
                model.addAttribute("error","0은 분모로 올 수 없다.");
            }
        }
        catch (NumberFormatException numberFormatException){
            model.addAttribute("error","비어있거나 잘못된 입력입니다.");
        }

        return "result";
    }

    @GetMapping("/subtract")
    public String subtract(){
        return "subtract";
    }

    @PostMapping("/subtract")
    public String subtractCalc(@RequestParam String front, String back, Model model){
        model.addAttribute("mode","subtract");
        try{
            double a = Double.parseDouble(front);
            double b = Double.parseDouble(back);
            double result;
            result = a-b;
            model.addAttribute("data",result);
        }catch (NumberFormatException numberFormatException){
            model.addAttribute("error","비어있거나 잘못된 입력입니다.");
        }
        return "result";
    }

    @GetMapping("/plus")
    public String plus(){
        return "plus";
    }

    @PostMapping("/plus")
    public String plusCalc(@RequestParam String front, String back, Model model){
        model.addAttribute("mode","plus");
        try{
            double a = Double.parseDouble(front);
            double b = Double.parseDouble(back);
            double result;
            result = a+b;
            model.addAttribute("data",result);
        }catch (NumberFormatException numberFormatException){
            model.addAttribute("error","비어있거나 잘못된 입력입니다.");
        }
        return "result";
    }

}

이게 controller부분인데 상당히 길게 썼는데 Service로직까지 집어 넣어서 길게 됐습니당...ㅎㅎㅎ 원래는 서비스 로직은 따로 빼는 것이 좋ㅇ...

 

package hello.servlet.basic;

import com.fasterxml.jackson.databind.ObjectMapper;
import hello.servlet.Data;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import lombok.extern.slf4j.Slf4j;
import java.io.IOException;

@Slf4j
@WebServlet(name = "dividerServlet", urlPatterns = "/divider")
public class divider extends HttpServlet {
    ObjectMapper objectMapper = new ObjectMapper();
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        try{
            int bunJa = Integer.parseInt(req.getParameter("bunJa"));
            int bunMo = Integer.parseInt(req.getParameter("bunMo"));
            int result = 0;
            if(bunMo!=0){
                result = bunJa/bunMo;
                resp.setContentType("application/json");
                resp.setCharacterEncoding("utf-8");
                Data data = new Data(bunMo,bunJa,result);
                String answer = objectMapper.writeValueAsString(data);
                resp.getWriter().write(answer);
            }
            else {
                log.error("나누는 분모가 0이면 안됩니다.");
                String errorMessage ="분모 0은 안됩니다.";
                resp.setContentType("plain/text");
                resp.setCharacterEncoding("utf-8");
                resp.getWriter().write(errorMessage);
            }
        }
        catch (NumberFormatException numberFormatException){
            log.error("숫자 넣어주세요.");
        }
    }
}

이 부분은 서블릿을 사용한 divide클래스 부분이다. 여기서는 JSON으로 응답을 내보내도록 만들었다. JSON으로 값을 내보내려면 ObjectMapper를 사용하여 JSON형태로 HTTP메시지에서 파싱한 값을 만들어줘야한다.

 

사실 mainController와 HTML파일 만으로도 계산기를 만들 수 있다.

서비스 클래스로 따로 만들어서 하는 것이 좋지만 간단한 계산기이기 때문에 mainController로만 처리했다.

프로젝트는 옆에 처럼 구성된당. html파일이 좀 많지만... 프런트 지식이 부족하여 같은 종류의 html파일이 많당.... 좀 더 공부하고 수정해보도록 하겠다아아...

 

 

 

 

 

 

 

 

 

 

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/calc/divide" method="post">
    분모: <label><input type="text" name="bunMo"/></label>
    분자: <label><input type="text" name="bunJa"/></label>
    <button type="submit">전송</button>
    <button type="button" th:onclick="|location.href='@{/calc/main}'|">메인 메뉴</button>
</form>
</body>
</html>

이건 나누기 관련 프런트 부분이다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>multiple</title>
</head>
<body>
    <form action="/calc/multiple" method="post">
        <label><input type="text" name="front"/></label>
        <label><input type="text" name="back"/></label>
        <button type="submit">전송</button>
        <button type="button" th:onclick="|location.href='@{/calc/main}'|">메인 메뉴</button>
    </form>
</body>
</html>

이건 곱하기이이 4개 연산 모두 비슷하다아

 

그리고 계산한 결과를 보여주는 result 페이지

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>result</title>
</head>
<body>
    <a th:text="${data}"></a>
    <a th:text="${error}"></a>
    <form>
        <button type="button" th:onclick="|location.href='@{/calc/{mode}(mode=${mode})}'|">다시 하기</button>
        <button type="button" th:onclick="|location.href='@{/calc/main}'|">메인 메뉴</button>
    </form>

</body>
</html>

이걸 실행하면 이제 아래와 같은 결과를 얻을 수 있당