Fading Coder

One Final Commit for the Last Sprint

Home > Tech > Content

Vaccine Appointment Web & Mini Program System: SSM + Vue.js Technical Implementation

Tech 1

Backend Framework: Spring Boot

Spring Boot builds on the Spring Framework, offering embedded servers (Tomcat, Jetty, Undertow) that eliminate manual installation and configuration. Its auto-configuration feature automatically sets up application components based on dependencies, streamlining development. It also integrates seamlessly with tools like Spring Data, Spring Security, and Spring Cloud, supporting flexible configuraton, rapid deployment, and robust community-backed monitoring and testing capabilities.

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@SpringBootApplication
@RestController
public class VaccineAppointmentBackendApplication {
    public static void main(String[] args) {
        SpringApplication.run(VaccineAppointmentBackendApplication.class, args);
    }

    @GetMapping("/api/health")
    public String healthCheck() {
        return "Vaccine Appointment Service is running successfully!";
    }
}

This code defines the entry point for a Spring Boot backend service. The @SpringBootApplication annotation marks it as a Spring Boot application, while @RestController enables REST endpoint handling. The /api/health endpoint returns a service status message, confirming the application is operational once started via SpringApplication.run().

Frontend Framework: Vue.js

Vue.js leverages virtual DOM for efficient UI updates, paired with reactive data binding and componentization to simplify building dynamic user interfaces. When data changes, Vue automatically refreshes the relevant UI elements, allowing developers to focus on data logic rather than manual DOM manipulation.

<html>
<head>
    <title>Vaccine Appointment Portal</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="vaccinePortal">
        <h3>Available Vaccine Slots: {{ availableSlots }}</h3>
        <button @click="refreshSlots">Refresh Slot Count</button>
    </div>

    <script>
        new Vue({
            el: '#vaccinePortal',
            data: {
                availableSlots: 0
            },
            mounted() {
                this.refreshSlots();
            },
            methods: {
                refreshSlots() {
                    // Simulate API call to fetch slot count
                    this.availableSlots = Math.floor(Math.random() * 50) + 10;
                }
            }
        });
    </script>
</body>
</html>

This example creates a Vue instance bound to the vaccinePortal DOM element. The availableSlots variable tracks open vaccine appointments, and the refreshSlots method simulates fetching updated data from an API. Vue's reactive system automatical updates the displayed slot count whenever the variable changes, triggered by the button click or initial mount.

Persistence Layer: MyBatis

MyBatis is an open-source persistence framework that decouples SQL from Java code via XML mappings or annotations, simplifying database operations. Key advantages include:

  1. Simplified Data Mapping: Maps Java objects to database tables, reducing boilerplate SQL code.
  2. Dynamic SQL: Generates conditional SQL statements to adapt to varying query requirements.
  3. Caching Support: Offers first-level (session) and second-level (application-wide) caching to minimize database roundtrips.
  4. Extensibility: Uses a plugin system to customize functionality like logging or performance monitoring.

System Testing

System Testing Purpose

System testing is a critical final phase in the development lifecycle, ensuring the system meets requirements and delivers a reliable user experience. It validates functionality against specifications, identifies discrepancies, and simulates real-world user scenarios to resolve issues before deployment. Testing focuses on user-centric scenarios to ensure alignment with practical needs, avoiding irrelevant edge cases.

System Functional Testing

Functional testing uses black-box techniques (input validation, boundary value testing, required field checks) to verify each module works as intended. Below are test cases for core functions:

Login Function Test Cases
Input Data Expected Result Actual Result Result Analysis
Username: admin, Password: vaccine@123, Captcha: VALID Successful login, redirect to admin dashboard Redirected to admin dashboard Match
Username: admin, Password: wrongPass, Captcha: VALID Error: "Incorrect username or password" Error displayed as expected Match
Username: admin, Password: vaccine@123, Captcha: INVALID Error: "Invalid captcha" Error displayed as expected Match
Username: (empty), Password: vaccine@123, Captcha: VALID Error: "Username is required" Error displayed as expected Match
Username: admin, Password: (empty), Captcha: VALID Error: "Password is required" Error displayed as expected Match
User Management Test Cases
Add User
Input Data Expected Result Actual Result Result Analysis
Username: user001, Password: user@123, Role: Patient User added successfully, appears in user list User001 visible in list Match
Username: user001, Password: user@456, Role: Patient Error: "Username already exists" Error displayed as expected Match
Username: (empty), Password: user@123, Role: Patient Error: "Username cannot be empty" Error displayed as expected Match
Edit User
Input Data Expected Result Actual Result Result Analysis
Select user001, update Password: newPass@789 Password updated successfully User001 can log in with new password Match
Select user001, clear Username field Error: "Username cannot be empty" Error displayed as expected Match
Delete User
Input Data Expected Result Actual Result Result Analysis
Select user001, confirm deletion User removed from list User001 no longer visible Match
Select user001, cancel deletion User remains in list User001 still visible Match

System Testing Conclusion

Using black-box testing, we validated all core functions against requirements. Test results confirm the system’s functionality aligns with design specifications, with all test cases producing expected outcomes. The system’s logic is straightforward, ensuring ease of use for end users, and all identified issues were resolved during testing.

Core Code Examples

Authentication Module

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import java.util.Optional;

@RestController
public class AuthController {
    private final AuthTokenService authTokenService;
    private final AppUserService appUserService;

    public AuthController(AuthTokenService authTokenService, AppUserService appUserService) {
        this.authTokenService = authTokenService;
        this.appUserService = appUserService;
    }

    @IgnoreAuth
    @PostMapping("/api/auth/login")
    public ApiResponse login(
            @RequestParam String username,
            @RequestParam String password,
            @RequestParam String captcha) {
        Optional<AppUser> optionalUser = appUserService.findByUsername(username);
        if (optionalUser.isEmpty() || !optionalUser.get().getPassword().equals(password)) {
            return ApiResponse.error("Invalid username or password");
        }
        AppUser user = optionalUser.get();
        String authToken = authTokenService.generateToken(user.getId(), user.getUsername(), user.getRole());
        return ApiResponse.success().put("token", authToken);
    }
}

// Token Generation Service
@Service
public class AuthTokenServiceImpl implements AuthTokenService {
    private final AuthTokenRepository authTokenRepository;
    private final RandomStringGenerator randomStringGenerator;

    @Override
    public String generateToken(Long userId, String username, String role) {
        Optional<AuthToken> existingToken = authTokenRepository.findByUserIdAndRole(userId, role);
        String token = randomStringGenerator.generate(32);
        LocalDateTime expiryTime = LocalDateTime.now().plusHours(1);
        
        AuthToken authToken = existingToken.orElse(new AuthToken());
        authToken.setUserId(userId);
        authToken.setUsername(username);
        authToken.setRole(role);
        authToken.setToken(token);
        authToken.setExpiryTime(expiryTime);
        authTokenRepository.save(authToken);
        
        return token;
    }
}

// Authorization Interceptor
@Component
public class AuthInterceptor implements HandlerInterceptor {
    public static final String AUTH_HEADER = "X-Auth-Token";
    private final AuthTokenService authTokenService;

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        // Configure CORS headers
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with, Origin, Content-Type, " + AUTH_HEADER);
        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));

        if (RequestMethod.OPTIONS.name().equals(request.getMethod())) {
            response.setStatus(HttpStatus.OK.value());
            return false;
        }

        // Check for IgnoreAuth annotation
        if (handler instanceof HandlerMethod) {
            IgnoreAuth ignoreAuth = ((HandlerMethod) handler).getMethodAnnotation(IgnoreAuth.class);
            if (ignoreAuth != null) {
                return true;
            }
        }

        String token = request.getHeader(AUTH_HEADER);
        if (token == null || token.isBlank()) {
            return unauthorizedResponse(response);
        }

        Optional<AuthToken> tokenEntity = authTokenService.validateToken(token);
        if (tokenEntity.isEmpty()) {
            return unauthorizedResponse(response);
        }

        // Set user info in request attributes
        request.setAttribute("userId", tokenEntity.get().getUserId());
        request.setAttribute("role", tokenEntity.get().getRole());
        return true;
    }

    private boolean unauthorizedResponse(HttpServletResponse response) throws IOException {
        response.setCharacterEncoding("UTF-8");
        response.setContentType("application/json; charset=utf-8");
        try (PrintWriter writer = response.getWriter()) {
            writer.print(JSONObject.toJSONString(ApiResponse.error(401, "Please log in first")));
        }
        return false;
    }
}

This code implements core authentication logic:

  • The login endpoint validates user credentials and generates an authentication token.
  • AuthTokenService creates or updates tokens with a 1-hour expiry.
  • AuthInterceptor checks for valid tokens in request headers, allowing acces only to authenticated users (unless marked with @IgnoreAuth).

Database Schema Example

Vaccine Inventory Table

DROP TABLE IF EXISTS `vaccine`;
CREATE TABLE `vaccine` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT 'Primary Key',
  `name` varchar(100) NOT NULL COMMENT 'Vaccine Name',
  `manufacturer` varchar(100) NOT NULL COMMENT 'Manufacturer',
  `available_doses` int(11) NOT NULL COMMENT 'Available Doses',
  `create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT 'Creation Time',
  `update_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 'Last Update Time',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 COMMENT='Vaccine Inventory Table';

-- Insert Sample Data
INSERT INTO `vaccine` (`name`, `manufacturer`, `available_doses`)
VALUES ('COVID-19 mRNA Vaccine', 'PharmaCo', 250);

INSERT INTO `vaccine` (`name`, `manufacturer`, `available_doses`)
VALUES ('Flu Vaccine 2024', 'VaccineLab', 180);

This table tracks vaccine inventory, storing key details like name, manufacturer, available doses, and timestamps for audit purposes.

Tags: Spring BootVue.js
Back to List

Prev: Mastering Python Functions: Definitions, Scopes, and Practical Applications

Next: Designing a Java Banking Application Core

Related Articles

Understanding Strong and Weak References in Java

Strong References Strong reference are the most prevalent type of object referencing in Java. When an object has a strong reference pointing to it, the garbage collector will not reclaim its memory. F...

Comprehensive Guide to SSTI Explained with Payload Bypass Techniques

Introduction Server-Side Template Injection (SSTI) is a vulnerability in web applications where user input is improper handled within the template engine and executed on the server. This exploit can r...

Implement Image Upload Functionality for Django Integrated TinyMCE Editor

Django’s Admin panel is highly user-friendly, and pairing it with TinyMCE, an effective rich text editor, simplifies content management significantly. Combining the two is particular useful for bloggi...

Leave a Comment

Anonymous

◎Feel free to join the discussion and share your thoughts.

Copyright © fadingcoder.top