vueで静的モールを書く方法

電子商取引の急速な発展により、オンライン ショッピングは人々にとって当たり前のことになりました。そのため、モールのウェブサイトはますます多様化しており、どのようにして良いモールのウェブサイトを構築するかが多くの人の関心となっています。このプロセスにおいて、Vue フレームワークはますます多くのフロントエンド開発者にとって最初の選択肢の 1 つとなり、静的なモール Web サイトも例外ではありません。この記事では、Vue の観点から開始し、Vue フレームワークを使用して静的モールを開発する方法を紹介します。

1. プロジェクトの概要
この記事では、Vue フレームワークを使用して、単純な静的モールを構築します。このモール Web サイトには、次のインターフェイスが含まれています。

• 製品リスト ページ。すべての製品が表示されます。
• 製品詳細ページには、製品に関する詳細情報が表示されます。
• ショッピング カート ページには、ユーザーが選択した製品が表示されます。
• 決済ページには決済の詳細が表示されます。

2. 準備作業
始める前に、Vue フレームワークをインストールし、関連する開発ツールを準備する必要があります。 Vue CLI を使用して「mall」という名前のプロジェクトを作成し、Vue Router プラグインを使用してルーティングを管理できます。また、axios ライブラリを使用して、サーバーに情報を送信するフロントエンドの対話を処理する必要があります。

3. 製品リスト ページ
Vue では通常、コンポーネントを使用してページを構築し、コンポーネント間の通信を実装します。そこで、全商品の一覧を表示する「GoodsList」というコンポーネントを作成します。開発プロセスを簡素化するために、src ディレクトリに data.json ファイルを作成して、すべての製品に関する情報を保存できます。

以下は、単純な GoodsList コンポーネントのコードです:

<template>
  <div>
    <h2>所有商品</h2>
    <ul>
      <li v-for="item in goodsList" :key="item.id">
        <router-link :to="'/detail/'+item.id">{{ item.name }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import goodsData from '@/data.json'

export default {
  data () {
    return {
      goodsList: goodsData.goodsList
    }
  }
}
</script>

このコンポーネントでは、Vue の双方向データ バインディングを使用して、data.json ファイル内の商品データをページにレンダリングします。優れた。同時に、Vue Router の to コマンドを使用して、製品名をクリックした後に製品詳細ページにジャンプするようにしました。

4. 製品詳細ページ
製品詳細ページでは、特定の製品の詳細情報が表示されます。ルーティング パラメーターを使用して、ページ コンテンツを動的にレンダリングできます。以下は、単純な GoodsDetail コンポーネントのコードです。

<template>
  <div>
    <h2>{{ goodsInfo.name }}</h2>
    <p>商品编号：{{ goodsInfo.id }}</p>
    <p>价格：{{ goodsInfo.price }}</p>
    <p>库存：{{ goodsInfo.stock }}</p>
  </div>
</template>

<script>
import goodsData from '@/data.json'

export default {
  data () {
    return {
      goodsInfo: {}
    }
  },
  created () {
    const { id } = this.$route.params
    this.goodsInfo = goodsData.goodsList.find(item => item.id === id)
  }
}
</script>

このコンポーネントでは、Vue Router が提供する $route オブジェクトを通じてルーティング パラメーターを取得し、対応する製品情報を選択し、次の 2 つの方法を使用してページに表示します。非常に優れたデータ バインディング。

5. ショッピングカートページと決済ページの実装
ショッピングカートページと決済ページでは、ユーザーが選択した商品と合計金額を表示する必要があります。これらの要件を達成するには、Vuex を使用してコンポーネント間の通信と状態を管理します。まず、ショッピングカートの情報を管理するための「Cart」という名前の Vuex モジュールを作成します。

次は、Cart モジュールのコードです:

const state = {
  cartList: [] // 存放商品信息的数组
}

const mutations = {
  // 向购物车列表中添加商品
  addToCart (state, goodsItem) {
    const item = state.cartList.find(item => item.id === goodsItem.id)
    if (item) {
      item.quantity++
    } else {
      state.cartList.push({
        ...goodsItem,
        quantity: 1
      })
    }
  },
  // 从购物车列表中删除商品
  removeFromCart (state, id) {
    const index = state.cartList.findIndex(item => item.id === id)
    state.cartList.splice(index, 1)
  },
  // 清空购物车列表
  clearCartList (state) {
    state.cartList = []
  }
}

const actions = {
  addToCart ({ commit }, goodsItem) {
    commit('addToCart', goodsItem)
  },
  removeFromCart ({ commit }, id) {
    commit('removeFromCart', id)
  },
  clearCartList ({ commit }) {
    commit('clearCartList')
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

このモジュールでは、ショッピング カート リストに商品を追加したり、ショッピング カートから商品を削除したりするために使用される 3 つの突然変異関数を定義します。カート リスト: アイテムと空のショッピング カートのリスト。同時に、上記の 3 つの突然変異関数をトリガーするために使用される 3 つのアクション関数も定義しました。

この Cart モジュールを src/store/index.js ファイルに導入し、Vue インスタンスで Vuex プラグインを使用する必要もあります。

以下は、単純なショッピング カート ページのコードです:

<template>
  <div>
    <h2>购物车列表</h2>
    <ul>
      <li v-for="item in cartList" :key="item.id">
        <p>{{ item.name }}</p>
        <button @click="removeFromCart(item.id)">删除</button>
      </li>
    </ul>
    <button @click="clearCartList">清空购物车</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState('cart', {
      cartList: state => state.cartList
    })
  },
  methods: {
    ...mapActions('cart', [
      'addToCart',
      'removeFromCart',
      'clearCartList'
    ])
  }
}
</script>

このコンポーネントでは、Vuex のモジュール式導入メソッドを使用して、mapState と mapActions を通じて Vuex のステータスと操作を統合します。コンポーネントのデータとメソッド。

チェックアウト ページの場合も、同じ方法を使用して、ユーザーが選択した製品と合計価格を表示できます。ただし、このページとショッピング カート ページの違いは、ユーザーがチェックアウト ページで支払いを行う必要があることです。この関数を実装するには、支払いと注文の情報を処理するためにサーバーにリクエストを送信する必要があります。具体的な実装方法については、他の関連記事を参照してください。

要約すると、Vue フレームワークを使用すると、静的なモール Web サイトを簡単に構築でき、Vuex と Vue Router を使用してステータスとルーティングをより適切に管理できます。これらのツールを使用することで、Vue フレームワークの特性をより深く理解できるだけでなく、より完成度の高いモール Web サイトを開発することができます。

以上がvueで静的モールを書く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。