Vue.js / 4

 

 

 

 

 

 

 

 

 

 

<script>
// Options Api (api를 옵션으로 쓰는)
export default{
	data(){
		return{
			test:"options"	
		};
	}
}
</script>



<script setup>
// Composition Api (api끼리 모아놓는) 이 방법을 쓰길 권장
let test = "composition"
</script>

 

 

 

 

 

https://velog.io/@yeyo0x0/Vue.js-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4-%ED%9B%85

[Vue.js] 라이프사이클 훅

 

 

 

 

 

 

 

 

베포할때는 지워도 되는 부분이다 개발할때만 필요한것

 

 

 

 

 

 

@Configuration
@EnableWebMvc
public class CorsConfig implements WebMvcConfigurer{
	@Override
	public void addCorsMappings(CorsRegistry registry) {

		//모든 대상의 cors 설정을 허락해주는 한줄
		registry.addMapping("/**");
	
	
	}
}

 

 

 

 

 

 

 

- 프론트식으로 화면 출력하는법 ~~

<script>
// Options API , 객체의 속성으로 API를 쓴다.
export default {
  data() {
    return {
      test: "haha",
	  list:[] //null이면 오류나서 이렇게 빈 배열이라고 하는것
    };
  },
  beforeCreate() { 
    console.log("List.vue beforeCreate");
  },
  created() { 
    console.log("List.vue created");
  },
  beforeMount() { 
    console.log("List.vue beforeMount");
  },
  mounted() { 
    console.log("List.vue mounted");

    fetch("http://localhost:8080/api/menus")
      .then(response => response.json())
      .then(list => { 
        console.log(list);
		this.list = list;
      });
  },
  beforeUpdate() { 
    console.log("List.vue beforeUpdate");
  },
  updated() { 
    console.log("List.vue updated");
  },
  beforeUnmount() { 
    console.log("List.vue beforeUnmount");
  },
  unmount(){
      console.log("List.vue unmount");
   }
}
</script>

<template>
  <main>
    <div class="tab-search-container">
      <div class="top-img-title">
        <img src="/image/menu-management.svg" alt="제목입력" />
        <h1>Rland Menu</h1>
      </div>
      <div class="tab-search-wrap">
        <section class="tab-section">
          <h1>탭 목록</h1>
          <ul>
            <li class="selected">
              <a href="list">전체메뉴{{test}}</a>
            </li>
            <li>
              <a href="">커피</a>
            </li>
            <li>
              <a href="">수제청</a>
            </li>
            <li>
              <a href="">샌드위치</a>
            </li>
            <li>
              <a href="">쿠키</a>
            </li>
          </ul>
        </section>
        <!-- -------------------------------------------------- -->
        <section class="search-section">
          <h1>검색</h1>
          <form action="list" method="get">
            <input type="text" name="q" />
            <button type="submit" class="icon icon-search"></button>
          </form>
        </section>
      </div>
    </div>

    <section class="menu-list-section">
      <h1 class="d-none">메뉴 목록</h1>
      <div class="menu-list">
        <section class="menu" v-for="m in list">
          <div>
            <a href="detail.html">
              <img src="/image/해봉라떼.jpg" alt="에스프레소" />
            </a>
          </div>
          <h1 v-text="m.korName"></h1>
          <h2>{{ m.price }}원</h2>
          <div></div>
          <div>
            <a href="" class="icon icon-heart">좋아요</a>
            <span>1</span>
          </div>
          <div>
            <a href="" class="icon icon-plus icon-lg">추가</a>
            <a href="" class="icon icon-cart icon-lg">장바구니</a>
          </div>
        </section>
      </div>

      <div class="price-and-cart-in-count">
        <div>
          <span>금액 42,500</span>
        </div>
        <div class="cart-in-count">
          <a href="../cart/list.html" class="icon icon-cart-count"></a>
          <span>7</span>
        </div>
      </div>
      <input id="input-member-id" type="hidden" />
    </section>
  </main>
</template>

<style scoped>
@import url('/css/menu.css');
@import url('/css/menu/list.css');
</style>

 

 

 

 

 

- 메뉴 여러개 뽑기

let test = "composition";
let list = reactive({
   list:[]
});

onMounted(()=>{
  console.log("List.vue onMounted")
  fetch("http://localhost:8080/api/menus")
      .then(response => response.json())
      .then(list => { 
        console.log(list1);
         model.list = list;
      });
})

 

 

 

 

 

- 매퍼없이..짜잔

public interface MenuRepository extends JpaRepository <Menu, Long>{
	
	 @Query(value = "SELECT * FROM rlanddb.menu WHERE category_id=1 limit 0,10",nativeQuery = true)
	   List<Menu> findAllByCategoryId(int categoryId);

}

    fetch("http://localhost:8080/api/menus?c=1")

      .then(response => response.json())

      .then(list => {

        console.log(list);

        this.list = list;

      });

  fetch("http://localhost:8080/api/menus?c=1")

      .then(response => response.json())

      .then(list => {

        console.log(list);

        model.list = list;

      });

 

 

 

 

 

 

 

 

 

 

 

- 프론트 방식으로 페이지네이션 하기

Pageable pageable = PageRequest.of(0, 6);

@Query(value = "FROM Menu WHERE categoryId=:categoryId")
List<Menu> findAllByCategoryId(int categoryId, Pageable pageable);

 

 

 

 

- 무턱대고 DOM을 쓰는것을 지양하자

 

 

 

- 투웨이 바인드(양방향) 할때는 v-model / 원웨이는 v-for