Technology Stack Overview

The system is built using a modern full-stack architecture:

• Backend: Spring Boot with embedded Tomcat server, leveraging auto-configuration and starter dependencies for rapid development.
• Frontend (Web): Vue.js with reactive data binding and component-based architecture for dynamic user interfaces.
• Mobile Frontend: UniApp for cross-platform mobile deployment (iOS, Android, and mini-programs).
• Persistence Layer: MyBatis-Plus—an enhanced ORM framwork that reduces boilerplate SQL and supports code generation, pagination, and dynamic queries.
• Database: MySQL relational database.

Authentication and Token Management

User authentication is handled via token-based sessions. Upon successful login, a 32-character random token is generated and stored in the token table with an expiration time (default: 1 hour). The token is returned to the client and encluded in subsequent requests via the Token header.

@PostMapping("/login")
public ResponseEntity<Map<String, Object>> authenticate(
    @RequestParam String username,
    @RequestParam String password,
    @RequestParam String captcha,
    HttpServletRequest request) {

    User user = userService.getByUsername(username);
    if (user == null || !passwordEncoder.matches(password, user.getPasswordHash())) {
        return ResponseEntity.badRequest().body(Map.of("error", "Invalid credentials"));
    }

    String token = tokenService.createToken(user.getId(), user.getUsername(), user.getRole());
    return ResponseEntity.ok(Map.of("token", token));
}

An AuthorizationInterceptor validates the token on protected endpoints. If valid, user context (ID, role, etc.) is attached to the HTTP session. OPTIONS requests are handled for CORS preflight support.

Database Schema

The token storage uses the following table structure:

CREATE TABLE `token` (
  `id` BIGINT AUTO_INCREMENT PRIMARY KEY,
  `userid` BIGINT NOT NULL,
  `username` VARCHAR(100) NOT NULL,
  `tablename` VARCHAR(100),
  `role` VARCHAR(100),
  `token` VARCHAR(200) NOT NULL UNIQUE,
  `addtime` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  `expiratedtime` TIMESTAMP NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Each token record maps to a user session and includes metadata such as role and associated entity table (e.g., users, employees).

System Testing Strategy

Functional validation was performed using black-box testing with real-world usage scnearios:

Login Module Test Cases

User Management Tests

• Creating a user with duplicate username → rejection with "Username already exists".
• Updating user profile → changes reflected immediately in UI and database.
• Deleting a user → confirmation dialog followed by removal from list and DB.
• Leaving required fields blank → inline validation errors.

All test cases passed, confirming functional correctness and robust input validation.

Deployment and Structure

The backend exposes RESTful APIs consumed by both the Vue web dashboard and the UniApp mobile application. The separation of concerns ensures consistent business logic across platforms. Deployment involves:

1. Building the Spring Boot JAR with Maven.
2. Serving the Vue frontend via Nginx or embedding it in the JAR as static resources.
3. Packaging the UniApp project for target mobile platforms.
4. Configuring environment-specific properties (database URL, JWT secret, etc.).

The system is designed for maintainability, scalability, and ease of customization for SME financial workflows such as expense tracking, invoice management, and financial reporting.