Front-end/Vue3 Vue 3 쇼핑몰 만들기 - 2 (+ Spring Boot) 기능 추가 장바구니 주문하기 상품 Card.vue {{item.name}} {{ lib.getNumberFormatted(item.price) }}원 {{ lib.getNumberFormatted(item.price - (item.price * item.discountPer / 100)) }} {{ item.discountPer }}% 스프링부트 컨트롤러 @PostMapping("/api/cart/items/{itemId}") public ResponseEntity pushCartItem(@PathVariable int itemId, @CookieValue(value = "token", required = false) String token){ isTokenValid(token); int memberId.. 2023. 4. 20. Vue 3 쇼핑몰 만들기 - 1 (+ Spring Boot) Spring Boot 인텔리제이에서 간단하게 DataBase 사용하기 - View - Tool Windows - Database - Data Source 로그인 JWT 적용하고, 쿠키에 토큰 저장 개발자 도구에서 응용프로그램(애플리케이션)에서 확인가능 컨트롤러 @RestController public class AccountController { @Autowired private MemberRepository memberRepository; @PostMapping("/api/account/login") public ResponseEntity login(@RequestBody Map loginDto, HttpServletResponse httpServletResponse){ Member member = m.. 2023. 4. 16. VUE 3 간단한 메모앱 실습 뷰 명령어 npm install -g @vue/cli 뷰 프로젝트 생성 vue create frontend 실행 cd .\frontend\ npm run serve 실행 화면 코드 App.vue Ground 컴포넌트 하나로 만들었다. Ground.vue Ground 뷰는 헤더, 메모, 푸터 컴포넌트들로 이루어져 있다. * 부트스트랩을 적용시키기 위해 index.html에 cdn을 작성했다. Memo.vue + 추가 {{ d }} template 태그 내에는 화면을 구성할 코드를 보통 작성한다. + 추가 {{ d }} v-for을 통해서 반복을 처리한다. 액션 처리는 @를 붙인다. 표시할 데이터는 중괄호 2개를 붙여 표현한다. {{ d }} js 코드는 script 태그내에 작성 import {reacti.. 2023. 4. 13. 이전 1 다음
