Vue에서 Pinterest 스타일의 이미지 라이브러리 만들기

본고에서, 나는 Pinterest 스타일의 레이아웃 격자를 만들어서 그림을 보여주는 신속하고 간편한 방법을 보여 줄 것이다.이 격자는 응답성이 있을 것입니다. 이것은 브라우저 창의 크기가 증가하거나 감소함에 따라 자동으로 크기를 조정한다는 것을 의미합니다.이렇게 하면 개별 높이에 상관없이 이미지가 표시되고 모든 이미지가 같은 행에서 시작하도록 평평하게 조정되지 않습니다.반대로, 한 열의 그림이 끝날 때, 다음 그림은 모든 그림이 고르게 정렬되지 않은 보드 레이아웃을 남기기 시작합니다.자, 시작합시다.

우리는 무엇을 창조할 것인가

이것은 우리가 만들 Pinterest 스타일의 유창한 레이아웃입니다.

Flash가 아닌 이미지 가져오기

Pinterest는 결혼식, 휴가, 또는 다른 아이디어와 같은 특정한 주제의 이미지를 표시할 수 있는 플랫폼이다.이 프로그램이 정상적으로 작동하도록 하기 위해서, 특정 테마에 대응하는 일련의 그림을 가져오는 방법이 필요합니다.아주 좋은 사진 사이트는 Unsplash입니다.
Unsplash’s website에는 검색할 주제를 입력할 수 있는 검색 필드가 있으며 해당 주제에 해당하는 모든 이미지를 반환합니다.이 설정은 사용자가 검색 단일 테마에 대응하는 단추를 눌러서 복사할 수 있도록 합니다.사용자가 이 단추를 눌렀을 때, Pinterest 스타일 격자를 사용하여 Unsplash에서 온 그림을 표시합니다.

개발자 계정 만들기

Unsplash API를 사용하려면 개발자 계정을 생성해야 합니다.Head over to Unsplash .
개발자로 등록 버튼을 클릭합니다.계정을 만드는 데 필요한 필드를 기입하십시오.일단 당신의 계좌를 만들면, 당신은 반드시 당신의 이메일을 검증해야 합니다.그들이 당신에게 보낸 이메일을 클릭하기만 하면 당신의 계좌를 검증할 수 있습니다.

당신의 계좌에 로그인하세요.새 프로그램을 만들어야 합니다."새 프로그램"단추를 누르십시오.

네 개의 항목이 보일 것입니다. 각 항목을 확인하려면 누르십시오.모든 약관을 선택한 후 "약관 수락"단추를 누르십시오.신청할 때, 유일한 접근 키를 분배받을 것입니다.

이 액세스 키는 Unsplash API를 호출하여 이미지를 읽어들일 때 사용됩니다.

응용 프로그램 만들기

이제 Vue에서 Pinterest 클론을 생성할 준비가 되었습니다.js.Vue CLI 를 사용하여 애플리케이션을 생성합니다.Vue CLI가 설치되어 있지 않으면 다음 명령을 사용하여 전역적으로 설치할 수 있습니다.

npm install -g @vue/cli

이제 Vue cli 를 사용하여 애플리케이션을 생성할 수 있습니다.응용 프로그램 vue pinterest를 호출합니다.응용 프로그램을 만들려면 터미널에서 다음 명령을 입력합니다.

vue create vue-pinterest

CLI에서 기본 설정 또는 수동 선택 기능을 사용할 것인지 묻습니다.

이 프레젠테이션에 대해 기본 설정을 사용하기 때문에 리턴 버튼을 눌러도 됩니다.
이 명령이 실행되면 새로 만든 프로그램에 접근하는 방법에 대한 설명을 제공합니다.

따라서 다음 지침에 따라 다음 명령을 사용하여 vue printerest 디렉토리로 전환합니다.

cd vue-pinterest

서버를 시작하려면 다음 명령을 실행합니다.

npm run serve

브라우저를 열고 다음 URL로 이동하여 서버가 실행 중인지 확인할 수 있습니다.

localhost:8080

응용 프로그램에 패키지 추가

서버가 계속 실행 중이면 멈춰야 합니다.Pinterest 스타일의 격자 응용 프로그램에 두 개의 패키지를 사용할 것입니다.우리가 사용하고자 하는 첫 번째 소프트웨어 패키지는 axios이다.Axios에서는 Unsplash API를 호출하여 이미지를 검색하는 http 클라이언트를 제공합니다.두 번째 가방은 vu 창고 격자입니다.패키지는 Pinterest 스타일의 레이아웃을 만드는 Vue 구성 요소입니다.설치하려면 다음 명령을 실행합니다.

npm install axios vue-stack-grid

어플리케이션 구축

Vue CLI를 사용하여 애플리케이션을 만들었기 때문에 초기 레이아웃을 만듭니다.우리는 이 모든 것을 삭제할 것이다. 우리의 설계부터 시작할 것이다.응용 프로그램을 엽니다.src 디렉터리의 vu 파일입니다.템플릿 섹션에서 초기 div를 제외한 모든 내용을 삭제합니다. 템플릿은 다음과 같습니다.

<template>
  <div id="app">
  </div>
</template>

모든 그림을 표시하기 위해 용기를 만들 것입니다.이 용기 안에 우리는 포장을 하나 할 것이다. 우리는 모든 단추를 거기에 놓을 것이다.각 버튼에는 가을 또는 바다 이미지와 같은 개별 주제와 관련된 이미지가 표시됩니다.우리는 단추 하나부터 시작해서 다른 단추를 추가할 것이다.이를 위해 응용 프로그램에 다음과 같은 내용을 추가하십시오.vue 파일:

<template>
  <div id="app">
    <div class="container">
      <div class="button-wrapper">
        <button class="btn" @click="searchUnsplash('Autumn')">Autumn</button>
      </div>
    </div>
  </div>
</template>

용기, 단추 포장기, btn 종류에 스타일을 추가할 수 있도록 이것들을 추가했습니다.이러한 스타일은 끝부분의 스타일 부분을 추가합니다.
컨테이너의 경우 화면 너비의 80%로 설정하고 화면 중심에 배치합니다.이것은 우리 사이트 방문자에게 익숙한 외관과 느낌을 제공할 것이다. 그 중에서 내용이 화면에 집중되고 내용 양측의 공백량이 같다.
button wrapper 클래스에 대해 flexbox를 사용하여 화면 중앙에 단추를 놓고 싶습니다.나는 또한 단추 아래에 공백을 남겨 두었다. 이렇게 하면 단추와 그림이 보이기 시작하는 위치 사이에 약간의 공백이 있을 것이다.
마지막으로 제가 넣고 싶은 스타일은 btn류입니다.나는 버튼에 흰색 텍스트가 있는 녹색 배경을 주고 싶다.나는 단추가 채워지고 지정한 글꼴 크기가 있기를 바란다.
다음 세 가지 클래스에 추가할 스타일은 다음과 같습니다.

.container {
  width: 80vw;
  margin: 0 auto;
}
.button-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 25px;
}
.btn {
  font-size: 18px;
  background-color: #42b983;
  color: white;
  padding: 10px 20px;
}

Flash가 아닌 이미지 표시

그런 다음 이미지를 가져오려면 Unsplash API를 호출해야 합니다.단추에 검색 Unsplash라는 @click 함수를 추가했습니다.다음에 우리는 이 함수를 작성한다.이 기능은 우리가 이전에 설치한 axios 모듈을 사용할 것입니다.이 모듈을 사용하려면 가져와야 합니다.[스크립트] 섹션의 첫 번째 행에 다음 행을 추가하여 axios를 가져옵니다.

import axios from "axios";

다음은 searchUnsplash 함수를 만듭니다.스크립트에 방법 부분을 추가하고 함수를 만듭니다.이 함수는 Unsplash에서 검색하고자 하는 항목인 매개변수를 받아들입니다.이 함수에서 Unsplash API를 호출하여 그림 목록을 가져오려고 합니다.axios를 사용하여 이 전화를 걸려면 Unsplash에서 프로그램을 만들 때 분배된 프로그램 접근 키를 제공해야 합니다.우리는 되돌아오는 그림을 이미지라는 변수에 저장할 것입니다.다음은 searchUnsplash 기능의 코드입니다. 액세스 키를 주의사항에 삽입해야 합니다.

searchUnsplash(topic) {
      this.images = [];
      axios
        .get(
          `https://api.unsplash.com/search/photos?query=${topic}&per_page=20`,
          {
            headers: {
              Authorization:
                "Client-ID <YourAccessKeyGoesHere>",
              "Accept-Version": "v1"
            }
          }
        )
        .then(response => {
          this.images = response.data.results;
        })
        .catch(() => {
          this.images = [];
        });
    }

우리가 호출한 URL은 Unsplash의 API URL입니다.나는 검색을 우리가 검색할 주제로 전달할 것이다.내가 추가한 또 다른 옵션은per 페이지를 기본 10개가 아닌 20개의 그림으로 표시하는 것입니다.나는 더 많은 그림을 보여주고 싶다. 그러면 우리는 더욱 큰 그림 라이브러리를 가지게 될 것이다.
API 호출 결과는 images라는 변수에 저장됩니다.이제 그것을 창조합시다.스크립트에 데이터 부분을 추가하고 그림을 추가합니다.기본값을 빈 그룹으로 설정합니다.데이터 섹션의 모양은 다음과 같습니다.

data: () => ({
    images: []
  }),

Pinterest 그리드 추가

마지막으로 해야 할 일은 검색 Unsplash 함수에서 되돌아오는 그림을 보여 주는 것입니다.이렇게 하려면 이전에 설치된 vue Stack grid 패키지에서 Stack과 Stack Item을 가져와야 합니다.따라서 다음과 같은 가져오기를 axios 가져오기 행 아래에 추가합니다.

import { Stack, StackItem } from "vue-stack-grid";

가져온 후, 이 두 구성 요소를 응용 프로그램에 추가해야 합니다.이 두 항목을 포함하는 구성 요소 부분을 추가합니다.어셈블리 부분은 다음과 같습니다.

components: {
    Stack,
    StackItem
  },

다음에, 우리는 템플릿 부분에 이 두 구성 요소를 추가해야 한다.첫 번째 구성 요소 창고는 격자에 있는 모든 열의 너비와 그림 사이의 채우기를 설정하는 데 사용됩니다.두 번째 구성 요소 창고 항목은 격자에 표시된 모든 그림의 포장입니다.
Stack 모듈에는 사용할 수 있는 도구가 있습니다.우리가 사용할 아이템은 다음과 같습니다.

column min width – 각 열 이미지의 너비

배수구 너비 - 격자에 있는 각 열 사이의 거리

측면 도랑 높이 - 각 이미지의 위 및 아래 열

모니터 이미지 로드 – 이 도구는 구성 요소에 우리가 이미지를 표시하고 있음을 알려줍니다

처음에 그림을 표시하고 화면의 크기를 조정할 때 애니메이션을 제공할 수 있도록 Stack item 표시줄에 스타일을 추가할 것입니다.
다음은 우리의 템플릿의 현재 모습이다.

<template>
  <div id="app">
    <div class="container">
      <div class="button-wrapper">
        <button class="btn" @click="searchUnsplash('Autumn')">Autumn</button>
      </div>
      <stack
              :column-min-width="300"
              :gutter-width="15"
              :gutter-height="15"
              monitor-images-loaded
      >
        <stack-item
                v-for="(image, i) in images"
                :key="i"
                style="transition: transform 300ms"
        >
          <img :src="image.urls.small" :alt="image.alt_description" />
        </stack-item>
      </stack>
    </div>
  </div>
</template>

어플리케이션 테스트

터미널에서 다음 명령을 입력하여 서버를 시작합니다.

npm run serve

브라우저로 이동하여 이 URL을 엽니다.

localhost:8080

다음 표시가 표시되어야 합니다.

검색 단추 추가

응용 프로그램을 개선하기 위해서 두 개의 단추를 추가하면 사용자가 그림을 검색할 수 있습니다.우리는 절벽과 바다를 수색하기 위해 버튼을 추가할 것이다.만약 네가 다른 단어를 검색하고 싶다면, 너는 할 수 있다.너는 우리의 단추를 포함하는 줄을 복사해서 두 번 붙여 넣을 수 있다. 그러면 우리는 세 개의 단추를 가지고 있다.각 버튼의 경우 SearchUnFlash 함수에 전달된 용어를 검색할 용어로 업데이트해야 합니다.이 용어를 반영하기 위해 단추의 텍스트를 변경합니다.
현재 우리는 세 개의 단추를 가지고 있어서 서로 다른 용어를 검색할 수 있다.유일한 문제는 이 세 개의 단추가 서로 접촉하는 것이다.나는 단추 사이에 약간의 공백을 추가하고 싶다.다음과 같은 코드를 스타일 섹션에 추가할 수 있습니다.

.btn:not(:last-child) {
  margin-right: 10px;
}

스타일을 추가하는 동시에 표시할 그림에 마지막 스타일을 추가합니다.Pinterest는 그림에 원각을 추가하기 때문에 저희도 이렇게 하기를 원합니다.우리는 또한 그림이 그 열의 전체 너비이길 바란다.이미지의 높이는 이미지의 폭에 따라 조정됩니다.화면 크기를 조정하면 그림의 크기를 조절할 수 있습니다.따라서 마지막 스타일을 추가합니다.

img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

암호 가져오기

너는 나의 GitHub repo에서 본문의 코드 복사본을 얻을 수 있다.환매 협의를 가동하세요!
이 앱live demo을 볼 수 있습니다.

결론

그림% 1개의 캡션을 편집했습니다.읽어주셔서 감사합니다.저의 다른 문장을 보십시오.너도 돼.