온라인 꽃 판매 시스템 구축: Java Spring Boot, Vue.js 및 UniApp 활용

시스템 개요

이 문서에서는 Java Spring Boot와 Vue.js, 그리고 UniApp을 사용하여 온라인 꽃 판매 시스템을 설계하고 구현하는 방법에 대해 다룹니다. 주요 기술 스택과 함께 코드 예제를 통해 시스템의 핵심 구성 요소들을 살펴보겠습니다.

백엔드: Spring Boot

Spring Boot는 독립적으로 실행되며 프로덕션 레벨의 Spring 기반 애플리케이션을 신속하게 생성할 수 있도록 지원합니다. 이를 통해 복잡한 설정 없이도 애플리케이션을 쉽게 시작하고 실행할 수 있습니다.

핵심 기능

  • 내장 서버(Tomcat, Jetty 등) 자동 구성으로 배포 간소화
  • 약속보다 설정 원칙으로 불필요한 설정 파일 감소

프론트엔드: Vue.js

Vue.js는 가상 DOM을 활용해 효율적인 UI 업데이트를 제공하는 JavaScript 프레임워크입니다. 데이터 변경 시 자동으로 UI를 업데이트하므로 개발자는 데이터 처리에 더 집중할 수 있습니다.

주요 특징

  • 데이터 바인딩 및 반응형 아키텍처
  • 컴포넌트 기반 모듈화

퍼시스턴스 계층: MyBatis

MyBatis는 SQL 쿼리와 자바 코드를 분리하여 데이터베이스 작업을 간단히 만듭니다. XML 또는 어노테이션을 통해 SQL을 정의함으로써 유연성을 제공합니다.

장점

  • 다이나믹 SQL 지원으로 조건별 쿼리 작성 가능
  • 1차/2차 캐시를 통한 성능 최적화

코드 예제

로그인 인증 처리

// 권한 무시 어노테이션
@NoAuthRequired
@PostMapping("/auth/signin")
public ResponseEntity<Map<String, Object>> signIn(@RequestBody AuthRequest request) {
    // 사용자 정보 조회
    Optional<UserEntity> user = userService.findByUsername(request.getUsername());
    
    if (user.isEmpty() || !passwordEncoder.matches(request.getPassword(), user.get().getPassword())) {
        return ResponseEntity.badRequest().body(Collections.singletonMap("error", "잘못된 사용자 이름 또는 비밀번호"));
    }

    // 토큰 발급
    String token = jwtTokenProvider.createToken(user.get().getId(), user.get().getRole());
    Map<String, Object> response = new HashMap<>();
    response.put("token", token);
    return ResponseEntity.ok(response);
}

// JWT 토큰 생성 메서드
public String createToken(Long userId, String role) {
    Date now = new Date();
    Date expiryDate = new Date(now.getTime() + jwtExpirationMs);

    return Jwts.builder()
               .setSubject(userId.toString())
               .claim("role", role)
               .setIssuedAt(now)
               .setExpiration(expiryDate)
               .signWith(SignatureAlgorithm.HS512, jwtSecret)
               .compact();
}

데이터베이스 스키마

-- 주소 테이블
CREATE TABLE IF NOT EXISTS `address` (
  `id` BIGINT NOT NULL AUTO_INCREMENT,
  `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  `user_id` BIGINT NOT NULL,
  `location` VARCHAR(200) NOT NULL,
  `recipient_name` VARCHAR(200) NOT NULL,
  `phone_number` VARCHAR(200) NOT NULL,
  `is_default` TINYINT(1) DEFAULT 0,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

-- 게시판 테이블
CREATE TABLE IF NOT EXISTS `forum` (
  `id` BIGINT NOT NULL AUTO_INCREMENT,
  `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  `title` VARCHAR(200),
  `content` TEXT NOT NULL,
  `parent_id` BIGINT DEFAULT NULL,
  `user_id` BIGINT NOT NULL,
  `username` VARCHAR(200),
  `avatar_url` TEXT,
  `status` VARCHAR(200),
  `is_pinned` TINYINT(1) DEFAULT 0,
  `pinned_at` DATETIME DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

샘플 데이터 삽입

INSERT INTO `product` (`name`, `price`, `description`, `quantity`) 
VALUES ('레드 로즈', 15.99, '아름다운 빨간 장미', 200);

INSERT INTO `product` (`name`, `price`, `description`, `quantity`) 
VALUES ('화이트 리リー', 12.99, '깨끗한 하얀 백합', 150);

테스트 사례

입력 데이터 예상 결과 실제 결과 결과 분석
사용자명: admin, 비밀번호: 123456 로그인 성공 성공적으로 로그인됨 일치
사용자명: admin, 비밀번호: 111111 비밀번호 오류 비밀번호가 잘못되었습니다 일치

태그: SpringBoot Vue.js MyBatis

7월 5일 19:11에 게시됨