Technical Architecture Overview

This article presents a comprehensive driving school financial management system built with modern web tcehnologies. The system enables efficient tracking of revenue and expenditures while providing intuitive visualization capabilities for financial data analysis.

Backend Framework: Spring Boot

Spring Boot represents a paradigm shift in enterprise application development by embracing convention-over-configuration principles. This framework significantly reduces the boilerplate configuration typically associated with Spring-based applications, allowing developers to focus on implementing business logic rather than managing XML configurations.

The framework provides sensible default configurations that automatically configure the application based on included dependencies. When developers add specific dependencies to the project, Spring Boot's auto-configuration mechanism automatically sets up the required components without manual intervention. The build system utilizes either Maven or Gradle, which automatically resolves and downloads all necessary dependencies.

Project initialization becomes streamlined through Spring Initializr, a web-based tool that generates the foundational project structure. Developers can select required dependencies through a simple interface, and the tool creates a ready-to-use project skeleton with appropriate directory structures and configuration files.

Frontend Framework: Vue.js

Vue.js distinguishes itself through an approachable learning curve while maintaining capabilities suitable for complex enterprise applications. The framework's design philosophy emphasizes progressive enhancement, allowing developers to adopt its features incrementally based on project requirements.

The reactive data binding system constitutes one of Vue.js's most powerful features. Through directives such as v-model, developers establish bidirectional data synchronization between the view layer and underlying data models. When data mutations occur, the framework automatically triggers appropriate view updates, eliminating the necessity for manual DOM manipulation.

Vue.js providse an extensive lifecycle hook system that enables developers to execute custom logic at specific stages of a component's existence. These hooks cover the entire component lifecycle including initialization, mounting, updating, and destruction phases, offering granular control over component behavior and state management.

System Architecture Design

The system implements a layered architecture pattern separating concerns across presentation, business logic, and data access layers. This separation facilitates maintainability, testability, and scalability while promoting code reuse across different system components.

The presentation layer utilizes Vue.js components to render dynamic user interfaces. Components communicate with the backend through RESTful API endpoints, exchanging JSON-formatted data. The visualization dashboard employs chart libraries to present financial data in comprehensible graphical formats.

The business logic layer, built on Spring Boot, handles all application-specific operations including authentication, authorization, financial calculations, and data validation. Service components encapsulate reusable business logic, ensuring consistency across different controller implementations.

The data access layer utilizes JPA repositories for database interactions, providing a clean abstraction over raw SQL operations. Entity classes map directly to database tables, with ORM frameworks handling the translation between object-oriented and relational data models.

Database Schema Design

The database schema encompasses several key entities supporting the financial management workflow. The following table illustrates the transaction recording structure:

Column Name	Data Type	Length	Constraints
id	bigint	20	PRIMARY KEY, AUTO_INCREMENT
create_time	timestamp	-	DEFAULT CURRENT_TIMESTAMP
transaction_number	varchar	64	DEFAULT NULL
category_code	varchar	64	DEFAULT NULL
category_name	varchar	128	DEFAULT NULL
description	varchar	256	DEFAULT NULL
amount	decimal	10,2	DEFAULT NULL
transaction_date	date	-	DEFAULT NULL
operator_name	varchar	64	DEFAULT NULL
payment_method	varchar	32	DEFAULT NULL

The user management table stores authentication credentials and profile information:

Column Name	Data Type	Length	Constraints
id	bigint	20	PRIMARY KEY, AUTO_INCREMENT
username	varchar	200	NOT NULL, UNIQUE
password	varchar	200	NOT NULL
full_name	varchar	100	DEFAULT NULL
role	varchar	50	DEFAULT NULL
email	varchar	100	DEFAULT NULL
phone	varchar	20	DEFAULT NULL

Core Implementation Examples

The following code demonstrates the controller layer handling financial data operations:

/**
 * Financial Data Controller
 */
@RestController
@RequestMapping("/api/finance")
public class FinanceController {
    
    @Autowired
    private FinanceService financeService;
    
    @Autowired
    private CategoryService categoryService;
    
    /**
     * Retrieve financial records with pagination
     */
    @GetMapping("/transactions")
    public ResponseEntity<PageResult> getTransactions(
            @RequestParam(defaultValue = "1") Integer pageNum,
            @RequestParam(defaultValue = "10") Integer pageSize,
            @RequestParam(required = false) String startDate,
            @RequestParam(required = false) String endDate) {
        
        PageInfo<TransactionEntity> pageInfo = financeService.queryPage(
            pageNum, pageSize, startDate, endDate);
        
        return ResponseEntity.ok(PageResult.success(pageInfo));
    }
    
    /**
     * Add new financial record
     */
    @PostMapping("/transaction")
    public ResponseEntity<Result> addTransaction(@RequestBody TransactionDTO dto) {
        ValidationUtils.validate(dto);
        boolean result = financeService.saveTransaction(dto);
        
        if (result) {
            return ResponseEntity.ok(Result.success("Transaction recorded successfully"));
        }
        return ResponseEntity.badRequest().body(Result.error("Failed to record transaction"));
    }
    
    /**
     * Generate financial summary report
     */
    @GetMapping("/summary")
    public ResponseEntity<Result> getFinancialSummary(
            @RequestParam String startDate,
            @RequestParam String endDate) {
        
        SummaryDTO summary = financeService.calculateSummary(startDate, endDate);
        return ResponseEntity.ok(Result.success(summary));
    }
}

The service layer implements business logic for transaction management:

/**
 * Transaction Service Implementation
 */
@Service
public class TransactionServiceImpl implements TransactionService {
    
    @Autowired
    private TransactionMapper transactionMapper;
    
    @Autowired
    private AccountBalanceService balanceService;
    
    @Override
    @Transactional(rollbackFor = Exception.class)
    public boolean saveTransaction(TransactionDTO dto) {
        TransactionEntity entity = new TransactionEntity();
        BeanUtils.copyProperties(dto, entity);
        
        entity.setTransactionNumber(generateTransactionNumber());
        entity.setCreateTime(new Date());
        
        int rows = transactionMapper.insert(entity);
        
        if (rows > 0) {
            // Update account balance based on transaction type
            if ("INCOME".equals(dto.getType())) {
                balanceService.incrementBalance(dto.getAmount());
            } else {
                balanceService.decrementBalance(dto.getAmount());
            }
            return true;
        }
        return false;
    }
    
    @Override
    public SummaryDTO calculateSummary(String startDate, String endDate) {
        SummaryDTO summary = new SummaryDTO();
        
        BigDecimal totalIncome = transactionMapper.sumByTypeAndDateRange(
            "INCOME", startDate, endDate);
        BigDecimal totalExpense = transactionMapper.sumByTypeAndDateRange(
            "EXPENSE", startDate, endDate);
        
        summary.setTotalIncome(totalIncome != null ? totalIncome : BigDecimal.ZERO);
        summary.setTotalExpense(totalExpense != null ? totalExpense : BigDecimal.ZERO);
        summary.setNetBalance(summary.getTotalIncome().subtract(summary.getTotalExpense()));
        
        return summary;
    }
    
    private String generateTransactionNumber() {
        return "TXN" + System.currentTimeMillis() + 
               String.format("%04d", new Random().nextInt(10000));
    }
}

The Vue.js component for financial data visualization:

<template>
  <div class="finance-dashboard">
    <div class="chart-container">
      <canvas ref="revenueChart"></canvas>
    </div>
    <div class="summary-cards">
      <el-card v-for="item in summaryData" :key="item.label">
        <div class="card-content">
          <span class="label">{{ item.label }}</span>
          <span class="value" :class="item.type">
            {{ formatCurrency(item.value) }}
          </span>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import Chart from 'chart.js/auto';

export default {
  name: 'FinanceDashboard',
  data() {
    return {
      chartInstance: null,
      summaryData: [
        { label: 'Total Revenue', value: 0, type: 'income' },
        { label: 'Total Expenditure', value: 0, type: 'expense' },
        { label: 'Net Balance', value: 0, type: 'balance' }
      ]
    };
  },
  mounted() {
    this.initializeChart();
    this.loadFinancialData();
  },
  methods: {
    initializeChart() {
      const ctx = this.$refs.revenueChart.getContext('2d');
      this.chartInstance = new Chart(ctx, {
        type: 'line',
        data: {
          labels: [],
          datasets: [{
            label: 'Monthly Revenue',
            data: [],
            borderColor: '#409EFF',
            backgroundColor: 'rgba(64, 158, 255, 0.1)'
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false
        }
      });
    },
    async loadFinancialData() {
      const response = await this.$http.get('/api/finance/summary', {
        params: { startDate: this.getStartDate(), endDate: this.getEndDate() }
      });
      if (response.code === 200) {
        this.updateSummary(response.data);
      }
    },
    formatCurrency(value) {
      return `¥${Number(value).toFixed(2)}`;
    }
  }
};
</script>

System Testing Strategy

Comprehensive testing ensures system reliability and functionality. The testing approach encompasses multiple verification levels addressing different aspects of system behavior.

Unit testing focuses on individual components in isolation, verifying that each method performs its intended function correctly. Service layer classes undergo thorough testing with various input scenarios including boundary conditions and error cases.

Integration testing validates the interaction between different system components, ensuring that data flows correctly between the presentation, business logic, and data access layers. API endpoint testing verifies request and response handling across the client-server boundary.

The login functionality undergoes extensive validation testing:

Test Input	Expected Outcome	Actual Outcome	Status
Valid credentials with correct verification code	System access granted	User logged in successfully	PASS
Valid username with incorrect password	Authentication failure message	Password validation error displayed	PASS
Valid credentials with invalid verification code	Verification failure message	Code validation error displayed	PASS
Empty username field	Field required message	Username requirement prompt shown	PASS
Valid username with empty password	Authentication failure message	Password requirement prompt shown	PASS

User management functionality testing validates all CRUD operations:

Test Scenario	Expected Outcome	Actual Outcome	Status
Create new user with complete information	User added to system	User appears in user list	PASS
Update existing user profile	Information successfully modified	Updated data reflected in display	PASS
Delete user with confirmation	User removed from system	User no longer appears in queries	PASS
Create user without required username	Validation error displayed	Username requirement message shown	PASS
Create user with duplicate username	Duplicate entry prevented	Uniqueness constraint error displayed	PASS

Conclusion

This driving school financial management system demonstrates the effective integration of Spring Boot and Vue.js technologies to create a modern, responsive web application. The system provides comprehensive financial tracking capabilities with intuitive data visualization, enabling administrators to make informed decisions based on accurate financial data.