SpringBoot+Vue3校园商铺管理系统开发实战

1. 校园商铺管理系统架构解析

这套基于SpringBoot+Vue3+MyBatis的校园商铺管理系统采用了经典的前后端分离架构，后端使用Java技术栈处理业务逻辑和数据持久化，前端通过Vue3构建响应式用户界面。MySQL作为关系型数据库承担数据存储职责，整套系统特别适合高校场景下的商铺租赁、商品管理和交易处理需求。

技术选型上，SpringBoot 2.7.x提供了开箱即用的企业级开发体验，内嵌Tomcat服务器简化了部署流程。Vue3的组合式API配合TypeScript支持，使得前端组件开发更加模块化。MyBatis-Plus 3.5.x作为ORM框架，在简化CRUD操作的同时保留了原生SQL的灵活性。

实际开发中发现，校园场景对系统有着特殊要求：需要处理学期制的商铺轮换、学生身份验证、校园卡支付集成等特色功能，这些都需要在基础架构上做针对性设计。

2. 后端核心模块实现

2.1 商铺管理模块设计

商铺实体采用JPA注解定义核心字段，包括：

java复制@Entity
@Table(name = "campus_shop")
public class Shop {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    
    @Column(nullable = false, length = 50)
    private String shopName;
    
    @Enumerated(EnumType.STRING)
    private ShopType type; // 枚举定义餐饮/文具/数码等
    
    @ManyToOne
    @JoinColumn(name = "owner_id")
    private Student owner;
    
    @Column(precision = 10, scale = 2)
    private BigDecimal monthlyRent;
    
    // 学期租赁信息
    private Integer academicYear;
    private Semester semester; // 枚举: SPRING/AUTUMN
}

采用MyBatis动态SQL处理复杂查询场景：

xml复制<select id="selectAvailableShops" resultMap="ShopResultMap">
    SELECT * FROM campus_shop
    <where>
        <if test="type != null">
            AND type = #{type}
        </if>
        <if test="minSize != null">
            AND area >= #{minSize}
        </if>
        <if test="maxRent != null">
            AND monthly_rent <= #{maxRent}
        </if>
        AND status = 'AVAILABLE'
        AND academic_year = #{currentYear}
        AND semester = #{currentSemester}
    </where>
    ORDER BY monthly_rent ASC
</select>

2.2 交易支付系统实现

校园场景特有的支付流程需要对接校园卡系统：

java复制@Service
@Transactional
public class PaymentServiceImpl implements PaymentService {
    private final CampusCardClient cardClient;
    private final TransactionMapper transactionMapper;

    public PaymentResult processShopRent(RentPaymentRequest request) {
        // 1. 验证商铺状态
        Shop shop = shopService.validateShopAvailability(request.getShopId());
        
        // 2. 校园卡扣款
        CardPaymentRequest cardRequest = new CardPaymentRequest(
            request.getStudentId(),
            shop.getMonthlyRent(),
            "商铺租金-" + shop.getShopName()
        );
        CardPaymentResult cardResult = cardClient.deduct(cardRequest);
        
        // 3. 记录交易
        Transaction transaction = new Transaction();
        transaction.setAmount(shop.getMonthlyRent());
        transaction.setPaymentMethod(PaymentMethod.CAMPUS_CARD);
        transaction.setTransactionId(cardResult.getTransactionId());
        transactionMapper.insert(transaction);
        
        // 4. 更新商铺状态
        shopService.updateShopStatus(request.getShopId(), ShopStatus.RENTED);
        
        return new PaymentResult(true, "支付成功");
    }
}

踩坑提醒：校园卡支付接口通常有QPS限制，需要添加@Retryable注解实现自动重试，并配置合理的退避策略。

3. 前端工程化实践

3.1 Vue3组合式API应用

商铺列表组件采用