System Architecture Overview

The campus online auction system adopts a separated front-end and back-end architecture. The back-end is powered by Spring Boot, exposing RESTful APIs, while the front-end uses Vue.js for rendering and user interaction. MySQL serves as the persistent data store.

Technology Stack Details

Back-End: Spring Boot
Spring Boot simplifies the bootstrapping of production-grade Spring applications by favoring convention over configuration. It embeds a servlet container such as Tomcat, removing the need to deploy WAR packages. Automatic configuration and starter modules accelerate development, while declarative dependency management ensures consistency.

Front-End: Vue.js
Vue.js is a progressive JavaScript framework for crafting interactive user interfaces. Its component-based model promotes reusability and maintainability. Features like reactive data binding and a virtual DOM enhance both developer experience and runtime performance. The official ecosystem includes Vue Router for navigation and Vuex (or Pinia) for state management.

Database: MySQL
MySQL is a mature open-source relational database. It supports standard SQL, multiple storage engines (such as InnoDB), and delivers reliable ACID-compliant transactions suitable for auction scenarios.

Application Configuration

A typical application.yml file for the service might look like this:

# Server settings
server:
  tomcat:
    uri-encoding: UTF-8
  port: 8080
  servlet:
    context-path: /api

# Data source and multipart limits
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/auction_db?useUnicode=true&characterEncoding=utf-8&serverTimezone=GMT%2B8&useSSL=false&allowPublicKeyRetrieval=true
    username: dev_user
    password: dev_pass
  servlet:
    multipart:
      max-file-size: 300MB
      max-request-size: 300MB
  resources:
    static-locations: classpath:static/,file:static/

# MyBatis-Plus configuration
mybatis-plus:
  mapper-locations: classpath*:mapper/*.xml
  type-aliases-package: com.entity
  global-config:
    id-type: 1
    field-strategy: 2
    db-column-underline: true
    refresh-mapper: true
    logic-delete-value: -1
    logic-not-delete-value: 0
  configuration:
    map-underscore-to-camel-case: true
    cache-enabled: false
    call-setters-on-nulls: true
    jdbc-type-for-null: 'null'

Data Access Layer

MyBatis-Plus simplifies CRUD operations and provides pagination, logical deletion, and dynamic query wrappers. The following mapper XML excerpt shows a flexible query approach for an employee (or user) entity, using conditional segments to build dynamic SQL:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.dao.EmployeeDao">

    <resultMap type="com.entity.EmployeeEntity" id="employeeMap">
        <result property="employeeCode" column="employee_code"/>
        <result property="password" column="password"/>
        <result property="fullName" column="full_name"/>
        <result property="gender" column="gender"/>
        <result property="position" column="position"/>
        <result property="age" column="age"/>
        <result property="hireDate" column="hire_date"/>
        <result property="contactPhone" column="contact_phone"/>
        <result property="email" column="email"/>
        <result property="idNumber" column="id_number"/>
    </resultMap>

    <select id="selectListVO" resultType="com.entity.vo.EmployeeVO">
        SELECT * FROM employee
        <where> 1=1 ${ew.sqlSegment}</where>
    </select>

    <select id="selectView" resultType="com.entity.view.EmployeeView">
        SELECT * FROM employee
        <where> 1=1 ${ew.sqlSegment}</where>
    </select>
</mapper>

This approach separates raw SQL from business logic while maintaining transparency. The ${ew.sqlSegment} placeholder injects conditions built by MyBatis-Plus wrappers, enabling dynamic filteirng for listings and reports.