Java, Spring Boot, Vue 기반 스포츠 시설 예약 관리 시스템 구축

본 문서는 Java, Spring Boot, Vue.js 기술 스택을 활용하여 스포츠 시설 예약 및 관리를 위한 시스템을 구축하는 방법에 대해 설명합니다. 이 시스템은 사용자가 시설을 예약하고 관리자가 이를 효율적으로 운영할 수 있도록 지원하는 웹 애플리케이션입니다.

주요 기능

본 시스템은 사용자 및 관리자에게 다양한 기능을 제공하여 시설 관리의 편의성과 효율성을 높입니다.

시설 정보 관리: 스포츠 시설의 상세 정보(이름, 가격, 설명 등)를 등록, 수정, 조회할 수 있습니다.
시설 유형 분류: 농구장, 축구장 등 시설의 유형을 관리합니다.
예약 시스템: 사용자의 시설 예약 요청을 처리하고, 관리자는 전체 예약 현황을 조회 및 관리할 수 있습니다.
회원 관리: 시스템 사용자 계정의 생성, 수정, 삭제 및 권한 관리를 수행합니다.
운영 통계 및 분석: 시설 이용 데이터와 사용자 활동 데이터를 기반으로 통계 및 분석 정보를 제공하여 운영 효율성 증대에 기여합니다.
공지사항 및 메시지: 관리자가 전체 사용자에게 공지사항이나 메시지를 게시할 수 있습니다.
광고 콘텐츠 관리: 웹사이트 내 광고 영역에 표시될 콘텐츠를 관리합니다.
사용자 피드백: 사용자들의 문의사항이나 건의사항을 접수하고 관리합니다.
시스템 상태 모니터링: 시스템의 기본적인 운영 정보(서버, 메모리, CPU 등)를 확인할 수 있습니다.
사용자 인증: 신규 사용자 등록 및 로그인 기능을 통해 안전한 서비스 이용을 보장합니다.
시설 검색 및 탐색: 메인 페이지에서 다양한 기준으로 시설 목록을 검색하고 탐색할 수 있습니다.
개인화된 추천: 협업 필터링 알고리즘을 활용하여 사용자에게 맞춤형 시설을 추천합니다.
마이 페이지: 사용자의 개인 정보 수정, 예약 내역 확인, 관심 시설 관리 등을 할 수 있습니다.
시설 리뷰: 예약한 시설에 대한 사용자의 평가 및 리뷰 작성을 지원합니다.

개발 환경 및 기술 스택

본 시스템 구축에 사용된 주요 개발 환경 및 기술은 다음과 같습니다.

백엔드: Java 8 이상, Spring Boot 프레임워크, MyBatis
프론트엔드: JavaScript (ES6+), Vue.js, Vuex, Vue Router, Axios, Ant Design
데이터베이스: MySQL 5.7 이상
통합 개발 환경 (IDE): IntelliJ IDEA, Visual Studio Code
운영 체제: Windows 10/11

시스템 실행 절차

다음 단계에 따라 프로젝트를 로컬 환경에서 실행할 수 있습니다.

1. 사전 준비물

IntelliJ IDEA (2022 버전 이상 권장)
MySQL 서버 (5.7 버전 이상)
Node.js 및 npm (최신 안정 버전)

2. 백엔드 설정 및 실행

IntelliJ IDEA를 사용하여 프로젝트의 server 디렉토리를 엽니다.
프로젝트 JDK를 설정하고 Maven 의존성을 동기화합니다.

MySQL 데이터베이스를 생성합니다. 다음 SQL 스크립트를 사용합니다:

CREATE DATABASE IF NOT EXISTS sports_facility_db DEFAULT CHARSET utf8mb4 COLLATE utf8mb4_unicode_ci;

데이터베이스 백업 파일을 복원합니다. MySQL 클라이언트에서 다음 명령을 실행합니다:

USE sports_facility_db;
SOURCE /path/to/your/backup_file.sql; -- 백업 파일의 실제 경로로 대체하세요.

application.yml 파일에서 데이터베이스 접속 정보를 설정합니다:

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/sports_facility_db?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC&useSSL=false
    username: your_db_user # MySQL 사용자 이름으로 변경하세요.
    password: your_db_password # MySQL 비밀번호로 변경하세요.
    driver-class-name: com.mysql.cj.jdbc.Driver
    type: com.zaxxer.hikari.HikariDataSource

IntelliJ IDEA에서 메인 애플리케이션 클래스를 실행하여 백엔드 서비스를 시작합니다.

3. 프론트엔드 설정 및 실행

터미널을 열고 프로젝트의 web 디렉토리로 이동합니다.
필요한 Node.js 의존성을 설치합니다:
```
npm install
```
개발 서버를 시작합니다:
```
npm run dev
```
명령어 실행 후 콘솔에 표시되는 URL을 통해 웹 브라우저에서 프론트엔드 애플리케이션에 접속합니다.

자주 묻는 질문

Q: 권장하는 MySQL 데이터베이스 버전은 무엇인가요?
A: MySQL 5.7 이상 버전을 권장합니다.
Q: 프로젝트의 디렉토리 구조는 어떻게 되나요?
A: server 디렉토리는 백엔드 코드를 포함하며, web 디렉토리는 프론트엔드 코드를 포함합니다.
Q: 이 프로젝트를 이해하기 위해 어떤 기술 지식이 필요한가요?
A: Java 프로그래밍, Spring Boot 프레임워크, Vue.js 프론트엔드 개발에 대한 이해가 필요합니다.
Q: 관리자 계정의 기본 로그인 정보는 무엇인가요?
A: 초기 관리자 계정은 ID: admin, 비밀번호: password123입니다.
Q: 데모 계정으로 로그인 시 권한 부족 메시지가 표시됩니다. 어떻게 해야 하나요?
A: 해당 계정의 데이터베이스 내 role 필드 값을 '1'로 변경하여 관리자 권한을 부여할 수 있습니다.

태그: java SpringBoot Vue.js MySQL SportsFacility

9월 1일 17:23에 게시됨

괴물 클럽