Pratique de développement Vue : créer une plateforme de commerce électronique réactive-Voir.js-php.cn

Pratique de développement Vue : créer une plateforme de commerce électronique réactive

Vue est un framework JavaScript populaire largement utilisé dans le développement Web. Cet article expliquera comment utiliser Vue pour créer une plateforme de commerce électronique réactive. Nous utiliserons Vue pour créer l'interface front-end et appeler l'interface API back-end pour obtenir des données. Nous utiliserons également le mécanisme réactif de Vue pour réaliser une mise à jour automatique et un rendu dynamique des données. Ce qui suit présentera les connaissances de base de Vue, les étapes de conception et de mise en œuvre de la plateforme de commerce électronique.

1. Connaissance de base de Vue

1.1 L'installation et l'utilisation de Vue

Vue peuvent être utilisées via la référence CDN ou en téléchargeant directement le package d'installation. Nous utilisons ici l'outil de construction Vue CLI officiellement fourni pour créer rapidement un projet Vue.

Installez Vue CLI globalement :

npm install -g vue-cli

Copier après la connexion

Créez un nouveau projet Vue à l'aide de Vue CLI :

vue create my-project

Copier après la connexion

1.2 Développement basé sur les composants de Vue

L'idée principale de Vue est le développement basé sur les composants. Une application Vue peut être composée. de plusieurs composants. Chaque composant peut contenir des modèles, une logique métier et des styles. Les composants peuvent s'emboîter les uns dans les autres et transmettre des données, formant ainsi des structures de pages complexes.

Voici un exemple simple de composant Vue :

<template>
  <div>
    <h1>{{ title }}</h1>
    <ul>
      <li v-for="item in items">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    title: String,
    items: Array
  }
}
</script>

<style>
h1 {
  color: #333;
}
li {
  color: #666;
}
</style>

Copier après la connexion

Le code ci-dessus définit un composant appelé MyComponent, qui contient un titre et une liste. Les composants peuvent transmettre les données des composants parents via l'attribut props. Ici, les attributs title et items sont utilisés.

1.3 Liaison et déclenchement d'événements de Vue

La liaison et le déclenchement d'événements de Vue sont similaires à d'autres frameworks. Vous pouvez lier des événements via la directive v-on et déclencher des événements via la méthode $emit. Les événements peuvent transmettre des paramètres et des données.

Ce qui suit est un exemple simple de liaison et de déclenchement d'événement :

<template>
  <div>
    <button v-on:click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('custom-event', 'Hello, world!')
    }
  }
}
</script>

Copier après la connexion

Le code ci-dessus définit une méthode nommée handleClick, qui déclenche l'événement d'événement personnalisé et transmet un paramètre de chaîne lorsque vous cliquez sur le bouton.

2. Conception d'une plateforme de commerce électronique

Les plateformes de commerce électronique incluent généralement des fonctions telles que l'affichage des produits, le panier, la confirmation de commande et le paiement. Nous concevons une plateforme de commerce électronique simple basée sur ces fonctions, comprenant les pages suivantes :

Page d'accueil : affiche toutes les informations sur le produit et prend en charge la recherche et la classification.
Page de détails du produit : affiche des informations détaillées sur un seul produit et prend en charge les opérations d'ajout au panier.
Page du panier : affiche toutes les informations sur les produits ajoutées au panier et prend en charge les opérations de compensation et de règlement.
Page de confirmation de commande : affiche toutes les informations sur le produit sélectionné et prend en charge la saisie d'informations telles que l'adresse et le mode de paiement.
Page de réussite de la commande : affiche les détails de la commande et prend en charge le retour à la page d'accueil.

Pour faciliter la démonstration, nous fournissons uniquement des données statiques et une interface API simulées avec axios. Les données back-end utilisent le format JSON et contiennent toutes les informations sur le produit et les informations de commande.

3. Étapes de mise en œuvre de la plateforme de commerce électronique

3.1 Page d'accueil

La page d'accueil affiche toutes les informations sur le produit et prend en charge la recherche et la classification. Nous utilisons les bibliothèques Bootstrap et FontAwesome pour embellir les styles de page et les icônes.

Installez d'abord ces deux bibliothèques :

npm install bootstrap font-awesome --save

Copier après la connexion

Ajoutez des références de style au fichier App.vue :

<template>
  <div>
    <nav class="navbar navbar-dark bg-dark">
      <a class="navbar-brand" href="#">电商平台</a>
    </nav>
    <div class="container mt-4">
      <router-view></router-view>
    </div>
  </div>
</template>

<style>
@import "bootstrap/dist/css/bootstrap.min.css";
@import "font-awesome/css/font-awesome.min.css";
</style>

Copier après la connexion

Utilisez Vue Router pour implémenter des sauts de page et transmettre des paramètres. Ajoutez le code suivant au fichier main.js :

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

Copier après la connexion

Créez le fichier router.js pour définir la configuration du routage :

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'

Vue.use(VueRouter)

export default new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})

Copier après la connexion

Créez le fichier Home.vue pour implémenter les fonctions d'affichage et de recherche de la page d'accueil :

<template>
  <div>
    <div class="input-group mb-4">
      <input type="text" class="form-control" v-model="searchText" placeholder="Search...">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="button" v-on:click="search">Search</button>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4 mb-4" v-for="product in products" :key="product.id">
        <div class="card">
          <img class="card-img-top" :src="product.image" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">{{ product.name }}</h5>
            <p class="card-text">{{ product.description }}</p>
            <p class="card-text font-weight-bold text-danger">{{ product.price }}</p>
            <button class="btn btn-primary" v-on:click="addToCart(product)">加入购物车</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      products: [],
      searchText: ''
    }
  },
  created() {
    this.getProducts()
  },
  methods: {
    getProducts() {
      axios.get('/api/products').then(response => {
        this.products = response.data
      })
    },
    search() {
      axios.get('/api/products', {
        params: {
          search: this.searchText
        }
      }).then(response => {
        this.products = response.data
      })
    },
    addToCart(product) {
      this.$emit('add-to-cart', product)
    }
  }
}
</script>

Copier après la connexion

Le code ci-dessus appelle l'interface API via axios pour obtenir des informations sur le produit et prend en charge les opérations de recherche et d'ajout au panier.

3.2 Page de détails du produit

La page de détails du produit affiche les informations détaillées d'un seul produit et prend en charge l'ajout au panier. Nous utilisons Vue Router pour transmettre le paramètre ID du produit.

Créez le fichier Product.vue pour implémenter la page de détails du produit :

<template>
  <div>
    <div class="row mt-4">
      <div class="col-md-6">
        <img :src="product.image" class="img-fluid" alt="">
      </div>
      <div class="col-md-6">
        <h2>{{ product.name }}</h2>
        <p>{{ product.description }}</p>
        <p class="font-weight-bold text-danger">{{ product.price }}</p>
        <button class="btn btn-primary btn-lg" v-on:click="addToCart(product)">加入购物车</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      product: {}
    }
  },
  created() {
    const productId = this.$route.params.id
    axios.get(`/api/products/${productId}`).then(response => {
      this.product = response.data
    })
  },
  methods: {
    addToCart(product) {
      this.$emit('add-to-cart', product)
    }
  }
}
</script>

Copier après la connexion

Utilisez Vue Router pour transmettre le paramètre ID du produit. Modifiez le fichier de configuration router.js :

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import Product from './views/Product.vue'

Vue.use(VueRouter)

export default new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/product/:id',
      name: 'product',
      component: Product
    }
  ]
})

Copier après la connexion

3.3 Page du panier

La page du panier affiche toutes les informations sur les produits ajoutés au panier et prend en charge les opérations de compensation et de règlement. Nous utilisons Vuex pour la gestion des états et le partage de données.

Installez la bibliothèque Vuex :

npm install vuex --save

Copier après la connexion

Créez le fichier store.js pour configurer la gestion de l'état de Vuex :

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    cart: []
  },
  mutations: {
    addToCart(state, product) {
      const item = state.cart.find(item => item.id === product.id)
      if (item) {
        item.quantity++
      } else {
        state.cart.push({
          ...product,
          quantity: 1
        })
      }
    },
    removeFromCart(state, productId) {
      state.cart = state.cart.filter(item => item.id !== productId)
    },
    clearCart(state) {
      state.cart = []
    }
  },
  getters: {
    cartTotal(state) {
      return state.cart.reduce((total, item) => {
        return total + item.quantity
      }, 0)
    },
    cartSubtotal(state) {
      return state.cart.reduce((total, item) => {
        return total + item.price * item.quantity
      }, 0)
    }
  }
})

Copier après la connexion

Modifiez le code d'App.vue pour configurer la gestion de l'état de Vuex :

<template>
  <div>
    <nav class="navbar navbar-dark bg-dark">
      <a class="navbar-brand" href="#">电商平台</a>
      <span class="badge badge-pill badge-primary">{{ cartTotal }}</span>
    </nav>
    <div class="container mt-4">
      <router-view :cart="cart" v-on:add-to-cart="addToCart"></router-view>
    </div>
    <div class="modal" tabindex="-1" role="dialog" v-if="cart.length > 0">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">购物车</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <table class="table">
              <thead>
                <tr>
                  <th>名称</th>
                  <th>单价</th>
                  <th>数量</th>
                  <th>小计</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in cart" :key="item.id">
                  <td>{{ item.name }}</td>
                  <td>{{ item.price }}</td>
                  <td>
                    <button class="btn btn-sm btn-danger" v-on:click="removeFromCart(item.id)">-</button>
                    {{ item.quantity }}
                    <button class="btn btn-sm btn-success" v-on:click="addToCart(item)">+</button>
                  </td>
                  <td>{{ item.price * item.quantity }}</td>
                  <td><i class="fa fa-remove text-danger" v-on:click="removeFromCart(item.id)"></i></td>
                </tr>
              </tbody>
              <tfoot>
                <tr>
                  <td colspan="2">共 {{ cartTotal }} 件商品</td>
                  <td colspan="2">总计 {{ cartSubtotal }}</td>
                  <td><button class="btn btn-sm btn-danger" v-on:click="clearCart()">清空购物车</button></td>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import store from './store'

export default {
  computed: {
    cart() {
      return store.state.cart
    },
    cartTotal() {
      return store.getters.cartTotal
    }
  },
  methods: {
    addToCart(product) {
      store.commit('addToCart', product)
    },
    removeFromCart(productId) {
      store.commit('removeFromCart', productId)
    },
    clearCart() {
      store.commit('clearCart')
    }
  }
}
</script>

Copier après la connexion

Le code ci-dessus utilise Vuex pour mettre en œuvre l'ajout et la suppression du panier, effacer et calculer les fonctions.

3.4 Page de confirmation de commande et page de réussite de la commande

La page de confirmation de commande affiche toutes les informations sur le produit sélectionné et prend en charge la saisie d'informations telles que l'adresse et le mode de paiement. La page de réussite de la commande affiche les détails de la commande et prend en charge le retour à la page d'accueil. Nous utilisons Vue Router pour transmettre les paramètres des informations de commande.

Créez le fichier Cart.vue pour implémenter la page de confirmation de commande :

<template>
  <div>
    <h2>确认订单</h2>
    <table class="table">
      <thead>
        <tr>
          <th>名称</th>
          <th>单价</th>
          <th>数量</th>
          <th>小计</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in cart" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
          <td>{{ item.quantity }}</td>
          <td>{{ item.price * item.quantity }}</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">共 {{ cartTotal }} 件商品</td>
          <td colspan="2">总计 {{ cartSubtotal }}</td>
        </tr>
      </tfoot>
    </table>
    <div class="form-group">
      <label for="name">姓名</label>
      <input type="text" class="form-control" id="name" v-model="name">
    </div>
    <div class="form-group">
      <label for="address">地址</label>
      <textarea class="form-control" id="address" v-model="address"></textarea>
    </div>
    <div class="form-group">
      <label for="payment">支付方式</label>
      <select class="form-control" id="payment" v-model="payment">
        <option value="alipay">支付宝</option>
        <option value="wechatpay">微信支付</option>
        <option value="creditcard">信用卡</option>
      </select>
    </div>
    <button class="btn btn-primary btn-lg" v-on:click="checkout">提交订单</button>
  </div>
</template>

<script>
export default {
  props: ['cartTotal', 'cartSubtotal'],
  data() {
    return {
      name: '',
      address: '',
      payment: 'alipay'
    }
  },
  methods: {
    checkout() {
      this.$router.push({
        name: 'order-success',
        params: {
          name: this.name,
          address: this.address,
          payment: this.payment,
          cart: this.$props.cart,
          cartTotal: this.cartTotal,
          cartSubtotal: this.cartSubtotal
        }
      })
    }
  }
}
</script>

Copier après la connexion

Créez le fichier OrderSuccess.vue pour implémenter la page de réussite de la commande :

<template>
  <div>
    <h2>订单详情</h2>
    <p>姓名：{{ name }}</p>
    <p>地址：{{ address }}</p>
    <p>支付方式：{{ payment }}</p>
    <table class="table">
      <thead>
        <tr>
          <th>名称</th>
          <th>单价</th>
          <th>数量</th>
          <th>小计</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in cart" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
          <td>{{ item.quantity }}</td>
          <td>{{ item.price * item.quantity }}</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">共 {{ cartTotal }} 件商品</td>
          <td colspan="2">总计 {{ cartSubtotal }}</td>
        </tr>
      </tfoot>
    </table>
    <button class="btn btn-primary btn-lg" v-on:click="backHome">返回首页</button>
  </div>
</template>

<script>
export default {
  props: ['name', 'address', 'payment', 'cart', 'cartTotal', 'cartSubtotal'],
  methods: {
    backHome() {
      this.$router.push('/')
    }
  }
}
</script>

Copier après la connexion

Utilisez Vue Router pour transmettre les paramètres d'informations de commande. Modifiez le fichier de configuration de router.js :