VueJS 도전#1: 충성 카드를 만들거나 표시하기 위한 3페이지 어플리케이션 만들기

도전 정보

몇 달 전, 내 몇몇 친구들은 나에게 AWS Lambda를 사용하여 서버 없는 프로그램을 개발하는 방법을 가르쳐 달라고 했다.응답으로 나는 그들을 위해 창설했다.이 도전들은 그들에게 해결해야 할 문제와 제시할 수 있는 자원을 주었다.이러한 도전은 한 걸음 한 걸음 연습하는 것이 아니기 때문에 그들은 반드시 내가 제공한 자원을 정리하고 자신의 해결 방안을 개발해야 한다.2주 후에 우리는 30분 동안의 전화 회의에서 해결 방안을 토론할 것이다.
다른 기술인 VueJS를 배울 수 있도록 같은 모델로 돕기로 했습니다.서버가 없는 도전과 마찬가지로, 우리는 장면과 요구 사항, 그리고 귀하의 입문을 돕는 유용한 힌트와 자원을 제공합니다.

각본

당신은 프랜차이즈 식당의 개발 책임자(일명'유일한 개발자')입니다.에서 충성도 응용 프로그램의 API를 작성하여 충성도 카드를 자동으로 만듭니다.이 프로그램은 종업원으로 하여금 수동으로 (우체부를 통해) API를 호출하여 충성카드 생성 요청을 보내게 한다.비록 그들은 이것이 종이 방법의 진보라는 것을 깨달았지만, 그들은 이것이 얼마나 지루한지 불평하기 시작했다.
서버가 없는 문제에서 다음과 같은 API를 만들었습니다.

충성카드 1장 만들기

데이터베이스

의 모든 충성 카드 표시

에 선택한 충성 카드가 표시됩니다.

VueJS 도전 시리즈에서 우리의 목표는 서버 도전 없이 만든 백엔드와 완전히 통합된 전방 VueJS 응용 프로그램을 만드는 것입니다.그러나 첫 번째 VueJS 도전은 프런트만 바라보자.

추천 선결 조건

VueJS Mastery(또는 다른 플랫폼의 동급 버전)에서 다음 비디오 강의를 수강하여 이번 도전에 필요한 VueJS 개념을 확실히 파악하는 것이 좋습니다.

Intro to Vue 2

Real World Vue 2

VueJS 마스터는 VueJS를 배우기에 좋은 곳입니다.비록 보수는 있지만, 나는 너에게 20달러를 쓰는 좋은 곳이라고 보증한다.너는 볼 수 있다.
각 과목의 내용을 먼저 훑어보고 네가 그것들을 이해했는지 확인할 수 있다.만약 네가 이렇게 한다면, 우리 시작하자: D

규격.

이번 도전에서는 세 개의 페이지를 작성합니다.

창설 카드: 충성 카드 창설 페이지

모든 카드 표시: 이 페이지는 우리가 방금 만든 모든 충성 카드

을 볼 수 있는 페이지입니다.

에는 모든 카드 표시 페이지에서 특정 카드를 클릭하여 자세한 내용을 표시할 수 있는 카드가 표시됩니다.

백엔드가 필요하지 않지만, 다음 도전에 대비할 수 있도록 백엔드의 모든 페이지에 예시 데이터를 제공할 것입니다.
프런트엔드 개발을 보다 쉽게 수행하려면 Bulma CSS을 사용하십시오.

카드 만들기(/cards/new)

이 페이지에서 다음 정보를 요구하는 테이블을 만듭니다.
이름
성씨

회원 등급(금, 은, 백금만 해당)

사용자 설명(긴 텍스트 필드)

폼을 제출한 후, 사이트는 반드시 사용자를 '모든 카드 보이기' 페이지 (/cards) 로 다시 지정해야 한다.
form elements of Bulma으로 청결합니다.

모든 카드 표시(/Cards)

이 페이지에서 우리는 우리가 만든 모든 충성 카드를 보여 주었다.백엔드가 통합되지 않았기 때문에 이 예시 데이터로 세 장의 카드를 표시하기만 하면 된다.

[
    {
        "card_number": "4444-1000-2000-1000",
        "first_name": "Jose",
        "last_name": "Rizal",
        "membership_tier": "gold"
    },
    {
        "card_number": ">",
        "first_name": "Juan",
        "last_name": "Luna",
        "membership_tier": "silver"
    },
    {
        "card_number": "4444-1000-2000-3000",
        "first_name": "Marcelo",
        "last_name": "Del Pilar",
        "membership_tier": "bronze"
    }
]

이 예제 데이터의 경우 VueJS의 v-for 구문을 사용하여 목록을 둘러보고 다음과 같이 VueJS에 데이터를 표시합니다.

<template>
  <div>
    <div v-for="card in cards" :key="card.card_number">
      <p>{{ card.card_number }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cards: [
        {...},
        {...}
      ]
    }
  }
}
</script>

모든 카드는 사용자가 이 카드에 대한 더 자세한 정보를 볼 수 있도록 클릭 가능한 링크가 있어야 하며, '카드 보이기' 페이지로 다시 지정해야 한다. (/cards/{card number}, 예를 들어:/cards/44444-1000-2000-2000)
Card Components of Bulma CSS을 사용하여 렌더링할 수 있습니다(렌더링 없이 다른 구성 요소 유형을 선택할 수도 있습니다!)

카드 보이기(/cards/{Card number})

이 페이지에는 특정 카드에 대한 더 많은 정보가 표시됩니다.이 도전 경로에 지정된 카드 번호를 기록할 필요가 없습니다.

{
    "card_number": "4444-1000-2000-3000",
    "first_name": "Marcelo",
    "last_name": "Del Pilar",
    "membership_tier": "bronze",
    "user_description": "Marcelo is a very particular customer. He knit-picks everything but he tips very well if you induldge all of his requests."
}

너의 일을 자랑해라!

아래에서 당신의 작품을 평론해 보세요.또는 더 좋은 방법은dev.에 블로그 글을 만들어서 당신이 어떻게 이 점을 해냈는지 설명하는 것이다.
만약 당신에게 어떤 문제가 있거나 어딘가에 갇혀 있다면, 아래에 평론을 발표하거나 오후 내내 저에게 보내주십시오. 저는 기꺼이 당신을 돕겠습니다.
Christin Hume, Unsplash에서 촬영