Backend Architecture

Spring Boot provides a robust framework for developing the backend services of the financial management system. It minimizes boilerplate configuration through its opinionated approach, allowing developers to set up standalone, production-ready applications with minimal effort. Key features include embedded servlet containers like Tomcat, which remove the need for external deployment, and comprehensive auto-configuration that simplifies dependency management. This architecture ensures rapid development cycles and seamless integration with various Java libraries.

Frontend Interface

Vue.js is utilized to construct a reactive and dynamic user interface. As a progressive JavaScript framework, it enables the creation of Single Page Applications (SPAs) with a component-based architecture. The framework's virtual DOM optimizes rendering performance, while its two-way data binding ensures that the UI stays synchronized with the underlying data model. Vue's ecosystem, including tools like Vue Router and Vuex, facilitates efficient state management and navigation within the financial dashboard.

Data Persistence

The system employs MySQL as the primary relational database management system. Renowned for its reliability and data integrity, MySQL handles the storage and retrieval of complex financial records. It supports standard SQL queries and transactional integrity (ACID compliance), which are critical for financial operations. The configuration utilizes InnoDB storage engines to ensure robust transaction support and foreign key constraints.

Configuration Implementation

The following configuration demonstrates the setup of the server context, datasource connection, and MyBatis Plus integration for persistence operations.

# Server Configuration
server:
  port: 8081
  servlet:
    context-path: /finance-api
  tomcat:
    uri-encoding: UTF-8

# Spring Datasource Setup
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/finance_db?useUnicode=true&characterEncoding=utf-8&serverTimezone=UTC
    username: admin
    password: securePass
  servlet:
    multipart:
      max-file-size: 50MB
      max-request-size: 50MB
  resources:
    static-locations: classpath:/static/

# MyBatis Plus Configuration
mybatis-plus:
  mapper-locations: classpath*:mapper/**/*.xml
  type-aliases-package: com.finance.entity
  configuration:
    map-underscore-to-camel-case: true
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  global-config:
    db-config:
      id-type: auto
      logic-delete-field: deleted
      logic-delete-value: 1
      logic-not-delete-value: 0

Data Access Layer

Below is an example of the MyBatis mapper XML used for querying employee data. The structure has been refactored to use standard naming conventions and result mapping.

<?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.finance.dao.EmployeeDao">

    <resultMap id="BaseResultMap" type="com.finance.entity.EmployeeEntity">
        <id column="id" property="id" jdbcType="BIGINT"/>
        <result column="emp_code" property="employeeCode"/>
        <result column="password_hash" property="passwordHash"/>
        <result column="full_name" property="fullName"/>
        <result column="gender" property="gender"/>
        <result column="position_title" property="positionTitle"/>
        <result column="age" property="age"/>
        <result column="entry_date" property="entryDate"/>
        <result column="phone_number" property="phoneNumber"/>
        <result column="email_address" property="emailAddress"/>
        <result column="id_card" property="idCard"/>
    </resultMap>

    <select id="selectEmployeePage" resultType="com.finance.vo.EmployeeVO">
        SELECT id, emp_code, full_name, position_title, entry_date
        FROM sys_employee
        <where>
            is_deleted = 0
            <if test="ew.sqlSegment != null and ew.sqlSegment != ''">
                AND ${ew.sqlSegment}
            </if>
        </where>
        ORDER BY entry_date DESC
    </select>

</mapper>