Spring JavaScript – połączenie Spring Boot i frontendu!

Spring Boot to jedno z najpopularniejszych narzędzi do tworzenia aplikacji backendowych w języku Java. Ale co, jeśli chcemy dodać do niego dynamiczny frontend oparty na JavaScript? W tym artykule omówimy, jak wykorzystać Spring JavaScript i połączyć go z nowoczesnymi frameworkami, takimi jak React, Vue czy Angular.

Co to jest Spring JavaScript?

Spring JavaScript to podejście do integracji JavaScriptu z aplikacjami opartymi na Spring Boot. Może to obejmować używanie JavaScriptu do dynamicznej obsługi widoków w Spring MVC, komunikację z API REST stworzonym w Spring Boot oraz integrację nowoczesnych frameworków frontendowych.

Dlaczego warto łączyć Spring Boot z JavaScript?

Łączenie Spring Boot z nowoczesnym JavaScriptem ma wiele zalet:

• Tworzenie dynamicznych i interaktywnych interfejsów użytkownika
• Obsługa aplikacji typu SPA (Single Page Application)
• Lepsza wydajność dzięki asynchronicznej komunikacji z backendem
• Możliwość korzystania z popularnych frameworków frontendowych

Spring JavaScript – przykłady podstawowej integracji

Przyjrzyjmy się kilku sposobom łączenia Spring Boot z JavaScript.

1. Serwowanie plików statycznych w Spring Boot

Spring Boot domyślnie obsługuje pliki statyczne (JavaScript, CSS, obrazy) umieszczone w katalogach src/main/resources/static lub src/main/resources/public.

src/main/resources/static/js/app.js

W pliku HTML możemy załadować ten skrypt:

Dzięki temu nasza aplikacja może korzystać z własnych skryptów JavaScript.

2. Wysyłanie żądań do API REST w Spring Boot

Spring Boot pozwala łatwo tworzyć API REST, które może być konsumowane przez JavaScript.

Najpierw utwórzmy kontroler Spring Boot:

@RestController
@RequestMapping("/api")
public class SampleController {
    
    @GetMapping("/message")
    public Map getMessage() {
        return Map.of("message", "Witaj ze Spring Boot!");
    }
}

Teraz możemy pobrać te dane w JavaScript:

fetch('/api/message')
    .then(response => response.json())
    .then(data => console.log(data.message));

To proste rozwiązanie pozwala frontendowi dynamicznie komunikować się z backendem.

3. Spring Boot + React

Spring Boot świetnie współpracuje z Reactem. Aby uruchomić aplikację React wewnątrz Spring Boot, można umieścić pliki build Reacta w katalogu static.

Aby automatycznie przekierowywać żądania do Reacta, możemy dodać kontroler:

@Controller
public class ViewController {

    @GetMapping("/{path:[^.]*}")
    public String forward() {
        return "forward:/index.html";
    }
}

Teraz Spring Boot będzie serwował aplikację React na wszystkich ścieżkach.

4. Spring Boot + Vue.js

Podobnie jak React, Vue.js może być używany z Spring Boot jako frontend. Możemy skonfigurować serwer proxy w vue.config.js, aby komunikować się z backendem:

module.exports = {
  devServer: {
    proxy: 'http://localhost:8080'
  }
}

Teraz możemy używać Vue do pobierania danych z API Spring Boot:

export default {
  data() {
    return { message: "" };
  },
  created() {
    fetch('/api/message')
      .then(response => response.json())
      .then(data => this.message = data.message);
  }
};

5. Spring Boot + Angular

Angular również może działać jako frontend dla Spring Boot. Możemy dodać proxy w proxy.conf.json:

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false
  }
}

Teraz Angular może wysyłać zapytania do API Spring Boot:

this.http.get('/api/message').subscribe(data => console.log(data));

Podsumowanie

Spring JavaScript to świetne podejście do tworzenia nowoczesnych aplikacji webowych. Integracja Spring Boot z JavaScript pozwala budować dynamiczne, skalowalne i szybkie systemy. Bez względu na to, czy używasz czystego JavaScriptu, Reacta, Vue czy Angulara, Spring Boot jest gotowy na współpracę!