vue实现校园餐厅

Vue 实现校园餐厅系统

项目结构设计

使用 Vue CLI 创建项目，典型目录结构如下：

src/
├── assets/          # 静态资源
├── components/      # 公共组件
│   ├── FoodCard.vue
│   ├── OrderPanel.vue
├── views/           # 页面视图
│   ├── Home.vue
│   ├── Menu.vue
│   ├── Cart.vue
├── router/          # 路由配置
├── store/           # Vuex状态管理
└── api/             # 接口封装

核心功能实现

菜单展示组件

<template>
  <div class="food-list">
    <FoodCard 
      v-for="item in menu" 
      :key="item.id"
      :food="item"
      @add-to-cart="handleAddToCart"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menu: [
        { id: 1, name: '红烧肉', price: 15, stock: 20 },
        { id: 2, name: '清蒸鱼', price: 18, stock: 15 }
      ]
    }
  },
  methods: {
    handleAddToCart(food) {
      this.$store.dispatch('addCartItem', food)
    }
  }
}
</script>

购物车功能

<template>
  <div class="cart">
    <h3>已选商品</h3>
    <div v-for="(item, index) in cartItems" :key="index">
      {{ item.name }} × {{ item.quantity }} 
      <button @click="removeItem(index)">删除</button>
    </div>
    <p>总价: {{ totalPrice }}元</p>
    <button @click="checkout">结算</button>
  </div>
</template>

<script>
export default {
  computed: {
    cartItems() {
      return this.$store.state.cart
    },
    totalPrice() {
      return this.cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0)
    }
  },
  methods: {
    removeItem(index) {
      this.$store.commit('REMOVE_CART_ITEM', index)
    },
    checkout() {
      alert(`订单提交成功，总金额: ${this.totalPrice}元`)
    }
  }
}
</script>

状态管理配置

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    cart: []
  },
  mutations: {
    ADD_CART_ITEM(state, food) {
      const existing = state.cart.find(item => item.id === food.id)
      existing ? existing.quantity++ : state.cart.push({...food, quantity: 1})
    },
    REMOVE_CART_ITEM(state, index) {
      state.cart.splice(index, 1)
    }
  },
  actions: {
    addCartItem({ commit }, food) {
      commit('ADD_CART_ITEM', food)
    }
  }
})

路由配置

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'
import Menu from '../views/Menu.vue'
import Cart from '../views/Cart.vue'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/menu', component: Menu },
    { path: '/cart', component: Cart }
  ]
})

样式优化建议

1. 使用Flex布局实现响应式菜单排列
2. 添加过渡动画提升用户体验
3. 采用学校主题色作为主色调
4. 对移动端进行适配优化

扩展功能方向

1. 接入真实API接口获取菜品数据
2. 实现用户登录和订单历史
3. 添加菜品搜索和分类筛选
4. 开发商家后台管理系统
5. 集成在线支付功能