vue实现校园餐厅

需求分析

校园餐厅系统通常包含以下核心功能：

• 用户端：菜品展示、购物车、订单提交、支付模拟、评价反馈
• 管理端：菜品管理、订单处理、数据统计
• 技术栈选择：Vue 3 + Vue Router + Pinia + Element Plus（UI框架）

项目结构搭建

通过Vite初始化项目并安装依赖：

npm create vite@latest campus-restaurant --template vue
cd campus-restaurant
npm install vue-router pinia element-plus axios

目录结构示例：

src/
├── api/                # 接口请求
├── assets/             # 静态资源
├── components/         # 公共组件
├── pages/              # 页面组件
│   ├── user/           # 用户端页面
│   ├── admin/          # 管理端页面
├── stores/             # Pinia状态管理
├── router/             # 路由配置
└── App.vue

核心功能实现

用户端功能

菜品展示页面
使用Element Plus的卡片组件展示菜品列表，通过Pinia管理数据：

<template>
  <el-row :gutter="20">
    <el-col v-for="item in menuList" :key="item.id" :span="6">
      <el-card :body-style="{ padding: '0px' }">
        <img :src="item.image" class="food-image" />
        <div style="padding: 14px;">
          <span>{{ item.name }}</span>
          <div class="price">{{ item.price }}元</div>
          <el-button @click="addToCart(item)">加入购物车</el-button>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

购物车功能
Pinia存储购物车状态，实现增减数量与结算：

// stores/cart.js
export const useCartStore = defineStore('cart', {
  state: () => ({
    items: []
  }),
  actions: {
    addItem(item) {
      const existing = this.items.find(i => i.id === item.id);
      existing ? existing.quantity++ : this.items.push({ ...item, quantity: 1 });
    }
  }
});

管理端功能

订单管理表格
使用Element Plus的表格组件与分页：

<el-table :data="orders" style="width: 100%">
  <el-table-column prop="id" label="订单ID" />
  <el-table-column prop="items" label="菜品列表" />
  <el-table-column prop="total" label="总价" />
  <el-table-column label="操作">
    <template #default="scope">
      <el-button @click="handleComplete(scope.row)">完成订单</el-button>
    </template>
  </el-table-column>
</el-table>

数据交互

通过Axios封装API请求，示例接口配置：

// api/menu.js
import axios from 'axios';

export const getMenuList = () => axios.get('/api/menu');
export const submitOrder = (data) => axios.post('/api/orders', data);

Mock数据示例（开发阶段可用）：

// mock/menu.json
[
  { "id": 1, "name": "红烧肉", "price": 15, "image": "/images/1.jpg" }
]

部署优化

1. 静态资源处理
   使用Vite的资产压缩插件：

   npm install vite-plugin-compression

   配置vite.config.js：

   import compression from 'vite-plugin-compression';
   
   export default defineConfig({
     plugins: [compression()]
   });

2. 路由懒加载
   拆分页面组件提升首屏加载速度：

   const UserHome = () => import('./pages/user/Home.vue');

扩展建议

• 支付集成：接入微信/支付宝沙箱环境模拟支付流程
• 实时更新：使用WebSocket实现订单状态实时推送
• 移动适配：通过媒体查询或独立移动端页面优化移动体验

通过以上模块化实现，可快速构建一个功能完整的校园餐厅系统。实际开发中需根据具体需求调整接口设计与UI交互细节。