[SpringBoot+Vue.js] 정리 (2) MariaDB 설치 및 JPA 추가하여 프론트 에 객체 데이터 출력

DB(MariaDB) 및 JPA를 사용하기 위해,  build.gradle 추가

implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
runtimeOnly 'org.mariadb.jdbc:mariadb-java-client'

MaraiDB 설치

https://mariadb.org/download/?t=mariadb&p=mariadb&r=10.11.2&os=windows&cpu=x86_64&pkg=msi&m=blendbyte 

Download MariaDB Server - MariaDB.org

인텔리제이 데이터 소스 추가 

+ (새로작성) -> mariaDB 선택

mariaDB 설치 시,

기입한 ID(root) , 비밀번호

application.yml 

데이터소스 설정 추가

spring:
  datasource:
    url: jdbc:mariadb://localhost:3306/gallery
    driver-class-name: org.mariadb.jdbc.Driver
    username: root
    password: 1234

테이블을 생성하고, 

Entity 객체 생성함.

* javax.persistence 에서 jakarta.persistence 변경되어, 어떤 차이가 있는 가?

 

javax.persistence와 jakarta.persistence는 Java에서 Java Persistence API(JPA)와 관련된 인터페이스와 클래스를 제공하는 두 개의 패키지 javax.persistence는 Java EE 5에서 처음 도입된 JPA의 원래 패키지 이름입니다. 그러나 2017년에 오라클은 Java EE 소유권을 이클립스 재단으로 이전하기로 결정하여, Eclipse 재단으로 소유권이 이전됨에 따라 Jakarta EE 9에서 패키지 이름을 jakarta.persistence로 변경

 

https://stackoverflow.com/questions/60021815/why-has-javax-persistence-api-been-replaced-by-jakarta-persistence-api-in-spring

Why has javax.persistence-api been replaced by jakarta.persistence-api in spring data jpa starter?

 

Controller

@RestController
public class ItemController {

    @Autowired
    ItemRepository itemRepository;

    // front end - api test 용
    @GetMapping("/api/items")
    public List<Item> getItems() {
        List<Item> items = itemRepository.findAll();
        return items;
    }
}

 

Frontend 

Home.vue

<script>
import Card from "@/components/Card";
import axios from "axios";
import {reactive} from "vue";
export default {
  name: "Home",
  components: {Card},
  setup(){
    const state = reactive({
      items:[]
    })

    axios.get("/api/items").then((res) => {
      console.log(res);
      state.items = res.data;
    })

    return {state}
  }
}

</script>

Card.Vue

<script>
import lib from "@/scripts/lib";

export default {
  name: "Card",
  props: {
    item: Object,
  },
  setup() {
    return {lib}
  }
}
</script>

props 에서 받아올 item 을 객체 타입으로 변경

template 에서 받아온 데이터 출력해보기.

* 데이터 바인딩 :{{ }} 

  ` (작은따옴표 아님) 백틱(backtick) 기호는 ES6(ECMAScript 2015)부터 추가된 템플릿 리터럴(Template literal) 문법에서 사용되는 기호

<template>
  <div class="card shadow-sm">
    <span class="img" :style="{backgroundImage: `url(${item.imgPath})`}"/>

    <div class="card-body">
      <p class="card-text">
       <span>
         {{ item.name }} &nbsp;
       </span>
        <span class="discount badge bg-danger">
            {{ lib.getNumberFormatted(item.discountPer) }}%
       </span>
      </p>


      <div class="d-flex justify-content-between align-items-center">
        <button class="btn btn-primary">구입하기</button>
        <small class="price text-muted">
          {{ lib.getNumberFormatted(item.price) }}원
        </small>
        <small class="real text-danger">
          {{ lib.getNumberFormatted(item.price - item.price * item.discountPer / 100) }}%
        </small>
      </div>
    </div>
  </div>
</template>