Frontend Views & Static Routing
Relevant source files
The following files were used as context for generating this wiki page:
- src/main/java/com/example/demo/controllers/ViewController.java
- src/main/resources/templates/projects.html
- src/main/resources/templates/kanban.html
- src/main/resources/templates/task-detail.html
- src/main/resources/templates/login.html
- src/main/java/com/example/demo/config/SecurityConfig.java
- src/main/resources/static/js/api.js
Introduction
The "Frontend Views & Static Routing" system in this project is built using Spring Boot's Thymeleaf templating engine and static asset management. It provides a server-side rendered (SSR) interface for a corporate task management dashboard, integrated with Spring Security for access control. The frontend serves various views including project lists, kanban boards, and task details, while utilizing client-side JavaScript to interact with a RESTful API.
The system is designed to provide a seamless transition between static content and dynamic data interaction. While initial page loads are handled by Spring Controllers, subsequent actions such as status updates, comment posting, and file uploads are managed via asynchronous JavaScript calls to the /api prefix.
Sources: src/main/java/com/example/demo/controllers/ViewController.java, src/main/resources/static/js/api.js
View Architecture & Controllers
The application uses a standard Spring MVC @Controller to map web requests to Thymeleaf templates. This distinguishes the frontend routing from the backend REST API, which is handled by @RestController classes.
View Routing Logic
The ViewController is responsible for resolving the main application paths and populating the initial model with data required for server-side rendering, such as the current user's information and unread notification counts.
| Endpoint | Template | Description |
|---|---|---|
/login | login.html | Authentication entry point |
/register | register.html | New user registration |
/projects | projects.html | Dashboard showing all available projects |
/projects/{id}/board | kanban.html | Kanban board for a specific project |
/tasks/{id} | task-detail.html | Detailed view of a single task |
Sources: src/main/java/com/example/demo/controllers/ViewController.java:27-105
Security Configuration for Routing
The routing is split into two distinct security chains: one for the REST API and one for the web views. The web chain permits public access to /login, /register, and static resources under /css/** and /js/**, while requiring authentication for all other dashboard routes.
The diagram above shows the dual-chain security architecture defined in the project configuration.
Sources: src/main/java/com/example/demo/config/SecurityConfig.java:37-75
Core View Components
1. Project Dashboard (projects.html)
The main landing page after login displays a grid of projects. It uses Thymeleaf iteration (th:each) to render project-card elements. Each card displays the project name, description, assigned PM, and a summary of team members represented by initials.
Key Components:
- Navbar: Contains the brand logo, a notification bell with a dynamic badge (
unreadCount), and a logout form. - Sidebar: Provides navigation links to Projects, Team, and Analytics.
- Project Grid: A collection of cards linking to
/projects/{id}/board. - Create Project Modal: An overlay triggered by the "+ Новый проект" button (visible only to ADMIN/MANAGER roles).
Sources: src/main/resources/templates/projects.html:43-100, src/main/java/com/example/demo/controllers/ViewController.java:50-58
2. Kanban Board (kanban.html)
The Kanban view organizes tasks into four distinct columns based on their TaskStatus: NEW, IN_PROGRESS, REVIEW, and DONE. It leverages HTML5 Drag & Drop API for interactive task management.
This flowchart illustrates the interaction between the static Thymeleaf view and the client-side JavaScript logic for task transitions.
Sources: src/main/resources/templates/kanban.html:70-194, src/main/resources/static/js/kanban.js:13-33
3. Task Details (task-detail.html)
A complex view providing deep interaction with a single task. It includes sections for subtasks, file attachments, and a comment system with @mention support.
- Subtask Management: Displays a progress bar and list of subtasks. Users can toggle completion status via
API.updateSubtask. - File Upload Area: A drag-and-drop zone that interacts with the
/api/attachments/uploadendpoint. - Dynamic Comments: Comments are rendered via JavaScript after initial page load by calling
loadComments().
Sources: src/main/resources/templates/task-detail.html:60-120, src/main/resources/static/js/task-detail.js:38-112
Static Asset Management
The frontend relies on a structured set of static assets located in src/main/resources/static.
CSS Hierarchy
- main.css: Defines the global design system, including a dark theme palette (e.g.,
--bg: #0f1117,--accent: #5b6ef5), button styles, and common utility classes for badges and layouts. - kanban.css: Specific styles for column layouts and task card transitions.
- task-detail.css: Manages the grid layout (1fr 320px) for the detail view and sidebar.
Sources: src/main/resources/static/css/main.css:1-25, src/main/resources/static/css/task-detail.css:3-8
JavaScript API Module (api.js)
The application uses a centralized API constant (IIFE) to handle all backend communication. This module manages JWT authentication headers and provides standardized methods for CRUD operations.
| Method | HTTP Verb | Path |
|---|---|---|
updateStatus(id, status) | PATCH | /api/tasks/{id}/status |
uploadFile(file, type, id) | POST | /api/attachments/upload |
getSubtasks(taskId) | GET | /api/tasks/{taskId}/subtasks |
addComment(taskId, content) | POST | /api/tasks/{taskId}/comments |
Sources: src/main/resources/static/js/api.js:39-75
Summary
The frontend and routing architecture effectively combines the reliability of server-side templates with the interactivity of a modern SPA. By separating the security chains and centralizing API interactions in a dedicated JavaScript module, the system ensures that views are consistently rendered while remaining highly responsive to user actions like drag-and-drop and real-time task updates.