Architecting a Campus E-Auction Platform with Spring Boot and Vue.js

System Architecture Overview

A digital campus auction platform requires a strict separation between client-side rendering, backend service orchestration, and relational data persistence. The implementation utilizes Spring Boot for RESTful API delivery, Vue.js for a reactive single-page application frontend, and MySQL to maintain transactional integrity across bidding operations.

Backend Service Layer

Spring Boot operates as the core server framework, minimizing boilerplate through convention-over-configuration principles. Embedded Tomcat enables standalone execution, while automatic dependency injection manages service lifecycles. The architecture implements stateless JWT authentication, bid validation rules, and asynchronous task scheduling for auction deadline enforcement. Controller endpoints expose standardized JSON responses, allowing seamless integration with frontend state managers.

Frontend Interface

Vue.js constructs a modular component tree that drives the user experience. Reactive data binding synchronizes the UI with real-time bid updates without triggering full page reloads. The application leverages Vue Router for client-side navigation and Pinia/Vuex for centralized state management. Component isolation encapsulates auction countdown timers, bidding forms, and user dashboards, ensuring maintainable and scalable frontend code.

Data Persistence

MySQL stores structured entities including user credentials, item catalogs, bid ledgers, and transaction records. The InnoDB engine enforces ACID compliance, which is essential to prevent concurrent bidding conflicts. Strategic indexing on high-frequency query columns (e.g., item categories, seller identifiers, and timestamp fields) optimizes retrieval latency and supports efficient pagination.

Application Configuration

Runtime parameters are centralized in a YAML configuration file, establishing data base connectivity, server endpoints, file upload limits, and ORM tuning.

server:
  port: 9090
  servlet:
    context-path: /campus-auction-api
  encoding:
    charset: UTF-8
    enabled: true
    force: true

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/auction_platform_db?useSSL=false&serverTimezone=UTC&allowPublicKeyRetrieval=true
    username: app_admin
    password: securePass_2024
    driver-class-name: com.mysql.cj.jdbc.Driver
  servlet:
    multipart:
      max-file-size: 50MB
      max-request-size: 50MB
  jackson:
    date-format: yyyy-MM-dd HH:mm:ss
    time-zone: Asia/Shanghai

mybatis-plus:
  configuration:
    map-underscore-to-camel-case: true
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  global-config:
    db-config:
      id-type: ASSIGN_ID
      logic-delete-field: isDeleted
      logic-delete-value: 1
      logic-not-delete-value: 0
  mapper-locations: classpath:/mapper/**/*.xml
  type-aliases-package: com.platform.entity

Persistence Mapping

Data access operations are defined through MyBatis XML mappers, which bridge Java entities with relational queries. The following configuraton illustrates the mapping strategy for auction listings, featuring explicit result mappings, dynamic filtering, and projection views.

<?xml version="1.0" encoding="UTF-8"?>


<mapper namespace="com.platform.mapper.AuctionListingMapper">

    <resultMap id="ListingResultMap" type="com.platform.entity.AuctionListingEntity">
        <id property="listingId" column="listing_id" />
        <result property="itemTitle" column="item_title" />
        <result property="startingPrice" column="start_price" />
        <result property="currentHighestBid" column="current_price" />
        <result property="sellerId" column="seller_uid" />
        <result property="endTime" column="auction_deadline" />
        <result property="status" column="listing_status" />
    </resultMap>

    <resultMap id="ListingViewModel" type="com.platform.vo.ListingDetailVO">
        <result property="title" column="item_title" />
        <result property="highestBid" column="current_price" />
        <result property="timeLeft" column="auction_deadline" />
    </resultMap>

    <select id="fetchActiveListings" resultMap="ListingResultMap">
        SELECT 
            listing_id,
            item_title,
            start_price,
            current_price,
            seller_uid,
            auction_deadline,
            listing_status
        FROM auction_listings
        WHERE listing_status = 1
          AND auction_deadline > CURRENT_TIMESTAMP
        <if test="category != null">
            AND category_code = #{category}
        </if>
        ORDER BY auction_deadline ASC
    </select>

    <select id="getSellerHistory" resultMap="ListingViewModel">
        SELECT 
            al.item_title,
            al.current_price,
            al.auction_deadline
        FROM auction_listings al
        WHERE al.seller_uid = #{sellerUid}
        ORDER BY al.created_at DESC
    </select>

</mapper>

Tags: spring-boot Vue.js mybatis-plus MySQL java-backend

Posted on Sun, 17 May 2026 03:18:56 +0000 by Uzm