NUXT 응용 프로그램에서 동적 경로 생성

이 기사는 NetLify에 배포 된 전자 상거래 예제를 통해 NUXT 응용 프로그램에서 동적 라우팅을 만드는 방법을 보여줍니다. 이것은 일반적인 시나리오입니다. API에서 데이터를 얻습니다. 다행히 NUXT는 동적 라우팅을 매우 매끄럽게 만듭니다.

시작합시다!

데모 사이트 github 저장소

페이지를 만듭니다

이 예에서는 Mockaroo를 사용하여 가상 저장 데이터를 만들어 정적 폴더에 저장했습니다. 일반적으로 Vuex 스토어에서 Fetch 또는 Axios 및 동작을 사용 하여이 데이터를 수집합니다. 어느 쪽이든, 우리는 UI 상태와 빈 카트 어레이가 포함 된 vuex와 함께 store/index.js 에 데이터를 저장합니다.

 '~/static/storedata.json'에서 데이터 가져 오기

내보내기 const state = () => ({{
  Cartuistatus : '유휴',
  storedata : 데이터,
  카트 : []
})

NUXT에서는 경로를 설정하려면 pages 디렉토리에 .vue 파일 만 작성하면됩니다. 따라서 index.vue 페이지가 홈페이지, cart.vue .

동적 경로를 만들려면이 페이지를 저장하는 디렉토리를 만듭니다. 이 경우 경로가 각 제품의 세부 사항보기를 가리키기 때문에 /products 이라는 디렉토리를 만들었습니다.

이 디렉토리에서는 밑줄이있는 페이지와 경로를 만들기 위해 사용하려는 고유 식별자가 있습니다. 카트의 데이터를 보면 다음과 같습니다.

 [의 뜻
  {
    "ID": "9D436E98-1DC9-4F21-9587-76D4C0255E33",
    "색상": "골든로드",
    "설명": "Mauris Enim Leo, Rhoncus SED, Vestibulum Sit Amet, Cursus ID, Turpis. 정수 분취도, Massa Id Lobortis convallis, 덕터 Riskus dapibus augue, Vel ac
    "성별": "남성",
    "이름": "Desi Ada",
    "검토": "제품화 가상 시장",
    "별표": 3,
    "가격": 50.40,
    "IMG": "1.jpg"
  },
  …
]]

각 항목의 ID가 고유하다는 것을 알 수 있으므로 좋은 후보 식별자이므로 페이지를 지정합니다.

_id.vue

이제 라우팅 매개 변수를 사용하여 데이터에 특정 페이지의 ID를 저장할 수 있습니다.

 데이터 () {
  반품 {
    ID : this. $ route.params.id,
  }
},

위의 항목의 경우 DevTools의 데이터를 보면 다음과 같습니다.

 ID : "9D436E98-1DC9-4F21-9587-76D4C0255E33"

이제이 항목에 대한 다른 모든 정보를 스토리지에서 검색 할 수 있습니다. 나는 mapState 사용하겠습니다 :

 "vuex"에서 {mapstate} 가져 오기;

계산 : {
  ... MapState ([ "Storedata"]),
  제품() {
    이 this.storedata.find (el => el.id === this.id);
  }
},

우리는 고유 한 ID가있는 항목을 찾기 위해 storedata 필터링하고 있습니다!

NUXT 구성에 알립니다

Yarn 빌드를 사용하여 응용 프로그램을 구축하면 완료되었지만 NUXT를 사용하여 배치를위한 정적 사이트를 작성합니다. nuxt를 사용하여 정적 사이트를 만들 때 yarn generate 명령을 사용합니다. nuxt.config.js 에서 generate 명령을 사용하여 Nuxt에 동적 파일에 대해 알려야합니다.

이 명령은 다음과 같은 배열에 구문 분석 된 약속을 반환 할 함수를 기대합니다.

 내보내기 기본값 {
  생성하다: {
    노선 : [
      '/product/1',
      '/product/2',
      '/제품/3'
    ]]
  }
}

이를 위해 파일 상단의 정적 디렉토리에서 데이터를 소개하고 기능을 만듭니다.

 './static/storedata.json'에서 데이터 가져 오기
DynamicRoutes = () => {
  새로운 약속을 반환합니다 (resolve => {
    Resolve (data.map (el =>`product/$ {el.id}`)))
  })
}

그런 다음 구성에서 함수를 호출합니다.

 생성하다: {
  경로 : Dynamicroutes
},

AXIOS를 사용하여 API에서 데이터를 수집하는 경우 (더 일반적이면) 다음과 같습니다.

 'axios'에서 axios 가져 오기
DynamicRoutes = () => {
  return axios.get ( 'https : // your-api-here/products'). (res => {
    return res.data.map (product =>`/upbultion/$ {product.id}`)
  })
}

이런 식으로, 우리는 동적 라우팅 설정을 완료했습니다! 서버를 종료하고 다시 시작하면 각 제품의 동적 라우팅이 적용됩니다!

이 기사의 마지막 부분에서는 페이지의 나머지 부분이 어떻게 생성되었는지, 카트에 프로젝트를 추가하는 방법을 계속 설명 할 것입니다.

페이지를 채우십시오

이제 product 계산 속성을 통해 모든 정보에 액세스 할 수 있기 때문에 원하는 형식으로 페이지를 채울 수 있습니다.

<main><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="NUXT 응용 프로그램에서 동적 경로 생성"><h1 id="product-name"> {{product.name}}</h1>
  <h4 id="product-price-달러">{{product.price | 달러}}</h4>
  <p>{{product.description}}</p>

 ...
</main>

이 경우 스토리지의 카트에 항목을 추가하려고합니다. 항목을 추가하고 삭제하는 기능을 추가합니다 (0 미만의 숫자를 줄이지 않으면 서).

<p>
  <button> 0 ? quantity-- : quantity = 0">-</button>
  {{ 수량 }}
  <button> </button>
</p>
...
<button>카트에 추가하십시오</button>

이 구성 요소의 방법에서, 우리는 항목과 새로운 필드 (수량)를 배열에 추가하여 매장의 돌연변이에 페이로드로 전달합니다.

 방법 : {
  cartadd () {
    항목 = this.product를 보자.
    item.quantity = this.quantity;
    this.tempcart.push (항목);
    이. $ store.commit ( "addtocart", Item);
  }
}

Vuex Storage에서는 프로젝트가 이미 존재하는지 확인합니다. 존재하면 숫자 만 늘릴 것입니다. 존재하지 않으면 수량이 포함 된 전체 항목을 카트 어레이에 추가합니다.

 AddTocart : (state, payload) => {
  itemfound = false를 두십시오
  state.cart.foreach (el => {
    if (el.id === payload.id) {
      el.quantity = payload.quantity
      ItemFound = true
    }
  })
  if (! itemfound) state.cart.push (페이로드)
}

우리는 이제 스토리지의 getters를 사용하여 총계를 계산할 수 있으며, 결국 Stripe Serverless 기능으로 전달됩니다 (이것에 대한 또 다른 게시물이 곧 출시 될 예정입니다!). 우리는 감소가 많은 값에서 값을 검색하는 데 매우 능숙하기 때문에 감소를 사용할 것입니다. (저는 어떻게 감소하는 방법에 대한 자세한 내용을 여기에 썼습니다)).

 carttotal : state => {
  if (! state.cart.length) 반환 0
  return state.cart.reduce ((ac, next) => ac next.quantity * next.price, 0)
}

데모 사이트 github 저장소

그게 다야! 우리는 개별 제품 페이지를 설정했으며 nuxt는 빌드 시점에 모든 개별 경로를 생성합니다. 당신은 분명히 스스로 nuxt를 시도하고 싶을 것입니다. ?

위 내용은 NUXT 응용 프로그램에서 동적 경로 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!