Fading Coder

One Final Commit for the Last Sprint

Home > Tech > Content

Design and Implementation of a Community Clinic Management System Using WeChat Mini Program with Spring Boot and Vue.js

Tech 3

System Overview

This project presents a comprehensive Community Clinic Management System designed to streamline operations for local healthcare providers. The system leverages modern web technologies to create a seamless user experience for both clinic staff and patients.

System Architecture

The system employs a three-tier architecture:

  • Frontend: WeChat Mini Program for patient interaction, Vue.js for administrative web interface
  • Backend: Spring Boot RESTful API services
  • Database: MySQL with MyBatis as the persistence layer

Technology Stack Details

Backend Framework: Spring Boot

Spring Boot provides a robust foundation for building enterprise-grade applications with minimal configuraton. Its key advantages include:

  • Embedded servers (Tomcat, Jetty, Undertow)
  • Powerful auto-configuration capabilities
  • Rich ecosystem of plugins and extensions
  • Flexible configuration management
  • Comprehensive testing support

Example Spring Boot Application:

package com.clinic.system;

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 ClinicApplication {

    public static void main(String[] args) {
        SpringApplication.run(ClinicApplication.class, args);
    }

    @GetMapping("/api/status")
    public String getSystemStatus() {
        return "Clinic Management System is operational";
    }
}

Frontend Framework: Vue.js

Vue.js offers a progressive framework for building user interfaces with:

  • Reactive data binding
  • Virtual DOM for efficient updates
  • Component-based architecture
  • Declarative rendering

Example Vue.js Component:

<template>
  <div id="app-container">
    <h2>{{ clinicName }}</h2>
    <button @click="updateClinicInfo">Update Information</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      clinicName: 'Community Health Center'
    };
  },
  methods: {
    updateClinicInfo() {
      this.clinicName = 'Updated Community Health Center';
    }
  }
};
</script>

Persistence Layer: MyBatis

MyBatis simplifies database operations through:

  • SQL-Object mapping
  • Dynamic SQL generation
  • Built-in caching mechanisms
  • Extensible plugin architecture

System Testing Methodology

Testing Objectives

The testing process aims to:

  1. Validate system functionality against requirements
  2. Identify and resolve potential defects
  3. Ensure system reliability and performance
  4. Optimize user experience

Functional Testing Examples

Login Function Test Cases:

Input Data Expected Result Actual Result Analysis
Username: admin, Password: secure123, Valid Captcha Successful login Login successful Pass
Username: admin, Password: wrongpass, Valid Captcha Password error Password incorrect Pass
Username: admin, Password: secure123, Invalid Captcha Captcha error Invalid captcha Pass
Username: empty, Password: secure123, Valid Captcha Username required Please enter username Pass

User Management Test Cases:

  1. Add User Functionality:

    • Valid user data → User added successfully
    • Duplicate username → Error: Username exists
    • Empty required fields → Appropriate validation messages
  2. Edit User Functionality:

    • Modify user details → Changes saved successfully
    • Invalid data input → Proper error handling
  3. Delete User Functionality:

    • Confirm deletion → User removed from system
    • Cancel deletion → Operation aborted

Testing Conclusion

Comprehensive black-box testing confirms that the system meets all functional requirements. All test scenarios produced expected results, validating the system's correctness and usability.

Core Implementation Examples

Authentication Service

package com.clinic.security;

import org.springframework.stereotype.Service;
import org.springframework.beans.factory.annotation.Autowired;
import java.util.Calendar;
import java.util.Date;

@Service
public class AuthenticationService {
    
    @Autowired
    private TokenRepository tokenRepository;
    
    public String createSessionToken(Long userId, String username, 
                                     String userRole, String entityType) {
        
        // Check for existing token
        SessionToken existingToken = tokenRepository
            .findByUserIdAndRole(userId, userRole);
        
        String newToken = SecurityUtil.generateRandomToken(32);
        Calendar expiration = Calendar.getInstance();
        expiration.add(Calendar.HOUR, 1);
        
        if (existingToken != null) {
            existingToken.setTokenValue(newToken);
            existingToken.setExpirationTime(expiration.getTime());
            tokenRepository.save(existingToken);
        } else {
            SessionToken newSession = new SessionToken(userId, username, 
                                                      entityType, userRole, 
                                                      newToken, expiration.getTime());
            tokenRepository.save(newSession);
        }
        
        return newToken;
    }
}

Authorization Interceptor

package com.clinic.security;

import org.springframework.web.servlet.HandlerInterceptor;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Component;

@Component
public class SecurityInterceptor implements HandlerInterceptor {
    
    private static final String AUTH_TOKEN_HEADER = "Authorization";
    
    @Autowired
    private TokenRepository tokenRepository;
    
    @Override
    public boolean preHandle(HttpServletRequest request, 
                             HttpServletResponse response, 
                             Object handler) throws Exception {
        
        // Configure CORS headers
        configureCorsHeaders(response, request);
        
        // Handle preflight requests
        if ("OPTIONS".equals(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
            return false;
        }
        
        // Check for public endpoints
        if (isPublicEndpoint(handler)) {
            return true;
        }
        
        // Validate authentication token
        String authToken = request.getHeader(AUTH_TOKEN_HEADER);
        SessionToken token = tokenRepository.findByTokenValue(authToken);
        
        if (token != null && !token.isExpired()) {
            // Store user context in request
            request.setAttribute("currentUserId", token.getUserId());
            request.setAttribute("userRole", token.getUserRole());
            return true;
        }
        
        // Return unauthorized response
        response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
        response.getWriter().write("{\"error\":\"Authentication required\"}");
        return false;
    }
    
    private void configureCorsHeaders(HttpServletResponse response, 
                                     HttpServletRequest request) {
        response.setHeader("Access-Control-Allow-Origin", 
                          request.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Methods", 
                          "GET, POST, PUT, DELETE, OPTIONS");
        response.setHeader("Access-Control-Allow-Headers", 
                          "Authorization, Content-Type");
        response.setHeader("Access-Control-Allow-Credentials", "true");
    }
}

Database Schema Example

Patient Information Table

-- Patient Information Table
CREATE TABLE IF NOT EXISTS `patient_records` (
    `patient_id` BIGINT NOT NULL AUTO_INCREMENT COMMENT 'Primary Key',
    `identification_number` VARCHAR(20) NOT NULL COMMENT 'ID Number',
    `full_name` VARCHAR(100) NOT NULL COMMENT 'Patient Name',
    `date_of_birth` DATE NOT NULL COMMENT 'Birth Date',
    `gender` ENUM('M', 'F', 'O') NOT NULL COMMENT 'Gender',
    `contact_phone` VARCHAR(15) COMMENT 'Phone Number',
    `email_address` VARCHAR(100) COMMENT 'Email',
    `home_address` VARCHAR(200) COMMENT 'Residential Address',
    `emergency_contact` VARCHAR(100) COMMENT 'Emergency Contact',
    `medical_history` TEXT COMMENT 'Medical History',
    `registration_date` TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT 'Registration Time',
    `last_updated` TIMESTAMP DEFAULT CURRENT_TIMESTAMP 
                     ON UPDATE CURRENT_TIMESTAMP COMMENT 'Last Update Time',
    PRIMARY KEY (`patient_id`),
    UNIQUE KEY `uk_identification` (`identification_number`),
    INDEX `idx_name` (`full_name`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 
  COMMENT='Patient Information Table';

-- Sample Data Insertion
INSERT INTO `patient_records` 
(`identification_number`, `full_name`, `date_of_birth`, `gender`, 
 `contact_phone`, `email_address`, `home_address`)
VALUES 
('ID12345678', 'Zhang Wei', '1985-03-15', 'M', 
 '13800138000', 'zhangwei@example.com', '123 Main Street, Beijing'),

('ID87654321', 'Li Na', '1990-07-22', 'F', 
 '13900139000', 'lina@example.com', '456 Oak Avenue, Shanghai');

System Features

Key Functionalities

  1. Patient Management: Registration, information updates, medical history tracking
  2. Appointment Scheduling: Online booking, rescheduling, and cancellation
  3. Medical Records: Digital health records with secure access
  4. Inventory Management: Medical supplies tracking and ordering
  5. Reporting & Analytics: Operational insights and performance metrics

Security Features

  • Role-based access control
  • JWT token authentication
  • Data encryption at rest and in transit
  • Audit logging for compliance

Implementation Considerations

Performence Optimization

  • Database indexing for frequent queries
  • Caching strategies for static data
  • Asynchronous procesing for non-critical operations
  • Load balancing for high availability

Scalability Design

  • Microservices-ready architecture
  • Horizontal scaling capabilities
  • Database sharding strategies
  • API rate limiting

Conclusion

This Community Clinic Management System demonstrates a practical implementation of modern web technologies to address real-world healthcare management challenges. The system provides a robust, scalable, and user-friendly solution that can be adapted to various clinic sizes and requirements.

The combination of WeChat Mini Program for patient accessibility, Vue.js for administrative efficiency, and Spring Boot for backend reliability creates a comprehensive ecosystem that enhances clinic operations while improving patient experience.

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.