2. 카페 메뉴얼관리 ( 데이터 조회 )

일단 mvc 모델에 대해서 알아봤다.

 

유지보수가 좋기 때문에 

사용자가 컨트롤 하는부분과 모델  , 뷰 부분을 나누는 걸로 이해했다. 

---

MVC 패턴

1. 모델(movel)

먼저 보면 

데이터 베이스와 직접 적으로 연결되어있는 백엔드 작업 DAO

    public List<HashMap<String, Object>> dataSelectList (HashMap<String, Object> params) throws Exception;

 

이것은 데이터 베이스 설계 

<select id="dataSelectList" parameterType="HashMap" resultType="HashMap">
    SELECT
        product_index
        , product_name
        , product_category
        , product_price
        , product_writer
        , product_explan
        , product_date
    FROM
        product
    ORDER BY
        product_index DESC
</select>

여기 부분이 xml 확장자 인데 sql 쿼리를 통해 데이터 베이스에서 데이터를 조회 하는 부분이 

모델이다.  ( 백엔드에서 모델 부분은 밑에 적을 것이다 )

 

2. 뷰(View)

같은 경우에는 

컨트롤러 코드 안에 중에서 

ModelAndView mav = new ModelAndView("jsonView");

연결코드인데

( vscode 안에 프론트엔드가 뷰에 속할 것으로 보인다 . 이것은 연결 코드이고 )

    methods: {
        // 데이터 목록 조회
        dataSelectList: function () {
            const vm = this;
            axios({
                url: "/dataSelectList.json",
                method: "post",
                headers: {
                    "Content-Type": "application/json; charset=UTF-8",
                },
                data: {},
            })
                .then(function (response) {
                    console.log("dataList - response : ", response.data);
                    vm.dataList = response.data;
                })
                .catch(function (error) {
                    console.log("dataList - error : ", error);
                    alert("상품 목록 조회에 오류가 발생했습니다.");
                });
        },

이것이 프론트 엔드 부분에서 뷰에 해당 하는 부분이다.

axios(엑시오스)는 http 요청을 보내기 위한 라이브러리 이다. 

서버와 클라이언트 간에 데이터를 주고 받는 역활을 한다.

 

3. 컨트롤러 

 

사용자의 요청을 받아서 그에 맞는 모델을 호출하고 그 결과를 뷰에 전달하는 역활을 한다. 

@RequestMapping(value = "/dataSelectList.json", method = RequestMethod.POST)
public ModelAndView dataSelectList(@RequestBody HashMap<String, Object> params) {
    ModelAndView mav = new ModelAndView("jsonView");
    mav.addObject("data", dataService.dataSelectList(params));
    return mav;
}

---

시나리오 설명 

 

프론트엔드에서 데이터를 요청하면 

    methods: {
        // 데이터 목록 조회
        dataSelectList: function () {
            const vm = this;
            axios({
                url: "/dataSelectList.json",
                method: "post",
                headers: {
                    "Content-Type": "application/json; charset=UTF-8",
                },
                data: {},
            })
                .then(function (response) {
                    console.log("dataList - response : ", response.data);
                    vm.dataList = response.data;
                })
                .catch(function (error) {
                    console.log("dataList - error : ", error);
                    alert("상품 목록 조회에 오류가 발생했습니다.");
                });
        },

 

백엔드 코드인 dataInsert 매서드에 대해서 정의하는 부분이다. ( 데이터 조회 )

 

    @RequestMapping(value = "/dataSelectList.json", method = RequestMethod.POST)
    public ModelAndView dataSelectList(@RequestBody HashMap<String, Object> params) throws Exception {
        System.out.println("dataSelectList Controller");
        ModelAndView mav = new ModelAndView("jsonView");
        mav.addObject("result", dataService.dataSelectList(params));
        return mav;
    }

 

여기서 요청을 받는다 그러면 /dataSelectList.json 주소로 POST방식의 http 요청을 보내고 그결과를 받아서 처리하는 역할이다. 

@RequestMapping(value = "/dataSelectList.json", method = RequestMethod.POST) 프론트엔드에서 저 주소로 요청을 보내면 이 요청은 백엔드에서 해당 컨트롤러 메서드를 통해 처리 되는 것이다.

 

@RequestBody HashMap<String, Object> params

hashMap 이라는 변수를 params 라는 매개 변수로 받고 modelandview타입으로 반환한다.

throws Exception{ } 또한 이 뒤에 부분은 메서드에서 발생하는 예외를 메서드를 호출한 곳으로 던짐을 의미한다. 

 

ModelAndView mav = new ModelAndView("jsonView");

 

즉 이부분은 백엔드에서 프론트엔드(클라이언트)로 부터 받은 요청을 처리하고 그결과를 jsonView 라는 뷰를 통해 json 형식으로 반환하도록 설정하는 코드 

 

쉽게 말하자면 

 

mav.addObject("result", dataService.dataSelectList(params));

이 코드는 메서드를 호출하여 얻은 결과를 "result"라는 이름으로 ModelAndView 객체에 추가한다.

 

즉 위에 코드와 이코드는  JSON 형식으로 변환하여 클라이언트에게 반환하는 역할을 하고 있다.

 

 

 

여기서 잠깐 ~ 여기서 

매개 변수란 ? 메서드가 실행될 떄 필요한 값을 전달받는 변수를 의미한다. 키가 문자열 , 값이 객체인 해시맵 자료구조를 의미 결과적으로 프론트엔드에서 보내는 데이터를 담는 역할을한다.

 

@RequestBody(어노테이션) 이란? http 요청 본문을 자바 객체로 변환 해주는 역할을 한다. 

결과적으로 json 데이터를 parms 에 자동으로 매핑 해주는 역할이다. 

 

해시맵 자료구조란? 해시맵은 키-값 쌍을 저장하는 자료구조입니다. 각 키는 해시 함수를 통해 해시값으로 변환되고, 이 해시값을 기반으로 데이터가 저장되거나 검색됩니다.  결과적으로 키가 문자열, 값이 객체인 해시맵이다.

 

 

---

더 쉽게 ? 설명

 

프론트엔드 ( 클라이언트가 ) 웹서버에 특정 URL로 요청을 보냈다고 생각해보면

이 요청은 SPRING MVC 프레임 워크에 의해 해당 URL을 처리하는 컨트롤러 메서드에 도달하게 된다.

ModelAndView mav = new ModelAndView("jsonView");
HashMap<String, Object> params = new HashMap<>();
params.put("id", "123");
mav.addObject("result", dataService.dataSelectList(params));

 

여기서 dataService.dataSelectList(params)는 ID 123 이라는 데이터를 조회 하는 메서드로 

이실행 결과를 result라는 이름으로 ModelAndView객체에 저장된다.

 

ModelAndView 객체에 설정된 뷰이름 jsonview을 찾아 해당 뷰를 사용하여 ModelAndView 객체에 저장된 데이터를 

처리하게 된다. jsonview 라는 이름을 가진 뷰는 일반적으로 데이터를 json 형태로 반환하는 역활을한다.

 

따라서 최종적으로

{
    "result": [
        {
            "id": "123",
            "name": "홍길동",
            "email": "hong@example.com"
            // ... 기타 조회된 데이터
        },
        // ... 기타 조회된 데이터
    ]
}

 

밑에 처럼 저장되게 되는거다.

 

일종의 형식이다.