투케이2K

5. (spring/스프링) [thymeleaf/타임리프] spring 스프링 프로젝트에 thymeleaf 타임 리프 적용 실시 본문

Spring

5. (spring/스프링) [thymeleaf/타임리프] spring 스프링 프로젝트에 thymeleaf 타임 리프 적용 실시

투케이2K 2021. 7. 8. 15:46

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : inteli j

개발 언어 : spring

/* =========================== */

​

/* =========================== */

[폴더 및 파일 추가]

​

​

​

/* =========================== */

​

/* =========================== */

[소스 코드 : controller >> ThymeLeafController]

package com.project.solutionpackage.controller;

import com.project.solutionpackage.model.Return_DB_Json_Model;
import com.sun.org.apache.xpath.internal.operations.Mod;
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.RequestParam;

import java.util.Collection;
import java.util.Map;

// rest 방식 컨트롤러 / Controller = view 연결
@Controller
public class ThymeLeafController {

    /**
     * [클래스 설명]
     * 1. thymeleaf 타임리프 view 지정 부분 (html 지정)
     * */


    // [get 방식 : 일반 호출 방식]
    // [경로 지정 : http://localhost:7000/testThymeleafOne]
    // [get 로직 : pTag 라는 key에 hello 값을 담아서 testThymeleaf.html로 리턴합니다]
    // [html 로직 : testThymeleaf.html은 리턴 받은 pTag key 값을 불러와서 데이터를 표시해줍니다]
    @GetMapping("/testThymeleafOne")
    public String testThymeleafOne(Model model){
        System.out.println("");
        System.out.println("[DBApiController] : [testThymeleafOne]");
        System.out.println("");

        //html에 반환할 key, value 지정 실시
        model.addAttribute("pTag", "hello");
        return "testThymeleaf"; //testThymeleaf.html 호출
    }


    // [get 방식 : 파라미터 받는 방식]
    // [경로 지정 : http://localhost:7000/testThymeleafTwo?name=투케이]
    // [get 로직 : pTag 라는 key에 파라미터 값으로 들어온 데이터를 넣어서 testThymeleaf.html로 리턴합니다]
    // [html 로직 : testThymeleaf.html은 리턴 받은 pTag key 값을 불러와서 데이터를 표시해줍니다]
    @GetMapping("/testThymeleafTwo")
    public String testThymeleafTwo(@RequestParam Map<String, String> param, Model model){
        //input으로 들어온 파라미터 데이터 확인 실시
        System.out.println("");
        System.out.println("[DBApiController] : [testThymeleafTwo]");
        System.out.println("[request keySet] : " + String.valueOf(param.keySet()));
        System.out.println("[request name] : " + String.valueOf(param.get("name")));
        System.out.println("");

        //html에 반환할 key, value 지정 실시
        model.addAttribute("pTag", String.valueOf(param.get("name"))); //일반 key, value
        return "testThymeleaf"; //testThymeleaf.html 호출
    }


    // [get 방식 : 파라미터 받은 후 객체 매핑 방식]
    // [경로 지정 : http://localhost:7000/testThymeleafThree?idx=1&name=투케이]
    // [get 로직 : pTag 라는 key에 파라미터 값으로 들어온 데이터를 model 객체에 매핑해 testThymeleaf.html로 리턴합니다]
    // [html 로직 : testThymeleaf.html은 리턴 받은 pTag key 값을 불러와서 데이터를 표시해줍니다]
    @GetMapping("/testThymeleafThree")
    public String testThymeleafThree(@RequestParam Map<String, String> param, Model model){
        //input으로 들어온 파라미터 데이터 확인 실시
        System.out.println("");
        System.out.println("[DBApiController] : [testThymeleafThree]");
        System.out.println("[request keySet] : " + String.valueOf(param.keySet()));
        System.out.println("[request idx] : " + String.valueOf(param.get("idx")));
        System.out.println("[request name] : " + String.valueOf(param.get("name")));
        System.out.println("");

        //html에 객체 지정 실시
        String idx = String.valueOf(param.get("idx"));
        String name = String.valueOf(param.get("name"));

        Return_DB_Json_Model return_db_json_model = new Return_DB_Json_Model(idx, name); //모델 객체에 데이터 지정

        model.addAttribute("pTag", return_db_json_model); //value 값에 객체를 지정
        return "testThymeleaf"; //testThymeleaf.html 호출
    }

}

​

​

​

[소스 코드 : templates >> testThymeleaf.html]

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 내부 css -->
    <style>
        #pId {
            font-size: 200%;
            color: #0000ff;
        }
    </style>

    <!-- 내부 js -->
    <script>
        window.onload = function() {
            console.log("");
            console.log("[window onload] : [start]");
            console.log("");

            // 데이터 확인 실시
            var data = document.getElementById("pId").innerText;
            alert(data);
        };
    </script>

</head>

<body>
<!-- p 태그 삽입 실시 : 일반 key : value 형태 표시 -->
<p id = "pId">data : <span th:text="${pTag}"></span></p>

<!-- p 태그 삽입 실시 : 객체 형태 데이터 가져옵니다 (model 에 포함된 변수 이름 지정) -->
<!--<p id = "pId" th:object="${pTag}">data : <span th:text="*{state}"></span> : <span th:text="*{message}"></span></p>-->
</body>

</html>

​

​

​

​

[소스 코드 : build.gradle]

//thymeleaf
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

​

​

​

​

[소스 코드 : application.yml]

spring:
  devtools:
    livereload:
      enabled: true
  datasource:
    driver-class-name: oracle.jdbc.OracleDriver
    url: jdbc:oracle:thin:@115.68.186.215:1521:servername
    username: schemauser
    password: pw1234
  thymeleaf:
    cache: false


server:
  port: 7000



mybatis:
  mapper-locations: classpath:mappers/*.xml
  type-aliases-package: com.project.solutionpackage.model

​

​

​

[소스 코드 : model >> Return_DB_Json_Model]

package com.project.solutionpackage.model;

import lombok.Data;

@Data
public class Return_DB_Json_Model {

    /**
     * [클래스 설명]
     * 1. 최종적으로 반환할 데이터 포맷 형태 정의 클래스
     * 2. controller 에서 사용한다
     * */

    // [현재 date 확인]
    private String state;
    private String message;

    public Return_DB_Json_Model(String state, String message) {
        this.state = state;
        this.message = message;
    }

}

/* =========================== */

​

/* =========================== */

[결과 출력]

​

/* =========================== */

​

/* =========================== */

[프로젝트 파일 첨부]

​

SolutionPackage.zip
1.53MB

/* =========================== */

반응형
저작자표시

'Spring' 카테고리의 다른 글

7. (spring/스프링) [thymeleaf/타임리프] each 사용해 table 테이블 데이터 동적으로 추가 실시  (0) 2021.07.09
6. (spring/스프링) [JSP] spring 스프링 프로젝트에 JSP 적용 실시  (0) 2021.07.08
4. (spring/스프링) [파일 첨부] 기본 api 생성 및 오라클 DB 접속, 쿼리 실행 프로젝트  (0) 2021.07.08
3. (spring/스프링) 오라클 DB 접속 및 select , insert , delete , procedure 프로시저 호출 수행 실시  (0) 2021.07.07
2. (spring/스프링) controller 컨트롤러 사용해 get, post api 생성 실시  (0) 2021.07.06
'Spring' Related Articles more
Comments