vueで静的モールを書く方法-フロントエンドQ&A-php.cn

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

WBOY

リリース： 2023-05-18 12:15:37

オリジナル

602 人が閲覧しました

電子商取引の急速な発展により、オンラインショッピングは人々にとって当たり前のことになりました。そのため、モールのウェブサイトはますます多様化しており、どのようにして良いモールのウェブサイトを構築するかが多くの人の関心となっています。このプロセスにおいて、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 サイトの他の関連記事を参照してください。