41 — REST & Frontend

Previous: 40 Spring Boot Intro

▶️ Lab: `projects/05-notes-web` · API: `pkg21spring`

Why this chapter?

Backend mastery still needs an end-to-end picture: a browser (or React app) calling your Java API with JSON.

1flowchart LR2  UI[HTML_or_React] -->|HTTP_JSON| API[Java_REST]3  API --> DB[(H2_or_Postgres)]

JSON contract

Agree on shapes, not frameworks:

1{ "id": 1, "title": "Ship lab", "body": "CORS + fetch" }

• Content-Type: application/json
• Use proper status codes (200, 201, 204, 400, 404)

CORS (browser security)

Browsers block http://localhost:5500 → http://localhost:8080 unless the API allows it.

Spring (already in the lab):

1@CrossOrigin(origins = "*") // tighten for production

Or a WebMvcConfigurer adding allowed origins.

Calling from plain JavaScript

1const res = await fetch('http://localhost:8080/api/notes')2const notes = await res.json()

Full UI: projects/05-notes-web/frontend

How React would call the same API

1useEffect(() => {2  fetch('http://localhost:8080/api/notes')3    .then((r) => r.json())4    .then(setNotes)5}, [])

Same endpoints — React is optional sugar over fetch.

Practice checklist

• Start pkg21spring (mvn spring-boot:run)
• Open the Project 05 HTML UI
• Create / list / delete notes
• Explain CORS in one sentence in an interview

Related → 15 Spring Boot Interview

Project → 05-notes-web

Back to index → 00-INDEX