Developing the frontend for a permission management system often requires a standard layout: a left sidebar for navigation, top tabs for managing open windows, and a main content area. Implementing this from scratch using LayUI can be complex and time-consuming. To streamline the process, we can utilize the layTabPlus extension, which offers built-in tab management, refresh capabilities, and iframe optimization. This article outlines the integration of this layout into a Spring Boot project using Thymeleaf.

1. Project Setup and Dependencies

Start by creating a new Spring Boot project. You need to include the spring-boot-starter-web and spring-boot-starter-thymeleaf dependencies. If you are using Maven, ensure you're pom.xml includes these starters to enable web functionality and template rendering.

2. Integrating Static Resources

Download the LayUI framework and the layTabPlus plugin. Organize your project resources by placing the LayUI library files and the layTabPlus assets into the src/main/resources/static directory. The HTML file provided by the plugin should be moved to the templates directory (e.g., src/main/resources/templates/dashboard.html) so it can be resolved by the Thymeleaf view resolver.

3. Creating the View Controller

Create a controller class to handle the HTTP request for the admin homepage. This controller will return the name of the Thymeleaf template located in the templates folder.

package com.example.admin.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class DashboardController {

    @GetMapping("/admin/dashboard")
    public String showDashboard() {
        // Returns the template name (dashboard.html)
        return "dashboard";
    }
}

4. Component Scanning Configuration

If your controller classes are located in a package different from the main application class, you must explicitly configure component scanning. This ensures Spring Boot can detect and register your controler as a bean. Add the @ComponentScan annotation to your main application class.

package com.example;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.ComponentScan;

@SpringBootApplication
@ComponentScan(basePackages = "com.example")
public class PermissionSystemApplication {

    public static void main(String[] args) {
        SpringApplication.run(PermissionSystemApplication.class, args);
    }
}

5. Running the Application

Launch the Spring Boot application. Open your browser and navigate to the mapped endpoint, for instance, http://localhost:8080/admin/dashboard. You should now see the admin interface rendered with the left navigation menu and functional tab system provided by layTabPlus. This setup forms the base UI for future module development, such as user management and role assignment.