基于 Java SpringBoot 的校园餐厅在线点餐管理系统设计与实现

后端核心代码 (SpringBoot + MyBatis)

依赖配置

确保引入 mybatis-spring-boot-starter, lombok, thymeleaf, mysql-connector-java。

实体类 (Entity)

以 Order 为例：

@Data
@TableName("orders")
public class Order {
    @TableId(type = IdType.AUTO)
    private Long id;
    private String orderNo;
    private Long userId;
    private BigDecimal totalAmount;
    private Integer status;
    private String address;
    private Date createTime;
    
    @TableField(exist = false)
    private List<OrderItem> items;
    
    @TableField(exist = false)
    private User user;
}

Mapper 接口

@Mapper
public interface OrderMapper extends BaseMapper {
    // 自定义复杂查询，例如查看销售报表
    @Select("SELECT DATE(create_time) as date, SUM(total_amount) as total FROM orders WHERE status >= 1 GROUP BY DATE(create_time)")
    List<Map<String, Object>> selectSalesReport();

    // 关联查询订单详情
    @Select("SELECT * FROM orders WHERE id = #{id}")
    @Results(id = "orderMap", value = {
        @Result(property = "items", column = "id", javaType = List.class, many = @Many(select = "com.canteen.mapper.OrderItemMapper.selectByOrderId"))
    })
    Order selectDetailById(Long id);
}

Service 层 - 下单逻辑

@Service
public class OrderService {
    @Autowired
    private OrderMapper orderMapper;
    @Autowired
    private OrderItemMapper orderItemMapper;
    @Autowired
    private DishMapper dishMapper;

    @Transactional(rollbackFor = Exception.class)
    public String createOrder(Long userId, List<CartItem> cartItems, String address) {
        // 1. 生成订单号
        String orderNo = "ORD" + System.currentTimeMillis() + new Random().nextInt(1000);
        
        // 2. 计算总价并构建订单对象
        BigDecimal total = BigDecimal.ZERO;
        Order order = new Order();
        order.setOrderNo(orderNo);
        order.setUserId(userId);
        order.setAddress(address);
        order.setStatus(0); // 待支付

        for (CartItem item : cartItems) {
            Dish dish = dishMapper.selectById(item.getDishId());
            if (dish == null || dish.getStatus() == 0) {
                throw new RuntimeException("餐品 " + item.getDishName() + " 已售罄或下架");
            }
            total = total.add(dish.getPrice().multiply(new BigDecimal(item.getQuantity())));
        }
        order.setTotalAmount(total);

        // 3. 插入订单主表
        orderMapper.insert(order);

        // 4. 插入订单详情表 & 更新销量
        for (CartItem item : cartItems) {
            OrderItem orderItem = new OrderItem();
            orderItem.setOrderId(order.getId());
            orderItem.setDishId(item.getDishId());
            orderItem.setDishName(item.getDishName());
            orderItem.setPrice(item.getPrice());
            orderItem.setQuantity(item.getQuantity());
            orderItemMapper.insert(orderItem);

            Dish dish = dishMapper.selectById(item.getDishId());
            dish.setSales(dish.getSales() + item.getQuantity());
            dishMapper.updateById(dish);
        }
        return orderNo;
    }

    public void paySuccess(String orderNo) {
        Order order = orderMapper.selectOne(new QueryWrapper().eq("order_no", orderNo));
        if (order != null && order.getStatus() == 0) {
            order.setStatus(1); // 变为待配送
            order.setPayTime(new Date());
            orderMapper.updateById(order);
        }
    }
}

Controller 层

@Controller
@RequestMapping("/order")
public class OrderController {
    @Autowired
    private OrderService orderService;

    // 跳转到确认订单页
    @GetMapping("/confirm")
    public String confirmPage(Model model, HttpSession session) {
        User user = (User) session.getAttribute("currentUser");
        if (user == null) return "redirect:/login";
        List<CartItem> cart = (List<CartItem>) session.getAttribute("cart");
        model.addAttribute("cart", cart);
        return "order_confirm";
    }

    // 提交订单
    @PostMapping("/submit")
    @ResponseBody
    public Result submit(@RequestBody OrderSubmitDTO dto, HttpSession session) {
        try {
            User user = (User) session.getAttribute("currentUser");
            String orderNo = orderService.createOrder(user.getId(), dto.getItems(), dto.getAddress());
            return Result.success(orderNo);
        } catch (Exception e) {
            return Result.error(e.getMessage());
        }
    }

    // 管理员查看报表数据
    @GetMapping("/admin/sales-data")
    @ResponseBody
    public List<Map<String, Object>> getSalesData() {
        return orderService.getSalesReport();
    }
}

前端核心实现 (HTML + Vue.js + Thymeleaf)

由于是前后端不分离，使用 Thymeleaf 作为模板引擎，在页面内部引入 Vue.js 处理动态交互。

菜单点餐页 (menu.html)

<div id="app">
  <div class="dish-card" v-for="dish in filteredDishes" :key="dish.id">
    <h3>{{ dish.name }}</h3>
    <p>价格：¥{{ dish.price }}</p>
    <p>销量：{{ dish.sales }}</p>
    <button @click="addToCart(dish)">加入购物车</button>
  </div>
  
  <div class="cart-fixed">
    <p>共 {{ totalCount }} 件，总计：¥{{ totalPrice }}</p>
    <button @click="goToSettle">去结算</button>
  </div>
</div>

<script>
  var initialDishes = /*[[${dishes}]]*/ [];
  new Vue({
    el: '#app',
    data: {
      dishes: initialDishes,
      searchKey: '',
      cart: []
    },
    computed: {
      filteredDishes() {
        if (!this.searchKey) return this.dishes;
        return this.dishes.filter(d => d.name.includes(this.searchKey));
      },
      totalCount() {
        return this.cart.reduce((sum, item) => sum + item.quantity, 0);
      },
      totalPrice() {
        return this.cart.reduce((sum, item) => sum + (item.price * item.quantity), 0).toFixed(2);
      }
    },
    methods: {
      addToCart(dish) {
        let item = this.cart.find(c => c.id === dish.id);
        if (item) {
          item.quantity++;
        } else {
          this.cart.push({...dish, quantity: 1});
        }
      },
      goToSettle() {
        window.location.href = '/order/confirm';
      }
    }
  });
</script>

管理员报表页 (admin_report.html) - 集成 Echarts

<div id="mainChart"></div>
<script>
  var salesData = /*[[${salesData}]]*/ [];
  var myChart = echarts.init(document.getElementById('mainChart'));
  var dates = salesData.map(item => item.date);
  var totals = salesData.map(item => item.total);
  var option = {
    title: { text: '每日销售额趋势' },
    tooltip: {},
    xAxis: { data: dates },
    yAxis: {},
    series: [{
      name: '销售额',
      type: 'bar',
      data: totals,
      itemStyle: { color: '#5470C6' }
    }]
  };
  myChart.setOption(option);
</script>

菜品详情与评价实现

后端代码

// Dish.java
@Data
@TableName("dish")
public class Dish {
    @TableId(type = IdType.AUTO)
    private Long id;
    private Long categoryId;
    private String name;
    private BigDecimal price;
    private String image;
    private String description;
    private Integer status;
    private Integer sales;
    
    @TableField(exist = false)
    private String categoryName;
    
    @TableField(exist = false)
    private List<Comment> comments;
}

// Comment.java
@Data
@TableName("comment")
public class Comment {
    @TableId(type = IdType.AUTO)
    private Long id;
    private Long orderId;
    private Long userId;
    private Long dishId;
    private String content;
    private Integer rating;
    private Date createTime;
    
    @TableField(exist = false)
    private String username;
}

Controller 层

@Controller
@RequestMapping("/dish")
public class DishController {
    @Autowired
    private DishService dishService;

    @GetMapping("/detail")
    public String detailPage(@RequestParam Long id, Model model) {
        Dish dish = dishService.getDishDetail(id);
        if (dish == null) return "redirect:/";
        model.addAttribute("dish", dish);
        return "dish_detail";
    }
}

前端页面 (dish_detail.html)

<div id="app">
  <div class="dish-info">
    <div class="dish-image"><img :src="dish.image" /></div>
    <div class="dish-details">
      <h2 class="dish-title">{{ dish.name }}</h2>
      <p class="dish-price">¥ {{ dish.price }}</p>
      <p class="dish-desc">{{ dish.description }}</p>
      <div class="buy-section">
        <div class="quantity-control">
          <button @click="decreaseQuantity">-</button>
          <input type="text" v-model.number="quantity" readonly />
          <button @click="increaseQuantity">+</button>
        </div>
        <button class="add-to-cart-btn" @click="addToCart">加入餐车</button>
      </div>
    </div>
  </div>
  
  <div class="comments-section">
    <h3>菜品评价 ({{ dish.comments.length }})</h3>
    <div class="comment-item" v-for="comment in dish.comments" :key="comment.id">
      <span class="comment-user">{{ comment.username || '匿名用户' }}</span>
      <p class="comment-content">{{ comment.content }}</p>
      <span class="comment-time">{{ formatDate(comment.createTime) }}</span>
    </div>
  </div>
</div>

<script>
  var dishData = /*[[${dish}]]*/ {};
  new Vue({
    el: '#app',
    data: {
      dish: dishData,
      quantity: 1
    },
    methods: {
      increaseQuantity() { this.quantity++; },
      decreaseQuantity() { if (this.quantity > 1) this.quantity--; },
      addToCart() {
        alert(`已将 ${this.quantity} 份 ${this.dish.name} 加入购物车！`);
      },
      formatDate(dateString) {
        const date = new Date(dateString);
        return date.toLocaleString('zh-CN', { hour12: false });
      }
    }
  });
</script>

购物车功能实现

后端服务 (CartService)

@Service
public class CartService {
    public List<CartItem> getCart(HttpSession session) {
        List<CartItem> cart = (List<CartItem>) session.getAttribute("cart");
        if (cart == null) {
            cart = new ArrayList<>();
            session.setAttribute("cart", cart);
        }
        return cart;
    }

    public void addToCart(HttpSession session, CartItem newItem) {
        List<CartItem> cart = getCart(session);
        for (CartItem item : cart) {
            if (item.getDishId().equals(newItem.getDishId())) {
                item.setQuantity(item.getQuantity() + newItem.getQuantity());
                return;
            }
        }
        cart.add(newItem);
    }

    public void removeFromCart(HttpSession session, Long dishId) {
        List<CartItem> cart = getCart(session);
        cart.removeIf(item -> item.getDishId().equals(dishId));
    }

    public BigDecimal calculateTotal(List<CartItem> cart) {
        return cart.stream()
            .map(CartItem::getSubtotal)
            .reduce(BigDecimal.ZERO, BigDecimal::add);
    }
}

前端页面 (cart.html)

<div id="app">
  <table>
    <thead>
      <tr><th>菜品</th><th>单价</th><th>数量</th><th>小计</th><th>操作</th></tr>
    </thead>
    <tbody>
      <tr v-for="item in cart" :key="item.dishId">
        <td>{{ item.dishName }}</td>
        <td>¥ {{ item.price }}</td>
        <td>
          <button @click="decreaseQuantity(item)">-</button>
          {{ item.quantity }}
          <button @click="increaseQuantity(item)">+</button>
        </td>
        <td>¥ {{ item.subtotal.toFixed(2) }}</td>
        <td><button @click="removeItem(item)">删除</button></td>
      </tr>
    </tbody>
  </table>
  <div class="total-section">
    <p>应付金额：¥ {{ totalAmount.toFixed(2) }}</p>
    <button @click="submitOrder" :disabled="cart.length === 0">提交订单</button>
  </div>
</div>

<script>
  var cartData = /*[[${cart}]]*/ [];
  var totalAmountData = /*[[${totalAmount}]]*/ 0;
  new Vue({
    el: '#app',
    data: {
      cart: cartData,
      totalAmount: totalAmountData
    },
    methods: {
      increaseQuantity(item) { item.quantity++; this.updateServer(item); },
      decreaseQuantity(item) { if (item.quantity > 1) { item.quantity--; this.updateServer(item); } },
      removeItem(item) {
        if(confirm('确定要删除这道菜吗？')) {
          const index = this.cart.indexOf(item);
          if (index > -1) this.cart.splice(index, 1);
          this.callApi('/cart/remove', { dishId: item.dishId });
        }
      },
      submitOrder() {
        window.location.href = '/cart/submit';
      },
      updateServer() {
        .(, { : item., : item. });
      },
      () {
         formData =  ();
         ( key  params) formData.(key, params[key]);
        (url, {
          : ,
          : { :  },
          : formData
        }).( response.()).( {
           (!data.) (data. || );
          .();
        });
      },
      () {
        . = ..( sum + item., );
      }
    }
  });
</script>

运行指南

1. 初始化项目：使用 Spring Initializr 创建包含 Web, MyBatis, MySQL, Lombok, Thymeleaf 的项目。
2. 建库建表：执行第一部分提供的 SQL 语句。
3. 配置连接：在 application.yml 中配置数据库账号密码。
4. 复制代码：将 Entity, Mapper, Service, Controller 代码填入对应包结构。
5. 编写页面：在 src/main/resources/templates 下创建 HTML 文件。
6. 启动项目：运行 SpringBoot 应用即可访问。