Hệ thống Quản lý Rạp Chiếu Phim X với Spring Boot và Vue.js

Triển khai Hệ thống Quản lý Rạp Phim

Dự án xây dựng hệ thống quản lý rạp chiếu phim sử dụng công nghệ Spring Boot (Java 17) kết hợp Vue.js 3 và MySQL 8.0. Kiến trúc ứng dụng tuân thủ nguyên tắc phân tầng với MyBatis làm lớp truy vấn cơ sở dữ liệu và Element UI cho giao diện người dùng.

Môi trường phát triển

  • Java JDK 17 trở lên
  • MySQL 8.0 (hoặc 5.7)
  • Node.js 16+
  • IDE: IntelliJ IDEA hoặc Eclipse

Cấu hình hệ thống

Thực hiện các bước sau để chạy dự án:

  1. Tạo cơ sở dữ liệu từ file rapphim_x.sql trong MySQL
  2. Chỉnh sửa thông tin kết nối tại application.properties:
    spring.datasource.url=jdbc:mysql://localhost:3306/rapphim_x
    spring.datasource.username=root
    spring.datasource.password=your_password
  3. Chạy lệnh Maven: mvn clean install
  4. Khởi động ứng dụng và truy cập:
    • Giao diện quản trị: http://localhost:8080/admin (Tài khoản: admin / 123456)
    • Giao diện người dùng: http://localhost:8080 (Tài khoản: khachhang / 111111)

Ví dụ mã nguồn cải tiến

Thay thế phương thức xử lý phim cũ bằng cách sử dụng Spring Data JPA với DTO:

public class PhimDTO {
    private String maPhim;
    private String tenPhim;
    private String theLoai;
    private BigDecimal giaChieu;
    private BigDecimal giaUuDai;
    private String trangThai = "HOAT_DONG";
    
    // Constructor và getters/setters
}

@Repository
public interface PhimRepository extends JpaRepository<Phim, String> {
    @Query("SELECT new com.example.dto.PhimDTO(p.maPhim, p.tenPhim, p.theLoai, p.giaChieu, p.giaUuDai, p.trangThai) " +
           "FROM Phim p WHERE p.trangThai = 'HOAT_DONG' ORDER BY p.ngayChieu DESC")
    List<PhimDTO> layDanhSachPhimHienThi();
}

@RestController
@RequestMapping("/api/phim")
public class PhimController {
    @Autowired
    private PhimRepository phimRepo;

    @PostMapping("/them")
    public ResponseEntity<String> themPhimMoi(@RequestBody PhimRequest request) {
        Phim phim = new Phim();
        phim.setMaPhim(String.valueOf(System.currentTimeMillis()));
        phim.setTenPhim(request.getTen());
        phim.setTheLoai(request.getTheLoai());
        phim.setGiaChieu(request.getGiaGoc());
        phim.setGiaUuDai(request.getGiaUuDai());
        phimRepo.save(phim);
        return ResponseEntity.ok("Thêm phim thành công");
    }
}

Quản lý giỏ hàng

Cơ chế xử lý giỏ hàng được tối ưu với Session Storage:

public class GioHang {
    private final Map<String, ChiTietGioHang> danhSach = new HashMap<>();
    
    public void themSanPham(String maPhim, int soLuong, Phim phim) {
        ChiTietGioHang chiTiet = danhSach.getOrDefault(maPhim, 
            new ChiTietGioHang(maPhim, phim.getTenPhim(), phim.getGiaUuDai()));
        chiTiet.tangSoLuong(soLuong);
        danhSach.put(maPhim, chiTiet);
    }
    
    public void xoaSanPham(String maPhim) {
        danhSach.remove(maPhim);
    }
}

@Controller
@RequestMapping("/gio-hang")
public class GioHangController {
    @PostMapping("/them")
    public String themVaoGio(@RequestParam String maPhim, 
                            @RequestParam int soLuong,
                            HttpSession session) {
        GioHang gioHang = (GioHang) session.getAttribute("GIO_HANG");
        if (gioHang == null) {
            gioHang = new GioHang();
            session.setAttribute("GIO_HANG", gioHang);
        }
        gioHang.themSanPham(maPhim, soLuong, phimService.layThongTin(maPhim));
        return "redirect:/trang-chu";
    }
}

Lưu ý triển khai

  • Đường dẫn dự án không chứa ký tự đặc biệt hoặc tiếng Việt có dấu
  • Phiên bản Node.js cần tương thích với package.json
  • Thiết lập CORS trong Spring Boot nếu frontend chạy cổng khác

Thẻ: spring-boot vuejs mysql element-ui mybatis

Đăng vào ngày 18 tháng 7 lúc 18:11