Designing a Logistics Prepaid Deduction System: Architecture & Core Implementation

1. Project Overview

The system is a logistics‑industry prepaid deduction management solution that automates waybill uploads, deduction logic, and rigorous billing tracking, addressing pain points in waybill settlement and customer pre‑recharge management. It adopts a front‑back separation architecture emphasizing user experience and data accuracy.

2. Technology Stack Selection

2.1 Backend Stack

Core Framework: Spring Boot 3.x

Persistence: MyBatis Plus (provides powerful CRUD and pagination plugins)

Security: Spring Security + JWT (role‑based permission control)

Database: MySQL 8.0

Utilities: Lombok, Hutool

2.2 Frontend Stack

Framework: Vue 3 (Composition API)

Build Tool: Vite

UI Library: Element Plus

Styling: Tailwind CSS (Apple‑style minimal design)

State Management: Pinia

HTTP: Axios

3. Core Architecture Design

3.1 Money Precision Management (cents‑to‑yuan)

Financial precision is critical; amounts are stored as integer cents in the database, while Java entities use BigDecimal. Serialization employs custom MoneySerializer and MoneyDeserializer to automatically convert between cents and yuan during JSON conversion, ensuring the front end always displays yuan and the back end processes cents. Discount and balance calculations use BigDecimal.setScale to avoid floating‑point loss.

3.2 Role‑Based View Isolation

The system strictly separates administrator and regular user perspectives.

Admin Dashboard: Focuses on global monitoring, including today’s deductions, monthly cumulative recharge, and total system balance.

User Dashboard: Focuses on personal account information, personal balance, and quick recharge.

Implementation: The front end uses Vue computed properties to check roleId together with v‑if, achieving dynamic component and feature mounting at both component and functional levels.

3.3 Efficient Pagination and VO Pattern

To improve API maintainability and response speed, the system adopts a View Object (VO) pattern.

Data Decoupling: The backend calls Page.convert() to transform database entities into VOs.

Information Enrichment: During VO conversion, a memory map or aggregated query injects display fields such as user name, discounted amount, and operator name, reducing front‑end logic burden and API call frequency.

4. Core Functional Implementations

4.1 Automatic Deduction Engine

The deduction flow follows “balance verification → discount application → balance freeze → asynchronous persistence”.

Safety: Database transactions guarantee consistency between deduction and record generation.

Robustness: Front‑end pre‑check and back‑end strong validation ensure deductions cannot be triggered when balance is insufficient.

4.2 Responsive Apple‑Style UI

Tailwind CSS builds a highly consistent visual system.

Frosted‑glass effect: backdrop-blur-md Elegant container: Custom apple-card class standardizes style.

Animations: CSS transitions provide smooth interaction feedback.

5. Conclusion

The project secures financial operations through rigorous cent‑to‑yuan design, delivers an exceptional user experience with Vue 3 + Tailwind CSS, and maintains high efficiency and stability for large‑scale billing data via the VO pattern and MyBatis Plus pagination.