Bagaimana untuk menulis pusat membeli-belah statik dalam vue

Dengan perkembangan pesat e-dagang, membeli-belah dalam talian telah menjadi kebiasaan orang ramai. Oleh itu, semakin banyak pelbagai laman web pusat membeli-belah Bagaimana untuk membina laman web pusat membeli-belah yang baik telah menjadi perhatian ramai orang. Dalam proses ini, rangka kerja Vue telah menjadi salah satu pilihan pertama untuk lebih ramai pembangun bahagian hadapan, dan tapak web pusat membeli-belah statik tidak terkecuali. Artikel ini akan bermula dari perspektif Vue dan memperkenalkan cara menggunakan rangka kerja Vue untuk membangunkan pusat membeli-belah statik.

1. Gambaran Keseluruhan Projek
Dalam artikel ini, kami akan menggunakan rangka kerja Vue untuk membina pusat membeli-belah statik yang ringkas. Laman web pusat membeli-belah ini termasuk antara muka berikut:

• Halaman senarai produk, yang memaparkan semua produk.
• Halaman butiran produk memaparkan maklumat terperinci tentang sesuatu produk.
• Halaman troli beli-belah memaparkan produk yang dipilih oleh pengguna.
• Halaman penyelesaian, menunjukkan butiran penyelesaian.

2. Persediaan
Sebelum kita mula, kita perlu memasang rangka kerja Vue dan menyediakan alatan pembangunan yang berkaitan. Kita boleh menggunakan Vue CLI untuk mencipta projek bernama "pusat membeli-belah" dan menggunakan pemalam Vue Router untuk mengurus penghalaan. Kami juga perlu menggunakan perpustakaan axios untuk mengendalikan interaksi bahagian hadapan menghantar maklumat ke pelayan.

3. Halaman senarai produk
Dalam Vue, kami biasanya menggunakan komponen untuk membina halaman dan melaksanakan komunikasi antara komponen. Oleh itu, kami akan mencipta komponen yang dipanggil "GoodsList" yang akan memaparkan senarai semua produk. Untuk memudahkan proses pembangunan kami, kami boleh mencipta fail data.json dalam direktori src untuk menyimpan maklumat tentang semua produk.

Berikut ialah kod untuk komponen GoodsList yang ringkas:

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

Dalam komponen ini, kami menggunakan pengikatan data dua hala Vue untuk memaparkan data produk dalam fail data.json ke halaman atasan. Pada masa yang sama, kami juga menggunakan arahan untuk Penghala Vue untuk melompat ke halaman butiran produk selepas mengklik nama produk.

4. Halaman butiran produk
Dalam halaman butiran produk, kami akan memaparkan maklumat terperinci produk tertentu. Kami boleh menggunakan parameter penghalaan untuk memaparkan kandungan halaman secara dinamik. Berikut ialah kod komponen GoodsDetail yang mudah:

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

Dalam komponen ini, kami memperoleh parameter penghalaan melalui objek $route yang disediakan oleh Vue Router, pilih maklumat produk yang sepadan dan paparkannya pada halaman menggunakan dua -cara mengikat data unggul.

5. Pelaksanaan halaman troli beli-belah dan halaman daftar keluar
Dalam halaman troli beli-belah dan halaman daftar keluar, kami perlu memaparkan produk dan jumlah harga yang telah dipilih oleh pengguna. Untuk mencapai keperluan ini, kami boleh menggunakan Vuex untuk mengurus komunikasi dan keadaan antara komponen. Kami mula-mula membuat modul Vuex bernama "Cart" untuk mengurus maklumat troli beli-belah.

Berikut ialah kod modul Troli:

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
}

Dalam modul ini, kami mentakrifkan tiga fungsi mutasi, yang digunakan untuk menambah item pada senarai troli beli-belah dan memadamkannya daripada beli-belah senarai troli barang dan senarai troli beli-belah kosong. Pada masa yang sama, kami juga menentukan tiga fungsi tindakan, yang digunakan untuk mencetuskan tiga fungsi mutasi di atas.

Kami juga perlu memperkenalkan modul Troli ini dalam fail src/store/index.js dan menggunakan pemalam Vuex dalam contoh Vue.

Berikut ialah kod untuk halaman troli beli-belah ringkas:

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

Dalam komponen ini, kami menggunakan kaedah pengenalan modular Vuex untuk menggabungkan keadaan dan operasi dalam Vuex melalui mapState dan mapActions Map ke data dan kaedah komponen.

Untuk halaman pembayaran, kami boleh menggunakan kaedah yang sama untuk memaparkan produk dan jumlah harga yang telah dipilih oleh pengguna. Walau bagaimanapun, perbezaan antara halaman ini dan halaman troli beli-belah ialah pengguna perlu membuat pembayaran pada halaman daftar keluar. Untuk pelaksanaan fungsi ini, kami perlu menghantar permintaan kepada pelayan untuk memproses maklumat pembayaran dan pesanan. Untuk kaedah pelaksanaan khusus, sila rujuk artikel lain yang berkaitan.

Ringkasnya, rangka kerja Vue membolehkan kami membina tapak web pusat membeli-belah statik dengan mudah, dan menggunakan Vuex dan Vue Router untuk mengurus status dan penghalaan dengan lebih baik. Melalui penggunaan alat ini, kita bukan sahaja dapat memahami dengan lebih baik ciri-ciri rangka kerja Vue, tetapi juga membangunkan laman web pusat membeli-belah yang lebih lengkap.

Atas ialah kandungan terperinci Bagaimana untuk menulis pusat membeli-belah statik dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!