Implementing Enterprise HR Management with SpringBoot, Vue, and Uniapp WeChat Mini Program

The enterprise human resource management system utilizes a modern technology stack combining SpringBoot for backend services, Vue.js for web frontend, and Uniapp for WeChat Mini Program development. This architecture provides a scalabel and maintainable solution for HR operations.

Backend: SpringBoot Framework

SpringBoot simplifies backend development with embedded servers (Tomcat/Jetty/Undertow) and auto-configuration capabilities. Key features include:

  • Automatic dependency management and configuration
  • Built-in support for Spring Security and data access
  • Production-ready metrics and health checks

Frontend: Vue.js Implementation

The web interface leverages Vue.js for its reactive data binding and component-based architecture:

  • Virtual DOM for efficient UI updates
  • Single-file components for maintainability
  • Vuex for state management

Mobile: Uniapp for WeChat Mini Program

Uniapp enables cross-platform development with native-like performance:

  • Write once, deploy to multiple platforms
  • Access to native device features
  • WeChat ecosystem integration

Authentication Implementation

The system implements JWT-based authentication with role-based access control. Here's the core login logic:

@RestController
@RequestMapping("/api/auth")
public class AuthController {

    @Autowired
    private UserService userService;
    
    @Autowired
    private JwtTokenService tokenService;

    @PostMapping("/login")
    public ResponseEntity<?> authenticateUser(
            @RequestParam String username,
            @RequestParam String password) {
        
        User user = userService.findByUsername(username);
        
        if(user == null || !passwordEncoder.matches(password, user.getPassword())) {
            return ResponseEntity.badRequest().body("Invalid credentials");
        }
        
        String token = tokenService.generateToken(user);
        return ResponseEntity.ok(new AuthResponse(token));
    }
}

Token Generation Logic

@Service
public class JwtTokenService {
    
    private static final int TOKEN_VALIDITY_HOURS = 24;
    
    public String generateToken(User user) {
        Map<String, Object> claims = new HashMap<>();
        claims.put("userId", user.getId());
        claims.put("role", user.getRole());
        
        return Jwts.builder()
                .setClaims(claims)
                .setSubject(user.getUsername())
                .setIssuedAt(new Date())
                .setExpiration(getExpirationDate())
                .signWith(SignatureAlgorithm.HS512, SECRET_KEY)
                .compact();
    }
    
    private Date getExpirationDate() {
        Calendar calendar = Calendar.getInstance();
        calendar.add(Calendar.HOUR, TOKEN_VALIDITY_HOURS);
        return calendar.getTime();
    }
}

Database Schema

The system uses a relational database with tables for users, roles, and authentication tokens:

CREATE TABLE users (
    id BIGINT PRIMARY KEY AUTO_INCREMENT,
    username VARCHAR(50) UNIQUE NOT NULL,
    password VARCHAR(100) NOT NULL,
    full_name VARCHAR(100),
    email VARCHAR(100),
    role VARCHAR(20) NOT NULL,
    department VARCHAR(50),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE auth_tokens (
    id BIGINT PRIMARY KEY AUTO_INCREMENT,
    user_id BIGINT NOT NULL,
    token VARCHAR(200) UNIQUE NOT NULL,
    issued_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    expires_at TIMESTAMP NOT NULL,
    FOREIGN KEY (user_id) REFERENCES users(id)
);

Testing Strategy

The system underwent comprehensive testing including:

Test Type Coverage Tools
Unit Testing Business logic JUnit, Mockito
Integration Testing API endpoints TestRestTemplate
UI Testing Frontend components Jest, Vue Test Utils

Tags: SpringBoot Vue.js UniApp WeChatMiniProgram JWT

Posted on Wed, 05 Aug 2026 16:04:29 +0000 by fahad