日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

公告：魔扣目錄網(wǎng)為廣大站長提供免費收錄網(wǎng)站服務(wù)，提交前請做好本站友鏈：【 網(wǎng)站目錄：http://www.ylptlb.cn 】， 免友鏈快審服務(wù)（50元/站），

點擊這里在線咨詢客服
新站提交
  • 網(wǎng)站：51998
  • 待審：31
  • 小程序：12
  • 文章：1030137
  • 會員：747

Vue開發(fā)實戰(zhàn)：構(gòu)建響應(yīng)式的電商平臺

發(fā)布時間：2024-03-08 23:09:06 作者：網(wǎng)友整理

Vue是一款流行的JavaScript框架，它被廣泛用于Web開發(fā)中。本文將介紹如何使用Vue構(gòu)建一個響應(yīng)式的電商平臺。我們將會使用Vue來搭建前端界面并調(diào)用后端API接口獲取數(shù)據(jù)，同時也會使用Vue的響應(yīng)式機制來實現(xiàn)數(shù)據(jù)的自動更新和動態(tài)渲染。下面將分別介紹Vue的基礎(chǔ)知識、電商平臺的設(shè)計和實現(xiàn)步驟。

1. Vue基礎(chǔ)知識

1.1 Vue的安裝與使用

Vue可以通過CDN引用或者直接下載安裝包來使用。我們這里使用官方提供的Vue CLI構(gòu)建工具來快速搭建Vue項目。

全局安裝Vue CLI：

npm install -g vue-cli

登錄后復制

使用Vue CLI創(chuàng)建一個新的Vue項目：

vue create my-project

登錄后復制

1.2 Vue的組件化開發(fā)

Vue的核心思想是組件化開發(fā)，一個Vue應(yīng)用可以由多個組件組成。每個組件可以包含模板、業(yè)務(wù)邏輯和樣式。組件可以相互嵌套和傳遞數(shù)據(jù)，從而形成復雜的頁面結(jié)構(gòu)。

下面是一個簡單的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>

登錄后復制

上述代碼定義了一個名為MyComponent的組件，它包含一個標題和一個列表。組件可以通過props屬性傳遞父組件數(shù)據(jù)，這里使用了title和items兩個屬性。

1.3 Vue的事件綁定和觸發(fā)

Vue的事件綁定和觸發(fā)與其他框架類似，可以通過v-on指令綁定事件和通過$emit方法觸發(fā)事件。事件可以傳遞參數(shù)和數(shù)據(jù)。

下面是一個簡單的事件綁定和觸發(fā)示例：

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

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

登錄后復制

上述代碼定義了一個名為handleClick的方法，在點擊按鈕時會觸發(fā)custom-event事件并傳遞一個字符串參數(shù)。

2. 電商平臺的設(shè)計

電商平臺通常包含商品展示、購物車、訂單確認和支付等功能。我們基于這些功能設(shè)計一個簡單的電商平臺，包含以下頁面：

首頁：展示所有商品信息并支持搜索和分類。商品詳情頁：展示單個商品的詳細信息并支持加入購物車操作。購物車頁：展示所有加入購物車的商品信息并支持清空和結(jié)算操作。訂單確認頁：展示所有已選中的商品信息并支持地址和支付方式等信息的填寫。訂單成功頁：展示訂單詳情并支持返回首頁操作。

為了方便演示，我們只提供靜態(tài)數(shù)據(jù)和以axios模擬的API接口。后端數(shù)據(jù)使用JSON格式，包含所有商品信息和訂單信息。

3. 電商平臺的實現(xiàn)步驟

3.1 首頁

首頁展示所有商品信息并支持搜索和分類。我們使用Bootstrap和FontAwesome庫來美化頁面樣式和圖標。

首先安裝這兩個庫：

npm install bootstrap font-awesome --save

登錄后復制

添加樣式引用到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>

登錄后復制

使用Vue Router來實現(xiàn)頁面跳轉(zhuǎn)和傳遞參數(shù)。添加以下代碼到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')

登錄后復制

創(chuàng)建router.js文件定義路由配置：

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

登錄后復制

創(chuàng)建Home.vue文件實現(xiàn)首頁展示和搜索功能：

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

登錄后復制

上述代碼通過axios調(diào)用API接口獲取商品信息，并支持搜索和添加到購物車操作。

3.2 商品詳情頁

商品詳情頁展示單個商品的詳細信息并支持加入購物車操作。我們使用Vue Router來傳遞商品ID參數(shù)。

創(chuàng)建Product.vue文件實現(xiàn)商品詳情頁：

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

登錄后復制

使用Vue Router傳遞商品ID參數(shù)。修改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 購物車頁

購物車頁展示所有加入購物車的商品信息并支持清空和結(jié)算操作。我們使用Vuex來實現(xiàn)狀態(tài)管理和數(shù)據(jù)共享。

安裝Vuex庫：

npm install vuex --save

登錄后復制

創(chuàng)建store.js文件配置Vuex的狀態(tài)管理：

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

登錄后復制

修改App.vue的代碼配置Vuex的狀態(tài)管理：

<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>數(shù)量</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>

登錄后復制

上述代碼使用Vuex實現(xiàn)了購物車的添加、刪除、清空和計算等功能。

3.4 訂單確認頁和訂單成功頁

訂單確認頁展示所有已選中的商品信息并支持地址和支付方式等信息的填寫。訂單成功頁展示訂單詳情并支持返回首頁操作。我們使用Vue Router來傳遞訂單信息參數(shù)。

創(chuàng)建Cart.vue文件實現(xiàn)訂單確認頁：

<template>
  <div>
    <h2>確認訂單</h2>
    <table class="table">
      <thead>
        <tr>
          <th>名稱</th>
          <th>單價</th>
          <th>數(shù)量</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>

登錄后復制

創(chuàng)建OrderSuccess.vue文件實現(xiàn)訂單成功頁：

<template>
  <div>
    <h2>訂單詳情</h2>
    <p>姓名：{{ name }}</p>
    <p>地址：{{ address }}</p>
    <p>支付方式：{{ payment }}</p>
    <table class="table">
      <thead>
        <tr>
          <th>名稱</th>
          <th>單價</th>
          <th>數(shù)量</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>

登錄后復制

使用Vue Router傳遞訂單信息參數(shù)。修改router.js的配置文件：

import Vue from 'vue'

登錄后復制

分享到：
標簽：響應(yīng) 實戰(zhàn) 平臺 開發(fā) 構(gòu)建
用戶無頭像

網(wǎng)友整理

注冊時間：

網(wǎng)站：5 個   小程序：0 個  文章：12 篇

  • 51998

    網(wǎng)站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會員

趕快注冊賬號，推廣您的網(wǎng)站吧！
最新入駐小程序

數(shù)獨大挑戰(zhàn)2018-06-03

數(shù)獨一種數(shù)學游戲，玩家需要根據(jù)9

答題星2018-06-03

您可以通過答題星輕松地創(chuàng)建試卷

全階人生考試2018-06-03

各種考試題，題庫，初中，高中，大學四六

運動步數(shù)有氧達人2018-06-03

記錄運動步數(shù)，積累氧氣值。還可偷

每日養(yǎng)生app2018-06-03

每日養(yǎng)生,天天健康

體育訓練成績評定2018-06-03

通用課目體育訓練成績評定