Building an Online Learning Platform with Vue and Spring Boot

  1. Overview

1.1 System Description

This online learning platform is built using Java, Vue, Spring Boot, and MySQL. The system encompasses modules for course categorization, course management, lesson management, lesson bookmarking, and lesson feedback. Additionally, it includes essential administrative features such as user management, department administration, role-based access control, menu configuration, audit logging, data dictionary, file storage, and data visualization.

The platform implements role-based access control (RBAC) and serves three primary user groups: students, instructors, and institutional administrators. Permission granularity can extend to individual interface controls, allowing organizations to design precise access policies tailored to their specific requirements.

  1. Functional Modules

2.1 Course Categories Module

The course categorization module enables administrators to manage course type records, including category name, status indicator, display sequence, descriptive notes, creation timestamp, creator information, last modification timestamp, and modifier details.

2.2 Course Management Module

The course administration module allows administrators to maintain course records, capturing course name, category classification, course summary, instructor details, cover images, notes, creator information, and creation timestamp.

2.3 Lesson Management Module

The lesson administration module enables administrators to manage individual lesson records, storing lesson title, lesson description, parent course association, key learning points, video content, notes, creator information, and creasion timestamp.

2.4 Interactive Features Module

The interactive features module handles lesson engagement data, comprising bookmark and comment functionalities. The bookmark feature tracks course name, lesson title, user who bookmarked, bookmark timestamp, creation details, and modification history. The comment feature records course name, lesson title, commenter information, comment timestamp, creation details, and the actual comment content.

2.5 Administrative Foundation Module

The administrative foundation encompasses user management, department structure, file storage, access control, and reference data management. These component are provided by the underlying development framework and require no additional custom logic implementation.

  1. System Architecture

3.1 Use Case Analysis

The system serves as an online learning environment for educational institutions and training organizations, supporting two primary user roles: instructors and learners. Instructors can manage course categories, course content, and individual lessons. Learners can stream course videos, bookmark favorite lessons, and submit feedback, facilitating interactive learning experiences.

3.2 Database Schema Design

  1. Interface Demonstrations

4.1 Administrator Dashboard

4.2 End-User Portal

  1. Implementation Examples

5.1 Creating a Course Category

@PostMapping("/create")
@ApiOperation("Create new course category")
public Result<CourseCategory> createCategory(CourseCategory category) {
    if (category.getDisplayOrder() == null || 
        BigDecimal.ZERO.equals(category.getDisplayOrder())) {
        long totalCount = courseCategoryService.count();
        category.setDisplayOrder(BigDecimal.valueOf(totalCount + 1));
    }
    courseCategoryService.saveOrUpdate(category);
    return new ResultUtil<>().setData(category);
}

5.2 User Authentication

@GetMapping("/authenticate")
@ApiOperation("Authenticate web portal users")
public Result<String> authenticateUser(
    @RequestParam String username, 
    @RequestParam String password) {
    
    LambdaQueryWrapper<User> query = new LambdaQueryWrapper<>();
    query.eq(User::getUsername, username);
    List<User> matchedUsers = userService.list(query);
    
    if (matchedUsers.isEmpty()) {
        return ResultUtil.error("User account not found");
    }
    
    User account = matchedUsers.get(0);
    if (!passwordEncoder.matches(password, account.getPassword())) {
        return ResultUtil.error("Invalid credentials");
    }
    
    String sessionToken = tokenService.generateToken(account.getUsername(), true);
    Authentication authToken = new UsernamePasswordAuthenticationToken(
        new UserPrincipal(account), null, null);
    SecurityContextHolder.getContext().setAuthentication(authToken);
    
    return new ResultUtil<>().setData(sessionToken);
}

5.3 Bookmarking a Lesson

@GetMapping("/bookmark")
@ApiOperation("Bookmark a lesson")
public Result<LessonBookmark> bookmarkLesson(@RequestParam String lessonId) {
    Lesson lesson = lessonService.retrieveById(lessonId);
    if (lesson == null) {
        return ResultUtil.error("Lesson not found");
    }
    
    User currentUser = authContext.getCurrentUser();
    LambdaQueryWrapper<LessonBookmark> filter = new LambdaQueryWrapper<>();
    filter.eq(LessonBookmark::getUserId, currentUser.getId());
    filter.eq(LessonBookmark::getLessonId, lesson.getId());
    
    if (bookmarkService.count(filter) > 0) {
        return ResultUtil.success("Already bookmarked");
    }
    
    LessonBookmark bookmark = new LessonBookmark();
    bookmark.setLessonId(lesson.getId());
    bookmark.setLessonTitle(lesson.getTitle());
    bookmark.setVideoUrl(lesson.getVideoUrl());
    bookmark.setUserId(currentUser.getId());
    bookmark.setUserDisplayName(currentUser.getDisplayName());
    bookmark.setCreatedAt(DateTime.now());
    
    bookmarkService.saveOrUpdate(bookmark);
    return ResultUtil.success();
}

5.4 Posting a Comment

@GetMapping("/comment")
@ApiOperation("Post a lesson comment")
public Result<LessonFeedback> postComment(
    @RequestParam String lessonId,
    @RequestParam String commentText) {
    
    Lesson targetLesson = lessonService.retrieveById(lessonId);
    if (targetLesson == null) {
        return ResultUtil.error("Lesson not found");
    }
    
    User activeUser = authContext.getCurrentUser();
    LessonFeedback feedback = new LessonFeedback();
    feedback.setLessonId(targetLesson.getId());
    feedback.setLessonTitle(targetLesson.getTitle());
    feedback.setUserId(activeUser.getId());
    feedback.setUserDisplayName(activeUser.getDisplayName());
    feedback.setCreatedAt(DateTime.now());
    feedback.setCommentBody(commentText);
    
    feedbackService.saveOrUpdate(feedback);
    return ResultUtil.success();
}

Tags: vue spring-boot java rest-api role-based-access-control

Posted on Fri, 25 Sep 2026 16:46:14 +0000 by maxime