System Architecture and Core Technologies

This system adopts a decoupled front-back architecture to provide a seamless visual teaching experience for programming courses. The technical stack combines the robustness of SpringBoot for the backend with the versatility of Vue and Uniapp for multi-terminal frontend support.

Backend: SpringBoot

SpringBoot serves as the core framework, utilizing its auto-configuration and embedded container capabilities (such as Tomcat) to streamline deployment. By leveraging the Spring ecosystem, the system integrates advanced security through Spring Security and efficient data handling via Spring Data. Its modular nature allows for easy expansion of teaching modules, such as automated code grading or real-time visual feedback.

Frontend: Vue & Uniapp

The management interface is built with Vue.js, exploiting its virtual DOM and component-based structure to ensure high performance and maintainability. For the student-facing mobile application, Uniapp is utilized to achieve cross-platform compatibility, allowing the system to run as a WeChat Mini-Program or a standalone mobile app from a single codebase.

Data Persistence: MyBatis-Plus

To interface with the MySQL database, MyBatis-Plus is employed. It enhances the standard MyBatis framework by providing pre-built CRUD operations and a powerful wrapper for dynamic queries, significantly reducing boilerplate code and improving developer productivity.

Security and Authentication Mechanism

The system implements a token-based authentication flow to secure API endpoints. Below is the refined implementation of the authentication logic and the security interceptor.

Authentication Controller

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

    @Autowired
    private AccountService accountService;
    @Autowired
    private AccessTokenService accessService;

    @PostMapping("/sign-in")
    public ResponseResult authenticateUser(@RequestBody LoginRequest loginReq) {
        AccountUser user = accountService.selectOne(
            new EntityWrapper<AccountUser>().eq("account_name", loginReq.getUsername())
        );

        if (user == null || !user.getCredential().equals(loginReq.getPassword())) {
            return ResponseResult.error("Authentication failed: Invalid credentials");
        }

        String accessKey = accessService.issueToken(user.getUid(), user.getAccountName(), user.getAccessLevel());
        return ResponseResult.success().put("accessKey", accessKey);
    }
}

Request Interceptor

@Component
public class SecurityGateInterceptor implements HandlerInterceptor {

    public static final String AUTH_HEADER_KEY = "Authorization-Token";

    @Autowired
    private AccessTokenService tokenService;

    @Override
    public boolean preHandle(HttpServletRequest req, HttpServletResponse resp, Object handler) throws Exception {
        // Handle CORS pre-flight requests
        if (RequestMethod.OPTIONS.name().equals(req.getMethod())) {
            resp.setStatus(HttpServletResponse.SC_OK);
            return true;
        }

        // Check for public access annotation
        if (!(handler instanceof HandlerMethod) || 
            ((HandlerMethod) handler).hasMethodAnnotation(PublicAccess.class)) {
            return true;
        }

        String token = req.getHeader(AUTH_HEADER_KEY);
        TokenMetadata metadata = (token != null) ? tokenService.verify(token) : null;

        if (metadata != null) {
            req.setAttribute("current_uid", metadata.getUserId());
            req.setAttribute("user_role", metadata.getRole());
            return true;
        }

        resp.setContentType("application/json;charset=UTF-8");
        resp.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
        resp.getWriter().write(JSON.toJSONString(ResponseResult.error(401, "Session expired, please re-login")));
        return false;
    }
}

Database Schema Design

The persistence layer relies on a structured schema. Below is the definition for the session management table.

CREATE TABLE `sys_auth_token` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `user_id` bigint(20) NOT NULL COMMENT 'Unique identifier for the user',
  `username` varchar(100) NOT NULL,
  `origin_table` varchar(100) DEFAULT NULL COMMENT 'Source entity table',
  `user_role` varchar(50) DEFAULT NULL,
  `token_str` varchar(255) NOT NULL COMMENT 'Secure random token string',
  `created_at` datetime DEFAULT CURRENT_TIMESTAMP,
  `expire_at` datetime NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='System Authentication Tokens';

Quality Assurance and Testing

To ensure the reliability of the teaching platform, comprehensive functional testing is performed, focusing on critical paths such as user onboarding, course content rendering, and data integrity.

Functional Validation Cases

Test Module	Enput Scenario	Expected Result	Actual Result	Status
User Login	Valid user/pass	Redirect to dashboard with tokan	Success	Pass
User Login	Empty password	Prompt 'Password is required'	Blocked	Pass
Acccount Mgmt	Add duplicate user	System warns of existing username	Warned	Pass
Account Mgmt	Modify user info	Persistent change in database/UI	Updated	Pass
Auth Filter	Access without token	Receive 401 Unauthorized status	Blocked	Pass

System testing demonstrates that the logic for handling visualization data and user permissions is robust. The modular design ensures that as the programming curriculum evolves, the platform can scale without degrading performance or security.