The system employs a layered architecture designed to menage outpatient appointments efficiently. It integrates a robust backend capable of handling concurrent requests with a responsive frontend interface, ensuring seamless interaction for both medical staff and patients.

Backend Framework: Spring Boot

Spring Boot serves as the core foundation for the server-side logic. It enables the creation of standalone, production-grade applications with minimal configuration. By adhering to convention-over-configuration principles, it reduces boilerplate code and simplifies the deployment process. The framework includes embedded servlet containers, allowing the application to run as an executable jar without external server dependencies. Automatic configuration features further streamline development by eliminating extensive XML setups.

Frontend Framework: Vue.js

The user interface is constructed using Vue.js, a progressive JavaScript framework. It facilitates the development of single-page applications through a component-based architecture. Vue.js offerss reactive data binding, ensuring that the UI updates automaticallly when underlying state changes. The virtual DOM implementation optimizes rendering performance. Additionally, the ecosystem supports routing and state management tools, enabling scalable and maintainable frontend code structures.

Database: MySQL

Data persistence is managed via MySQL, a reliable relational database management system. It supports standard SQL queries and provides high performance for read-heavy operations typical in registration systems. The system utilizes the InnoDB storage engine for transaction safety and data integrity. MySQL's compatibility across various operating systems ensures flexible deployment options.

Configuration Setup

The application configuration defines server properties, database connections, and ORM settings. The following YAML structure outlines the essential parameters for deployment:

server:
  port: 8081
  servlet:
    context-path: /hospital-api
  tomcat:
    uri-encoding: UTF-8

spring:
  datasource:
    driverClassName: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/hospital_db?useUnicode=true&characterEncoding=utf-8&serverTimezone=UTC
    username: admin
    password: secure_password_123
  servlet:
    multipart:
      max-file-size: 500MB
      max-request-size: 500MB
  resources:
    static-locations: classpath:static/,file:static/

mybatis-plus:
  mapper-locations: classpath*:mapper/*.xml
  typeAliasesPackage: com.hospital.model
  global-config:
    id-type: 1
    field-strategy: 1
    db-column-underline: true
    refresh-mapper: true
    logic-delete-value: -1
    logic-not-delete-value: 0
  configuration:
    map-underscore-to-camel-case: true
    cache-enabled: false
    jdbc-type-for-null: 'null'

Data Access Layer Implementation

The persistence layer utilizes MyBatis XML mappers to handle database interactions. The example below demonstrates the mapping for medical staff entities, including result maps and dynamic SQL queries for retrieval operations.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.hospital.mapper.StaffMapper">

    <resultMap type="com.hospital.model.StaffEntity" id="staffResultMap">
        <result property="staffCode" column="staff_code"/>
        <result property="password" column="access_password"/>
        <result property="staffName" column="full_name"/>
        <result property="gender" column="gender"/>
        <result property="position" column="job_title"/>
        <result property="age" column="age"/>
        <result property="hireDate" column="hire_date"/>
        <result property="contact" column="phone_number"/>
        <result property="email" column="email_address"/>
        <result property="idCard" column="id_number"/>
    </resultMap>

    <select id="selectListVO" resultType="com.hospital.vo.StaffVO">
        SELECT * FROM medical_staff
        <where>
            1=1 ${ew.sqlSegment}
        </where>
    </select>
    
    <select id="selectVO" resultType="com.hospital.vo.StaffVO">
        SELECT staff.* FROM medical_staff staff
        <where>
            1=1 ${ew.sqlSegment}
        </where>
    </select>

    <select id="selectListView" resultType="com.hospital.view.StaffView">
        SELECT staff.* FROM medical_staff staff
        <where>
            1=1 ${ew.sqlSegment}
        </where>
    </select>
    
    <select id="selectView" resultType="com.hospital.view.StaffView">
        SELECT * FROM medical_staff
        <where>
            1=1 ${ew.sqlSegment}
        </where>
    </select>

</mapper>