CODEWITHSUNDEEP
javascriptspring-bootspring-mvcmodel-view-controlleravatar
Miracle Ndu
Miracle Ndu

Reputation: 1

Saving and Displaying Avatar Data Across Pages with Spring Boot MVC and JavaScript

I'm working on a web application where users can customize avatars. I'm using Spring Boot MVC for the backend and JavaScript for the frontend. Currently, I have a form where users can customize their avatars, and I need to save this avatar data when the user clicks the 'Save Avatar' button.

Additionally, I want to display the saved avatar on another page, such as the user's profile page. However, I'm facing challenges with implementing this functionality. Specifically, I'm unsure how to handle the data transfer between the frontend and backend, as well as how to display the saved avatar on the profile page. Any guidance or examples on how to achieve this using Spring Boot MVC and JavaScript would be greatly appreciated. Thank you!

I attempted to implement a solution where users can save avatar data using Spring Boot MVC and JavaScript. I expected that upon clicking the 'Save Avatar' button, the avatar data would be successfully sent to the backend, saved in the database using Spring Data JPA repositories, and then displayed on the profile page.

This is a snippet from my AvatarController to provide more context. I'm not sure if I'm meant to have logic for this in my javascript part

AvatarController:

@PostMapping("/save-avatar")
public String saveAvatar(@Valid @ModelAttribute("avatar") Avatar avatar, BindingResult bindingResult, RedirectAttributes redirectAttributes) {
if (bindingResult.hasErrors()) {
// Handle validation errors if any
return "customize-avatar"; // Change to "customize-avatar" for consistency
}

        // Save the avatar
        Avatar savedAvatar = avatarService.saveAvatar(avatar);
    
        // Add a flash attribute to be available after the redirect
        redirectAttributes.addFlashAttribute("avatarSavedMessage", "Avatar saved successfully");
    
        // Redirect to the profile page
        return "redirect:/profile";
    }

Upvotes: 0

Views: 71

Answers (0)

Related Questions