Vue 개발 사례: 반응형 전자상거래 플랫폼 구축-View.js-php.cn

Vue 개발 사례: 반응형 전자상거래 플랫폼 구축

Vue는 웹 개발에 널리 사용되는 인기 있는 JavaScript 프레임워크입니다. 이 기사에서는 Vue를 사용하여 반응형 전자상거래 플랫폼을 구축하는 방법을 소개합니다. Vue를 사용하여 프런트엔드 인터페이스를 구축하고 백엔드 API 인터페이스를 호출하여 데이터를 얻습니다. 또한 Vue의 응답 메커니즘을 사용하여 데이터의 자동 업데이트 및 동적 렌더링을 달성합니다. 다음은 전자상거래 플랫폼의 설계 및 구현 단계인 Vue에 대한 기본 지식을 소개합니다.

1. Vue 기본지식

1.1 Vue 설치 및 사용

Vue는 CDN 참조나 설치 패키지를 직접 다운로드하여 사용할 수 있습니다. 여기서는 공식적으로 제공되는 Vue CLI 빌드 도구를 사용하여 Vue 프로젝트를 빠르게 빌드합니다.

전역적으로 Vue CLI 설치:

npm install -g vue-cli

로그인 후 복사

Vue CLI를 사용하여 새 Vue 프로젝트 만들기:

vue create my-project

로그인 후 복사

1.2 Vue의 구성 요소 기반 개발

Vue의 핵심 아이디어는 구성 요소 기반 개발이 가능하다는 것입니다. 여러 구성 요소의. 각 구성 요소에는 템플릿, 비즈니스 논리 및 스타일이 포함될 수 있습니다. 구성 요소는 서로 중첩되고 데이터를 전달하여 복잡한 페이지 구조를 형성할 수 있습니다.

다음은 간단한 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 속성을 통해 상위 구성 요소 데이터를 전달할 수 있으며 여기서는 title 및 items 속성이 사용됩니다.

1.3 Vue의 이벤트 바인딩 및 트리거링

Vue의 이벤트 바인딩 및 트리거링은 v-on 지시어를 통해 이벤트를 바인딩하고 $emit 메서드를 통해 이벤트를 트리거할 수 있습니다. 이벤트는 매개변수와 데이터를 전달할 수 있습니다.

다음은 간단한 이벤트 바인딩 및 트리거링 예입니다.

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

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

로그인 후 복사

위 코드는 사용자 정의 이벤트 이벤트를 트리거하고 버튼을 클릭할 때 문자열 매개변수를 전달하는 handlerClick이라는 메서드를 정의합니다.

2. 전자상거래 플랫폼의 디자인

전자상거래 플랫폼에는 일반적으로 상품 진열, 장바구니, 주문 확인, 결제 등의 기능이 포함됩니다. 우리는 다음 페이지를 포함하여 이러한 기능을 기반으로 간단한 전자 상거래 플랫폼을 설계합니다.

홈 페이지: 모든 제품 정보를 표시하고 검색 및 분류를 지원합니다.
제품 세부정보 페이지: 단일 제품에 대한 세부 정보를 표시하고 장바구니에 추가하는 작업을 지원합니다.
장바구니 페이지: 장바구니에 추가된 모든 제품 정보를 표시하고 청산 및 정산 작업을 지원합니다.
주문 확인 페이지: 선택한 모든 제품 정보가 표시되며 주소, 결제 방법 등의 정보 입력을 지원합니다.
주문 성공 페이지: 주문 세부 정보를 표시하고 홈 페이지로 돌아갈 수 있도록 지원합니다.

시연의 편의를 위해 Axios로 시뮬레이션한 정적 데이터와 API 인터페이스만 제공합니다. 백엔드 데이터는 JSON 형식을 사용하며 모든 제품 정보 및 주문 정보를 포함합니다.

3. 전자상거래 플랫폼 구현 단계

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를 사용하여 페이지 점프를 구현하고 매개변수를 전달하세요. 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')

로그인 후 복사

라우팅 구성을 정의하기 위한 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
    }
  ]
})

로그인 후 복사

홈페이지 표시 및 검색 기능을 구현하기 위한 Home.vue 파일 생성:

<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를 통한 API 인터페이스를 통해 제품 정보를 얻을 수 있으며 검색 및 장바구니에 추가 작업을 지원합니다.

3.2 상품 상세 페이지

상품 상세 페이지에서는 단일 상품의 상세 정보를 확인할 수 있으며, 장바구니 담기를 지원합니다. 우리는 Vue Router를 사용하여 제품 ID 매개변수를 전달합니다.

제품 세부정보 페이지를 구현하기 위해 Product.vue 파일을 만듭니다.

<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 매개변수를 전달합니다. 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 장바구니 페이지

장바구니 페이지에는 장바구니에 추가된 모든 제품 정보가 표시되며 청산 및 결제 작업을 지원합니다. 상태 관리 및 데이터 공유를 위해 Vuex를 사용합니다.

Vuex 라이브러리 설치:

npm install vuex --save

로그인 후 복사

store.js 파일을 생성하여 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)
    }
  }
})

로그인 후 복사

App.vue의 코드를 수정하여 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>

로그인 후 복사

위 코드는 Vuex를 사용합니다. 장바구니 추가 및 삭제, 삭제, 계산 기능을 구현합니다.

3.4 주문 확인 페이지 및 주문 성공 페이지

주문 확인 페이지에서는 선택한 모든 상품 정보가 표시되며 주소, 결제 방법 등의 정보 입력을 지원합니다. 주문 성공 페이지에는 주문 세부 정보가 표시되며 홈 페이지로 돌아가는 기능이 지원됩니다. 우리는 Vue Router를 사용하여 주문 정보 매개변수를 전달합니다.

주문 확인 페이지를 구현하기 위해 Cart.vue 파일 만들기:

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

로그인 후 복사

주문 성공 페이지를 구현하기 위해 OrderSuccess.vue 파일 만들기:

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

로그인 후 복사

Vue 라우터를 사용하여 주문 정보 매개변수를 전달합니다. router.js의 구성 파일을 수정하세요: