Amalan pembangunan Vue: membina platform e-dagang responsif

Vue ialah rangka kerja JavaScript popular yang digunakan secara meluas dalam pembangunan web. Artikel ini akan memperkenalkan cara menggunakan Vue untuk membina platform e-dagang responsif. Kami akan menggunakan Vue untuk membina antara muka bahagian hadapan dan memanggil antara muka API bahagian belakang untuk mendapatkan data Kami juga akan menggunakan mekanisme responsif Vue untuk mencapai pengemaskinian automatik dan pemaparan data yang dinamik. Berikut akan memperkenalkan pengetahuan asas Vue, reka bentuk dan langkah pelaksanaan platform e-dagang.

1. Pengetahuan asas Vue

1.1 Pemasangan dan penggunaan Vue

Vue boleh digunakan melalui rujukan CDN atau memuat turun terus pakej pemasangan. Kami menggunakan alat binaan Vue CLI yang disediakan secara rasmi di sini untuk membina projek Vue dengan cepat.

Pasang Vue CLI secara global:

npm install -g vue-cli

Buat projek Vue baharu menggunakan Vue CLI:

vue create my-project

1.2 Pembangunan berasaskan komponen Vue

Idea teras Vue ialah pembangunan berasaskan komponen daripada pelbagai komponen. Setiap komponen boleh mengandungi templat, logik perniagaan dan gaya. Komponen boleh bersarang antara satu sama lain dan menghantar data ke sekeliling, membentuk struktur halaman yang kompleks.

Berikut ialah contoh komponen Vue yang mudah:

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

Kod di atas mentakrifkan komponen yang dipanggil MyComponent, yang mengandungi tajuk dan senarai. Komponen boleh menghantar data komponen induk melalui atribut props Di sini, atribut tajuk dan item digunakan.

1.3 Pengikatan dan pencetus peristiwa Vue

Pengikatan dan pencetus peristiwa Vue adalah serupa dengan rangka kerja lain Anda boleh mengikat peristiwa melalui arahan v-on dan mencetuskan peristiwa melalui kaedah $emit. Peristiwa boleh lulus parameter dan data.

Berikut ialah contoh mengikat dan mencetuskan peristiwa mudah:

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

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

Kod di atas mentakrifkan kaedah bernama handleClick, yang mencetuskan acara acara tersuai dan menghantar parameter rentetan apabila butang diklik.

2. Reka bentuk platform e-dagang

Platform e-dagang biasanya merangkumi fungsi seperti paparan produk, troli beli-belah, pengesahan pesanan dan pembayaran. Kami mereka bentuk platform e-dagang ringkas berdasarkan fungsi ini, termasuk halaman berikut:

• Halaman utama: memaparkan semua maklumat produk dan menyokong carian dan klasifikasi.
• Halaman butiran produk: Memaparkan maklumat terperinci bagi satu produk dan menyokong penambahan pada operasi troli beli-belah.
• Halaman Troli Beli-belah: Memaparkan semua maklumat produk yang ditambahkan pada troli beli-belah dan menyokong operasi penjelasan dan penyelesaian.
• Halaman pengesahan pesanan: memaparkan semua maklumat produk yang dipilih dan menyokong pengisian maklumat seperti alamat dan kaedah pembayaran.
• Halaman kejayaan pesanan: memaparkan butiran pesanan dan menyokong pengembalian ke halaman utama.

Untuk kemudahan demonstrasi, kami hanya menyediakan data statik dan antara muka API yang disimulasikan dengan aksios. Data bahagian belakang menggunakan format JSON dan mengandungi semua maklumat produk dan maklumat pesanan.

3. Langkah-langkah pelaksanaan platform e-dagang

3.1 Halaman utama

Laman utama memaparkan semua maklumat produk dan menyokong carian dan klasifikasi. Kami menggunakan perpustakaan Bootstrap dan FontAwesome untuk mencantikkan gaya dan ikon halaman.

Mula-mula pasang dua perpustakaan ini:

npm install bootstrap font-awesome --save

Tambah rujukan gaya pada fail 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>

Gunakan Penghala Vue untuk melaksanakan lonjakan halaman dan lulus parameter. Tambahkan kod berikut pada fail utama.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')

Buat fail router.js untuk menentukan konfigurasi penghalaan:

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
    }
  ]
})

Buat fail Home.vue untuk melaksanakan paparan halaman utama dan fungsi carian:

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

Panggilan kod di atas antara muka API melalui axios untuk mendapatkan maklumat produk Dan menyokong carian dan menambah operasi troli beli-belah.

3.2 Halaman butiran produk

Halaman butiran produk memaparkan maklumat terperinci bagi satu produk dan menyokong penambahan pada troli beli-belah. Kami menggunakan Penghala Vue untuk lulus parameter ID produk.

Buat fail Product.vue untuk melaksanakan halaman butiran produk:

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

Gunakan Penghala Vue untuk lulus parameter ID produk. Ubah suai fail konfigurasi 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
    }
  ]
})

3.3 Halaman troli beli-belah

Halaman troli beli-belah memaparkan semua maklumat produk yang ditambahkan pada troli beli-belah dan menyokong operasi penjelasan dan penyelesaian. Kami menggunakan Vuex untuk pengurusan negeri dan perkongsian data.

Pasang perpustakaan Vuex:

npm install vuex --save

Buat fail store.js untuk mengkonfigurasi pengurusan keadaan 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)
    }
  }
})

Ubah suai kod App.vue untuk mengkonfigurasi pengurusan negeri Vuex:

rreee menggunakan kod Vuex

untuk melaksanakan penambahan dan pemadaman troli beli-belah , jelas dan mengira fungsi.

3.4 Halaman pengesahan pesanan dan halaman kejayaan pesanan

Halaman pengesahan pesanan memaparkan semua maklumat produk yang dipilih dan menyokong maklumat pengisian seperti alamat dan kaedah pembayaran. Halaman kejayaan pesanan memaparkan butiran pesanan dan menyokong kembali ke halaman utama. Kami menggunakan Penghala Vue untuk menghantar parameter maklumat pesanan.

Buat fail Cart.vue untuk melaksanakan halaman pengesahan pesanan:

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

Buat fail OrderSuccess.vue untuk melaksanakan halaman kejayaan pesanan:

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

Gunakan Penghala Vue untuk lulus parameter maklumat pesanan. Ubah suai fail konfigurasi router.js:

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

Atas ialah kandungan terperinci Amalan pembangunan Vue: membina platform e-dagang responsif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!