[Spring Boot] 게시물 사이트 제작하기 (2) - URL Parameter / Update / DB 연결 세팅

[1] 특정 게시물 불러오기 (url params로부터 가져오기)

1) detail.html

: url 파라미터로부터 게시물 index 얻는 법

// [url에서 정보 가져오기]
let temp_url = window.location.href; // 현재의 url 정보

let split_temp_url = temp_url.split('/'); // 슬래쉬인 '/'으로 split
let final_id = split_temp_url[split_temp_url.length - 1]; // 마지막 변수값을 가져온다.

// [?가 존재하는 경우의 id값 추출하기]
let split_q = final_id.split("?"); // 물음표인 '?'으로 split

if(split_q.length > 0){ // split한 값이 0 이상이이면? 값이 존재한다는 사실.
    final_id = split_q[0]; // split하여 얻은 값의 0번째 index는 게시물 id를 의미.
}

$(document).read(function() {
    detail_board(); // detail_board() 함수를 실행
})

2) detail.html

: detail_board 함수 수정 (data의 order)

function detail_board(){
        $.ajax({
            url : "/api/board/detail",
            type : "GET",
            contentType : 'application/json; charset=utf-8',
            // data : { order : $("#detail_board_order").val()},
            data : { order : final_id},
            cache : false,
            success : (obj_data, status, xhr) => {
                console.log(JSON.stringify(obj_data));

				// 가져온 값 (order, title, content, author)을 경고창에서 띄운다.
                // alert(obj_data["resultCode"]);
                alert(obj_data["detail_board"]["order"]);
                alert(obj_data["detail_board"]["title"]);
                alert(obj_data["detail_board"]["content"]);
                alert(obj_data["detail_board"]["author"]);

                // $("#detail_board_title").val(obj_data.order); // 이렇게도 표현 가능
                $("#detail_board_order").val(obj_data["detail_board"]["order"]);
                $("#detail_board_title").val(obj_data["detail_board"]["title"]);
                $("#detail_board_content").val(obj_data["detail_board"]["content"]);
                $("#detail_board_author").val(obj_data["detail_board"]["author"]);

            },
            error: (obj_data, status, error) => {
                alert("error!!");
                alert(JSON.stringify(obj_data));
            }

        })
    }

• 요청 경로 : /api/board/detail
• 하는 일 : url params에서 추출한 게시물 id값을 data에 담고, get 요청을 한다.
• 특징 : 아래의 코드와 같이 return된 값을 접근할 수 있다. (두 가지 방식)

  // 첫 번째 방법
  $("#detail_board_title").val(obj_data.order); // 이렇게도 표현 가능
  // 두 번째 방법
  $("#detail_board_order").val(obj_data["detail_board"]["order"]);

결과 화면

[2] Update (게시물 내용 수정하기)

1) detail.html (Javascript function 생성하기)

<input type = "text" id = "detail_board_order" readonly/>
<input type = "text" id = "detail_board_title"/>
<input type = "text" id = "detail_board_content"/>
<input type = "text" id = "detail_board_author"/>

<button onclick="update_board()">글 수정하기</button>

function update_board(){
    $.ajax({
        url : "/api/board/update",
        type : "GET",
        contentType : 'application/json; charset=utf-8',
        // data : { order : $("#detail_board_order").val()},
        data : {
            order: final_id,
            title: $("#detail_board_title").val(),
            content: $("#detail_board_content").val(),
            author: $("#detail_board_author").val(),
        },
        cache : false,
        success : (obj_data, status, xhr) => {
            alert("수정 완료!");
        },
        error: (obj_data, status, error) => {
            alert("error!!");
            alert(JSON.stringify(obj_data));
        }
    })
}

• 요청 경로 : '/api/board/update'
• 하는 일 : 수정한 데이터를 data에 담고

2) BoardRestController.java (API 생성하기)

@GetMapping({"/update"})
public Map<String, Object> update(@RequestParam Map<String, Object> params) {
    int index = Integer.parseInt(params.get("order") + "") - 1;
    
    // boardList에서 index 번째의 값(게시물)을 Map 타입의 boardMap으로 선언 및 할당.
    Map<String, Object> boardMap = boardList.get(index);
    
    // boradMap에 수정된 내용으로 변경.
    boardMap.put("title", params.get("title")); 
    boardMap.put("content", params.get("content"));
    boardMap.put("author", params.get("author"));

	// 결과 출력 Map 선언 및 할당
    Map<String, Object> resultMap = new HashMap<>();
    resultMap.put("resultCOde", 200);

    return resultMap;
}

• 경로 : /api/board/update
• 하는 일 : 게시물의 새로운 정보를 수정해준다.

결과

1) 수정하기 전

2) 수정한 뒤

[3] build.gradle / application.yaml 파일 수정 (DB 연결 위함)

1) build.gradle 파일 수정

:dependencies에 아래의 내용을 추가한다.

//domain
implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
//db
runtimeOnly 'com.mysql:mysql-connector-j'
implementation group: 'org.mariadb.jdbc', name: 'mariadb-java-client', version: '2.2.0' //db

• mysql-connector 기능을 추가한다.

2) application.yaml 파일 수정

datasource:
  url: jdbc:mysql://도메인 주소:3306/스키마 이름?characterEncoding=UTF-8&serverTimezone=Asia/Seoul
  username: (유저이름)
  password: (유저 비밀번호)
  driver-class-name: com.mysql.cj.jdbc.Driver

• url에 작성된 스키마 이름을 접근하여 db를 연결한다.

sql 연결했음

build.gradle / application.yaml 파일 수정

[4] 폴더 / 파일 생성

1) 폴더 생성

경로 : src/main/java/com.example/demo/domain와 같이 'domain' 폴더 생성

2) Board.java 파일 생성

package com.example.demo.domain;

import jakarta.persistence.Entity;
import jakarta.persistence.Id;
import lombok.Getter;
import lombok.Setter;

// repository를 만들기 위해서 entity를 만드는 과정이다. 이를 위해 필요한 게 entity
// 이 모든 것은 DB랑의 연결을 위함이다.

@Setter
@Getter
@Entity // 데이터 베이스 알아서 만들어주고, 내 데이터 베이스랑 결합해서 사용할거라는 의미.
public class Board {

    @Id // primary key를 지정
    Integer id;

    // 데이터 정보 선언
    String title;
    String content;
    String author;
}

[5] 각 Tool에서 db 연결하기

1) 인텔리제이

• Host는 그대로 둬도 된다.
• User : 유저 이름 작성
• Password : 유저 비밀번호 작성
• URL : application.yaml에 작성한 것과 동일하게 작성
  (위의 모든 내용은 예시입니다.)
  -> Test Connection 테스트 하기

2) MySQLWorkbench

• Conection Name : 자유롭게 작성해도 된다.
• Hostname : 도메인을 작성한다. (ex. www.naver.com)
• User : 유저 이름 작성
• Password : 유저 비밀번호 작성
  -> Test Connection 테스트 하기