Wie schreibe ich ein statisches Einkaufszentrum in Vue?

Mit der rasanten Entwicklung des E-Commerce ist Online-Shopping für die Menschen zur Norm geworden. Daher stehen immer mehr verschiedene Websites für Einkaufszentren im Mittelpunkt der Aufmerksamkeit vieler Menschen. In diesem Prozess ist das Vue-Framework für immer mehr Front-End-Entwickler zur ersten Wahl geworden, und statische Mall-Websites bilden da keine Ausnahme. Dieser Artikel beginnt aus der Perspektive von Vue und stellt vor, wie man mit dem Vue-Framework ein statisches Einkaufszentrum entwickelt.

1. Projektübersicht
In diesem Artikel werden wir das Vue-Framework verwenden, um ein einfaches statisches Einkaufszentrum zu erstellen. Diese Mall-Website umfasst die folgenden Schnittstellen:

• Produktlistenseite, auf der alle Produkte angezeigt werden.
• Auf der Produktdetailseite werden detaillierte Informationen zu einem Produkt angezeigt.
• Auf der Warenkorbseite werden die vom Benutzer ausgewählten Produkte angezeigt.
• Auf der Abrechnungsseite werden Abrechnungsdetails angezeigt.

2. Vorbereitung
Bevor wir beginnen, müssen wir das Vue-Framework installieren und zugehörige Entwicklungstools vorbereiten. Mit der Vue-CLI können wir ein Projekt namens „mall“ erstellen und das Vue-Router-Plugin zum Verwalten des Routings verwenden. Wir müssen auch die Axios-Bibliothek verwenden, um die Interaktion des Front-Ends zu verwalten, das Informationen an den Server sendet.

3. Produktlistenseite
In Vue verwenden wir normalerweise Komponenten, um Seiten zu erstellen und die Kommunikation zwischen Komponenten zu implementieren. Daher erstellen wir eine Komponente namens „GoodsList“, die eine Liste aller Produkte anzeigt. Um unseren Entwicklungsprozess zu vereinfachen, können wir im src-Verzeichnis eine data.json-Datei erstellen, um alle Produktinformationen zu speichern.

Das Folgende ist der Code für eine einfache GoodsList-Komponente:

<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>

In dieser Komponente verwenden wir die bidirektionale Datenbindung von Vue, um die Produktdaten in der Datei data.json auf der Seite darzustellen. Gleichzeitig haben wir auch den to-Befehl von Vue Router verwendet, um nach dem Klicken auf den Produktnamen zur Produktdetailseite zu springen.

4. Produktdetailseite
Auf der Produktdetailseite zeigen wir die detaillierten Informationen zu einem bestimmten Produkt an. Wir können Routing-Parameter verwenden, um Seiteninhalte dynamisch zu rendern. Das Folgende ist der Code einer einfachen GoodsDetail-Komponente:

<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>

In dieser Komponente erhalten wir die Routing-Parameter über das von Vue Router bereitgestellte $route-Objekt, wählen die entsprechenden Produktinformationen aus und zeigen sie mithilfe einer bidirektionalen Datenbindung auf der Seite an .

5. Implementierung der Warenkorbseite und der Checkout-Seite
Auf der Warenkorbseite und der Checkout-Seite müssen wir die Produkte und Preissummen anzeigen, die der Benutzer ausgewählt hat. Um diese Anforderungen zu erfüllen, können wir Vuex verwenden, um die Kommunikation und den Zustand zwischen Komponenten zu verwalten. Wir erstellen zunächst ein Vuex-Modul mit dem Namen „Cart“, um Warenkorbinformationen zu verwalten.

Das Folgende ist der Code des Warenkorbmoduls:

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
}

In diesem Modul definieren wir drei Mutationsfunktionen, die verwendet werden, um Artikel zur Warenkorbliste hinzuzufügen, Artikel aus der Warenkorbliste zu löschen und die Warenkorbliste zu löschen . Gleichzeitig haben wir auch drei Aktionsfunktionen definiert, mit denen die oben genannten drei Mutationsfunktionen ausgelöst werden.

Wir müssen dieses Cart-Modul auch in der Datei src/store/index.js einführen und das Vuex-Plug-in in der Vue-Instanz verwenden.

Das Folgende ist der Code für eine einfache Warenkorbseite:

<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>

In dieser Komponente verwenden wir die modulare Einführungsmethode von Vuex, um den Status und die Vorgänge in Vuex über „mapState“ und „mapActions“ den Daten und Methoden der Komponente zuzuordnen.

Für die Checkout-Seite können wir die gleiche Methode verwenden, um die vom Benutzer ausgewählten Produkte und Preissummen anzuzeigen. Der Unterschied zwischen dieser Seite und der Warenkorbseite besteht jedoch darin, dass Benutzer die Zahlung auf der Checkout-Seite vornehmen müssen. Zur Umsetzung dieser Funktion müssen wir Anfragen an den Server senden, um Zahlungs- und Bestellinformationen zu verarbeiten. Informationen zu spezifischen Implementierungsmethoden finden Sie in anderen verwandten Artikeln.

Zusammenfassend lässt sich sagen, dass wir mit dem Vue-Framework problemlos eine statische Mall-Website erstellen und gleichzeitig Vuex und Vue Router verwenden können, um Status und Routing besser zu verwalten. Durch den Einsatz dieser Tools können wir nicht nur die Eigenschaften des Vue-Frameworks besser verstehen, sondern auch eine umfassendere Mall-Website entwickeln.

Das obige ist der detaillierte Inhalt vonWie schreibe ich ein statisches Einkaufszentrum in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!