Comment écrire un centre commercial statique dans vue

Avec le développement rapide du commerce électronique, les achats en ligne sont devenus la norme pour les gens. Par conséquent, il existe de plus en plus de sites Web de centres commerciaux variés. Comment créer un bon site Web de centre commercial est devenu le centre d'attention de nombreuses personnes. Dans ce processus, le framework Vue est devenu l'un des premiers choix pour de plus en plus de développeurs front-end, et les sites Web statiques des centres commerciaux ne font pas exception. Cet article partira du point de vue de Vue et présentera comment utiliser le framework Vue pour développer un centre commercial statique.

1. Aperçu du projet
Dans cet article, nous utiliserons le framework Vue pour créer un centre commercial statique simple. Ce site Web de centre commercial comprend les interfaces suivantes :

• Page de liste de produits, qui affiche tous les produits.
• La page de détails du produit affiche des informations détaillées sur un produit.
• La page du panier affiche les produits sélectionnés par l'utilisateur.
• La page de règlement affiche les détails du règlement.

2. Préparation
Avant de commencer, nous devons installer le framework Vue et préparer les outils de développement associés. Nous pouvons utiliser Vue CLI pour créer un projet nommé « centre commercial » et utiliser le plugin Vue Router pour gérer le routage. Nous devons également utiliser la bibliothèque axios pour gérer l'interaction du front-end envoyant des informations au serveur.

3. Page de liste de produits
Dans Vue, nous utilisons généralement des composants pour créer des pages et implémenter la communication entre les composants. Par conséquent, nous allons créer un composant appelé « GoodsList » qui affichera une liste de tous les produits. Afin de simplifier notre processus de développement, nous pouvons créer un fichier data.json dans le répertoire src pour stocker toutes les informations sur le produit.

Ce qui suit est le code d'un simple composant 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>

Dans ce composant, nous utilisons la liaison de données bidirectionnelle de Vue pour restituer les données du produit dans le fichier data.json sur la page. Dans le même temps, nous avons également utilisé la commande to de Vue Router pour accéder à la page de détails du produit après avoir cliqué sur le nom du produit.

4. Page de détails du produit
Dans la page de détails du produit, nous afficherons les informations détaillées d'un produit spécifique. Nous pouvons utiliser des paramètres de routage pour restituer le contenu de la page de manière dynamique. Voici le code d'un simple composant 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>

Dans ce composant, nous obtenons les paramètres de routage via l'objet $route fourni par Vue Router, sélectionnons les informations sur le produit correspondant et les affichons sur la page en utilisant une liaison de données bidirectionnelle. .

5. Mise en œuvre de la page du panier et de la page de paiement
Dans la page du panier et la page de paiement, nous devons afficher les produits et les prix totaux que l'utilisateur a sélectionnés. Afin de répondre à ces exigences, nous pouvons utiliser Vuex pour gérer la communication et l'état entre les composants. Nous créons d'abord un module Vuex nommé "Cart" pour gérer les informations du panier.

Voici le code du module Panier :

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
}

Dans ce module, nous définissons trois fonctions de mutation, qui sont utilisées pour ajouter des articles à la liste du panier, supprimer des articles de la liste du panier et effacer la liste du panier. . Dans le même temps, nous avons également défini trois fonctions d'action, qui sont utilisées pour déclencher les trois fonctions de mutation ci-dessus.

Nous devons également introduire ce module Cart dans le fichier src/store/index.js et utiliser le plug-in Vuex dans l'instance Vue.

Ce qui suit est le code d'une simple page de panier :

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

Dans ce composant, nous utilisons la méthode d'introduction modulaire de Vuex pour mapper l'état et les opérations dans Vuex aux données et méthodes du composant via mapState et mapActions .

Pour la page de paiement, nous pouvons utiliser la même méthode pour afficher les produits et les prix totaux que l'utilisateur a sélectionnés. Cependant, la différence entre cette page et la page du panier est que les utilisateurs doivent effectuer le paiement sur la page de paiement. Pour la mise en œuvre de cette fonction, nous devons envoyer des requêtes au serveur pour traiter les informations de paiement et de commande. Pour les méthodes de mise en œuvre spécifiques, veuillez vous référer à d’autres articles connexes.

Pour résumer, le framework Vue nous permet de créer facilement un site Web de centre commercial statique, tout en utilisant Vuex et Vue Router pour mieux gérer l'état et le routage. Grâce à l'utilisation de ces outils, nous pouvons non seulement mieux comprendre les caractéristiques du framework Vue, mais également développer un site Web de centre commercial plus complet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!