ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [Spring Boot] 지역별 카페 추천 프로젝트 (1)
      스프링 프로젝트 - 카페 만들기 2022. 8. 28. 16:59

      여행할 때 방문하면 좋을 카페를 추천하는 웹 프로젝트

       

       

      📌 기본 설정

       

      의존성 추가 항목

       

      build.gradle 수정

      dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
    implementation 'org.springframework.boot:spring-boot-starter-web'
    compileOnly 'org.projectlombok:lombok'
    developmentOnly 'org.springframework.boot:spring-boot-devtools'
    annotationProcessor 'org.projectlombok:lombok'
    providedRuntime 'org.springframework.boot:spring-boot-starter-tomcat'
    testImplementation 'org.springframework.boot:spring-boot-starter-test'

    implementation group: 'org.mariadb.jdbc', name: 'mariadb-java-client'
}

      이번 프로젝트에서는 MariaDB를 사용할 것이기 때문에 관련 의존성을 추가해준다.

       

       

      📌 데이터베이스 생성

       

      cafe 데이터베이스를 생성했다.

      이제 cafe를 사용하는 사용자를 만들어야 한다.

      아래와 같이 만들었다.

       

      그리고 세션 관리자에서 CAFEUSER를 추가해서

      아래와 같이 cafe 데이터베이스만 볼 수 있도록 한다.

       

      이제 데이터베이스 설정을 spring에서 해주어야 한다.

       

      application.properties

      spring.datasource.driver-class-name=org.mariadb.jdbc.Driver
spring.datasource.url=jdbc:mariadb://localhost:12345/cafe
spring.datasource.username=cafeuser
spring.datasource.password=cafeuser

spring.jpa.hibernate.ddl-auto=update
spring.jpa.properties.hibernate.format_sql=true
spring.jpa.show-sql=true

spring.thymeleaf.cache=false

      DB관련 정보를 입력

      spring.jpa.hibernate.ddl-auto=update: 데이터의 변경된 부분만 업데이트

       

       

      📌 시작 화면 만들기

      (백엔드 공부를 목적으로 하는 프로젝트이기 때문에 보여지는 화면 부분은 부트스트랩을 이용할 것이다.)

       

      Bootstrap 4 Tutorial (w3schools.com)

      위 링크에서 코드를 복사해서 붙여넣는다.

       

      start.html

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

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>


</head>
<body>
<div class="jumbotron text-center">
    <h1>☕여행할 때 가면 좋은 카페 추천☕</h1>
    <p>여행하실 곳을 선택해주세요!</p>
</div>

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <h3>수원</h3>
            <p>몇 개의 카페 추천이 있는지 보여줄 예정</p>
        </div>
        <div class="col-sm-4">
            <h3>강릉</h3>
            <p>몇 개의 카페 추천이 있는지 보여줄 예정</p>
        </div>
        <div class="col-sm-4">
            <h3>제주도</h3>
            <p>몇 개의 카페 추천이 있는지 보여줄 예정</p>
        </div>
    </div>
</div>

</body>
</html>

      그리고 현재 만드는 주제에 맞게 수정하고 JS, BootStrap 링크를 추가해준다.

       

       

      이제 이 화면을 확인하기 위해 컨트롤러를 만들 것이다.

       

      CafeController 클래스

      package yeonjy.cafe.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/cafe")

public class CafeController {

    @GetMapping({"/", "/start"})
    public String start() {

        return "/cafe/start";
    }
}

       

      이제 http://localhost:8080/cafe/ 를 실행하면 아래와 같은 화면을 볼 수 있다.

      이제 직접 입력해서 화면에 보여주는 방식이 아니라 데이터베이스를 활용해서 화면에 띄우도록 수정할 것이다.

       

       

      📌 데이터 생성하기

       

      아래와 같이 entity 패키지를만들고 Area 클래스를 생성한다. 

      package yeonjy.cafe.entity;

import lombok.*;

import javax.persistence.*;


@Entity
@Getter
@Builder
@AllArgsConstructor
@NoArgsConstructor
@ToString
public class Area {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long gno;

    @Column(length = 100, nullable = false)
    private String local;

}

      일단 추후에 더 추가하는 것으로 하고 지금은 순번과 지역명만 만들었다.

       

       

      이제 AreaRepository 인터페이스를 생성한다.

      package yeonjy.cafe.repository;

import org.springframework.data.jpa.repository.JpaRepository;
import yeonjy.cafe.entity.Area;

public interface AreaRepository extends JpaRepository<Area, Long> {

}

      이 인터페이스는 JpaRepository 인터페이스를 상속한다.

      JpaRepository에는 엔티티의 타입 정보(Area)와 @Id의 타입(Long)을 지정해준다.

       

      위에서 JpaRepository를 사용하기 때문에 이를 이용해서 CRUD 작업이 가능하다.

       

      테스트 코드를 통해 데이터베이스에 데이터를 save 해보자.

       

      package yeonjy.cafe.repository;

import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import yeonjy.cafe.entity.Area;


@SpringBootTest
public class AreaRepositoryTests {

    @Autowired
    private AreaRepository areaRepository;

    @Test
    public void insertDummies(){

        Area area1 = Area.builder()
                .gno(1L)
                .local("수원")
                .build();
        System.out.println(areaRepository.save(area1));

        Area area2 = Area.builder()
                .gno(2L)
                .local("강릉")
                .build();
        System.out.println(areaRepository.save(area2));


        Area area3 = Area.builder()
                .gno(3L)
                .local("제주도")
                .build();
        System.out.println(areaRepository.save(area3));

    }
}

      수원, 강릉, 제주도를 각각 gno를 지정해서 저장해주었다.

       

      이제 위 테스트코드를 실행하면 아래와 같이 저장되어있어야 한다.

      '스프링 프로젝트 - 카페 만들기' 카테고리의 다른 글

      [Spring Boot] 지역별 카페 추천 프로젝트(2)  (0) 2022.09.01

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바