Bathhouse Reservation System Design and Implementation Based on SpringBoot+Vue+uniapp

System Overview

This article details the design and implementation of a bathhouse reservation WeChat mini-program using SpringBoot backend, Vue frontend, and uniapp framework. The system provides online reservation services for bathhouse facilities, enabling users to book shower slots conveniently.

Technical Architecture

Backend Framework - SpringBoot

SpringBoot is an open-source framework designed for rapid development of Spring-based applications. It follows the convention-over-configuration principle, providing default configurations that allow developers to focus on business logic rather than configuration files. SpringBoot significantly simplifies application setup through auto-configuration and sensible defaults, eliminating the need for manual XML configuration or complex annotations.

The framework uses Maven or Gradle for build management, automatically downloading dependencies and providing plugins to streamline the build process. Developers can generate a basic project structure using Spring Initializr and select required dependencies based on project needs.

Frontend Framework - Vue.js

Vue.js is designed to be simple and easy to understand. It provides an intuitive API that enables developers to build interactive user interfaces with ease. Vue offers a simple yet powerful data binding mechanism through directives like v-model, enabling two-way binding between view and data. When data changes, the view updates automatically, and vice versa, eliminating the need for manual DOM manipulation.

Vue.js provides lifecycle hook functions that allow developers to execute custom logic at different stages of a component, including cretaion, mounting, updating, and destruction phases, offering greater flexibility.

Mobile Framework - uniapp

uniapp is a cross-platform framework that allows developers to write code once and deploy to multiple platforms including WeChat mini-programs, iOS, Android, and web applications.

System Modules

User Management Module

The system implements user registration, login, and profile management functionality. Users can register with their phone number and manage their personal information including name, gender, and avatar.

Reservation Module

Core functionality allows users to view available time slots, make reservations, and manage their booking history. The system tracks reservation status and provides real-time availability updates.

Admin Management Module

Administrators can manage facility information, view all reservations, and handle user accounts through a dedicated admin interface.

Database Design

User Table

CREATE TABLE `user` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT 'Primary Key',
  `addtime` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT 'Created Time',
  `username` varchar(200) NOT NULL COMMENT 'Username',
  `password` varchar(200) NOT NULL COMMENT 'Password',
  `real_name` varchar(200) DEFAULT NULL COMMENT 'Real Name',
  `gender` varchar(200) DEFAULT NULL COMMENT 'Gender',
  `avatar` varchar(200) DEFAULT NULL COMMENT 'Avatar',
  `phone` varchar(200) DEFAULT NULL COMMENT 'Phone Number',
  `id_card` varchar(200) DEFAULT NULL COMMENT 'ID Card',
  PRIMARY KEY (`id`),
  UNIQUE KEY `username` (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb3 COMMENT='User Table';

Reservation Table

CREATE TABLE `reservation` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT 'Primary Key',
  `addtime` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT 'Created Time',
  `reservation_number` varchar(64) DEFAULT NULL COMMENT 'Reservation Number',
  `facility_number` varchar(64) DEFAULT NULL COMMENT 'Facility Number',
  `facility_name` varchar(12) DEFAULT NULL COMMENT 'Facility Name',
  `reservation_date` varchar(64) DEFAULT NULL COMMENT 'Reservation Date',
  `reservation_time` varchar(64) DEFAULT NULL COMMENT 'Reservation Time',
  `user_id` bigint DEFAULT NULL COMMENT 'User ID',
  `username` varchar(64) DEFAULT NULL COMMENT 'Username',
  `phone` varchar(64) DEFAULT NULL COMMENT 'Phone',
  `status` varchar(64) DEFAULT NULL COMMENT 'Status',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb3 COMMENT='Reservation Table';

Token Table

CREATE TABLE `token` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT 'Primary Key',
  `userid` bigint NOT NULL COMMENT 'User ID',
  `username` varchar(100) NOT NULL COMMENT 'Username',
  `tablename` varchar(100) DEFAULT NULL COMMENT 'Table Name',
  `role` varchar(100) DEFAULT NULL COMMENT 'Role',
  `token` varchar(200) NOT NULL COMMENT 'Token',
  `addtime` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT 'Created Time',
  `expiratedtime` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT 'Expiration Time',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb3 COMMENT='Token Table';

Message Table

CREATE TABLE `messages` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT 'Primary Key',
  `addtime` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT 'Created Time',
  `userid` bigint NOT NULL COMMENT 'User ID',
  `username` varchar(200) DEFAULT NULL COMMENT 'Username',
  `content` longtext NOT NULL COMMENT 'Message Content',
  `reply` longtext COMMENT 'Reply Content',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb3 COMMENT='Message Board';

API Implementation

Common Controller

@RestController
@RequestMapping("/common")
public class CommonController {
    
    @Autowired
    private CommonService commonService;
    
    @Autowired
    private ConfigService configService;
    
    private static AipFace faceClient = null;
    
    private static String BAIDU_MAP_AK = null;
    
    /**
     * Get location information based on coordinates
     */
    @RequestMapping("/location")
    public R getLocation(String lng, String lat) {
        if (BAIDU_MAP_AK == null) {
            BAIDU_MAP_AK = configService.selectOne(
                new EntityWrapper<ConfigEntity>().eq("name", "baidu_map_ak")
            ).getValue();
            if (BAIDU_MAP_AK == null) {
                return R.error("Please configure baidu_map_ak in system settings");
            }
        }
        Map<String, String> result = BaiduUtil.getCityByLonLat(BAIDU_MAP_AK, lng, lat);
        return R.ok().put("data", result);
    }
    
    /**
     * Face comparison API
     */
    @RequestMapping("/matchFace")
    public R compareFaces(String face1, String face2) {
        if (faceClient == null) {
            String apiKey = configService.selectOne(
                new EntityWrapper<ConfigEntity>().eq("name", "api_key")
            ).getValue();
            String secretKey = configService.selectOne(
                new EntityWrapper<ConfigEntity>().eq("name", "secret_key")
            ).getValue();
            String token = BaiduUtil.getAuth(apiKey, secretKey);
            if (token == null) {
                return R.error("Please configure API credentials in system settings");
            }
            faceClient = new AipFace(null, apiKey, secretKey);
            faceClient.setConnectionTimeoutInMillis(2000);
            faceClient.setSocketTimeoutInMillis(60000);
        }
        
        JSONObject result = null;
        try {
            File imageFile1 = new File(
                ResourceUtils.getFile("classpath:static/upload").getAbsolutePath() + "/" + face1
            );
            File imageFile2 = new File(
                ResourceUtils.getFile("classpath:static/upload").getAbsolutePath() + "/" + face2
            );
            
            String imageData1 = Base64Util.encode(FileUtil.FileToByte(imageFile1));
            String imageData2 = Base64Util.encode(FileUtil.FileToByte(imageFile2));
            
            MatchRequest request1 = new MatchRequest(imageData1, "BASE64");
            MatchRequest request2 = new MatchRequest(imageData2, "BASE64");
            
            ArrayList<MatchRequest> matchRequests = new ArrayList<>();
            matchRequests.add(request1);
            matchRequests.add(request2);
            
            result = faceClient.match(matchRequests);
            System.out.println(result.get("result"));
            
        } catch (FileNotFoundException e) {
            e.printStackTrace();
            return R.error("File not found");
        } catch (IOException e) {
            e.printStackTrace();
        }
        
        return R.ok().put("data", 
            com.alibaba.fastjson.JSONObject.parse(result.get("result").toString())
        );
    }
}

Feasibility Analysis

Before development, a comprehensive feasibility analysis was conducted to ensure project success:

Technical Feasibility: The system utilizes Java technology with SpringBoot framework, which is mature and well-established. Vue.js provides robust frontend capabilities, and uniapp enables efficient cross-platform development for WeChat mini-programs.

Economic Feasibility: The development cost is reasonable compared to the operational savings achieved through automated booking management and reduced manual labor.

Operational Feasibility: The system is designed with user-friendly interfaces, making it easy for both administrators and end-users to operate effectively.

System Testing

Testing Objectives

System testing is a critical phase in the development lifecycle. It serves as the final quality checkpoint to ensure the system meets requirements and provides a reliable user experience. Testing identifies defects and ensures the system functions as specified.

Functional Testing

Comprehensive black-box testing was conducted by testing various input scenarios including boundary values and required field validations.

Login Function Test Cases:

Input Data	Expected Result	Actual Result	Analysis
Username: admin Password: 123456 Verification: Correct	Login Success	Successfully logged in	Matches expectation
Username: admin Password: 111111 Verification: Correct	Password Error	Password incorrect, please re-enter	Matches expectation
Username: admin Password: 123456 Verification: Incorrect	Verification Error	Verification code error	Matches expectation
Username: Empty Password: 123456 Verification: Correct	Username Required	Please enter username	Matches expectation

User Management Test Cases:

Input Data	Expected Result	Actual Result	Analysis
Enter user basic information	Add success, display in user list	User appears in list	Matches expectation
Modify user information	Edit success, information updated	User information updated	Matches expectation
Select and delete user	Confirm deletion, user removed	User removed after confirmation	Matches expectation
Add user without username	Prompt username required	Username cannot be empty	Matches expectation

System Features

Real-time Availability: Users can view current availability of shower facilities
Online Booking: Complete reservation process through the WeChat mini-program
Booking Management: View, modify, and cancel reservations
User Authentication: Secure login with token-based authentication
Admin Dashboard: Comprehensive management interface for administrators
Message System: Communication channel between users and administrators

Conclusion

This bathhouse reservation system provides a complete solution for managing shower facility bookings. The combination of SpringBoot, Vue, and uniapp technologies enables efficient development and reliable performance. The system streamlines the reservation process and improves operational efficiency for bathhouse management.

Tags: SpringBoot Vue.js UniApp wechat-miniprogram reservation-system

Posted on Thu, 29 Oct 2026 16:33:20 +0000 by zero_ZX

Freaks City