当前位置：首页 > VUE

vue实现点餐系统

2026-02-22 00:38:40VUE

Vue实现点餐系统核心步骤

搭建基础项目结构 使用Vue CLI或Vite初始化项目，安装必要依赖如vue-router、axios。创建基础目录结构，包括components（菜品展示、购物车）、views（主页、订单页）、router（路由配置）和store（状态管理）。

设计数据模型 定义菜品数据结构和购物车状态。典型数据结构示例：

// 菜品数据
{
  id: 1,
  name: "宫保鸡丁",
  price: 38,
  category: "热菜",
  image: "image-url.jpg"
}

// 购物车数据
{
  items: [
    { dishId: 1, quantity: 2, note: "不要花生" }
  ],
  total: 76
}

实现菜品展示组件 创建可复用的菜品卡片组件，包含图片、名称、价格和加入购物车按钮。使用v-for循环渲染菜品列表，按分类筛选展示。添加搜索功能通过computed属性过滤菜品。

购物车功能开发 使用Vuex或Pinia管理购物车状态，实现添加/删除菜品、修改数量、添加备注等功能。计算总价通过getter实现，持久化存储可结合localStorage。

订单提交处理 创建订单提交表单，收集配送信息和支付方式。通过axios与后端API交互，处理订单创建逻辑。添加表单验证和提交状态提示。

关键代码示例

购物车状态管理（Pinia示例）

// stores/cart.js
export const useCartStore = defineStore('cart', {
  state: () => ({
    items: [],
  }),
  actions: {
    addItem(dish) {
      const existing = this.items.find(item => item.dishId === dish.id)
      existing ? existing.quantity++ : this.items.push({ 
        dishId: dish.id, 
        quantity: 1,
        note: ''
      })
    }
  },
  getters: {
    totalPrice(state) {
      return state.items.reduce((sum, item) => {
        const dish = getDishById(item.dishId) // 需实现菜品查询方法
        return sum + (dish.price * item.quantity)
      }, 0)
    }
  }
})

菜品列表组件

<template>
  <div class="dish-list">
    <div v-for="dish in filteredDishes" :key="dish.id" class="dish-card">
      <img :src="dish.image" :alt="dish.name">
      <h3>{{ dish.name }}</h3>
      <p>¥{{ dish.price }}</p>
      <button @click="addToCart(dish)">加入购物车</button>
    </div>
  </div>
</template>

<script setup>
import { useCartStore } from '@/stores/cart'
const cart = useCartStore()

const props = defineProps({
  dishes: Array,
  searchQuery: String
})

const filteredDishes = computed(() => {
  return props.dishes.filter(dish => 
    dish.name.includes(props.searchQuery)
  )
})

const addToCart = (dish) => {
  cart.addItem(dish)
}
</script>