Fading Coder

One Final Commit for the Last Sprint

Home > Tech > Content

Design and Implementation of a Subdistrict Office Management System Using Spring Boot and Vue.js

Tech May 13 4

The14subdistrict management platform adopts a role‑based architecture, splitting functionality between administrators and residents. The system is built around the Spring Boot framwork and follows the MVC pattern, with a MySQL database providing back‑end storage and Vue.js powering the front‑end user interface.

Technology Stack at a Glance

Programming Language: Java
Framework: Spring Boot
Frontend: JavaScript, Vue 2.x, CSS3
Development Tools: IntelliJ IDEA / VS Code
Database: MySQL 8.0
DB Management: Navicat / phpMyAdmin
JDK: 1.8
Build Tool: Maven 3.8.1

Administrator Module

After authenticating, the administrator is presented with a dashboard that aggregates14core operations. The menu includes user management, resident records, floating population data, tenancy tracking, move‑out requests, fee collection, repair complaints, complaint processing, service ratings, COVID‑19 sample collection, appointment scheduling, and system settings. For each entity, the administrator can search, add, modify, or remove records through data table interfaces.

Residetn Module

Residents register an account and log in to access personalized services. The homepage offers quick links to household information, move‑out applications, payment history, repair tickets, feedback on complaint resolution, ratings, sample‑collection appointments, and personal profile management. Each section displays a paginated list with filter options, enabling residents to submit requests and monitor their status.

epsfig Implementation Details

The back‑end exposes RESTful APIs that are consumed by the Vue.js front end. Security is handled by token‑based authentication. Below is a re‑structured version of the authentication controller, illustrating login, registrasion, and password management routines.

@RestController
@RequestMapping("/api/auth")
public class AuthController {

    private final ResidentService residentService;
    private final TokenProvider tokenProvider;

    public AuthController(ResidentService residentService, TokenProvider tokenProvider) {
        this.residentService = residentService;
        this.tokenProvider = tokenProvider;
    }

    @PostMapping("/login")
    public ResponseEntity<?> authenticate(@RequestBody Credentials credentials) {
        Resident resident = residentService.findByUsername(credentials.getUsername());
        if (resident == null || !resident.getPassword().equals(credentials.getPassword())) {
            return ResponseEntity.status(401).body(new ApiResponse(false, "Invalid credentials"));
        }
        String jwt = tokenProvider.createToken(resident);
        ResidentProfile profile = new ResidentProfile(resident.getId(), resident.getUsername(), resident.getRole());
        return ResponseEntity.ok(new AuthResponse(jwt, profile));
    }

    @PostMapping("/register")
    public ResponseEntity<?> register(@Valid @RequestBody RegistrationRequest request) {
        if (residentService.findByUsername(request.getUsername()) != null) {
            return ResponseEntity.badRequest().body(new ApiResponse(false, "Username already taken"));
        }
        Resident newResident = new Resident(
            request.getUsername(),
            request.getPassword(),
            request.getFullName(),
            request.getPhone(),
            request.getIdCard()
        );
        residentService.save(newResident);
        return ResponseEntity.ok(new ApiResponse(true, "Registration successful"));
    }

    @GetMapping("/logout")
    public ResponseEntity<?> logout(HttpSession session) {
        session.invalidate();
        return ResponseEntity.ok(new ApiResponse(true, "Logged out"));
    }

    @PutMapping("/password")
    public ResponseEntity<?> changePassword(
            @RequestBody PasswordChange change,
            @CurrentUser Resident currentUser) {
        if (change.getNewPassword() == null || change.getNewPassword().isBlank()) {
            return ResponseEntity.badRequest().body(new ApiResponse(false, "New password cannot be empty"));
        }
        if (!currentUser.getPassword().equals(change.getOldPassword())) {
            return ResponseEntity.badRequest().body(new ApiResponse(false, "Incorrect current password"));
        }
        if (change.getNewPassword().equals(change.getOldPassword())) {
            return ResponseEntity.badRequest().body(new ApiResponse(false, "New password must differ"));
        }
        currentUser.setPassword(change.getNewPassword());
        residentService.update(currentUser);
        return ResponseEntity.ok(new ApiResponse(true, "Password updated"));
    }

    @PostMapping("/reset-password")
    public ResponseEntity<?> resetPassword(@RequestBody ResetRequest resetRequest) {
        Resident resident = residentService.findByUsername(resetRequest.getUsername());
        if (resident == null) {
            return ResponseEntity.badRequest().body(new ApiResponse(false, "Account not found"));
        }
        resident.setPassword(DEFAULT_RESET_PASSWORD);
        residentService.update(resident);
        return ResponseEntity.ok(new ApiResponse(true, "Password reset to default"));
    }

    // Additional REST endpoints for user listing, detail, update, etc.
}

The system supports diverse municipal operations such as move‑in/move‑out tracking, utility billing,13and complaint resolution, while14the modular design ensures14future extensibility for14smart‑community features.

Related Articles

Understanding Strong and Weak References in Java

Strong References Strong reference are the most prevalent type of object referencing in Java. When an object has a strong reference pointing to it, the garbage collector will not reclaim its memory. F...

Comprehensive Guide to SSTI Explained with Payload Bypass Techniques

Introduction Server-Side Template Injection (SSTI) is a vulnerability in web applications where user input is improper handled within the template engine and executed on the server. This exploit can r...

Implement Image Upload Functionality for Django Integrated TinyMCE Editor

Django’s Admin panel is highly user-friendly, and pairing it with TinyMCE, an effective rich text editor, simplifies content management significantly. Combining the two is particular useful for bloggi...

Leave a Comment

Anonymous

◎Feel free to join the discussion and share your thoughts.