Hackforge Academy

Explanation

Front-end and backend are connected using APIs (Application Programming Interfaces). The front-end sends HTTP requests to the backend, and the backend processes the request and returns a response.

Code:

Explanation

The front-end usually communicates with the backend using HTTP methods such as GET, POST, PUT, and DELETE to retrieve, create, update, or delete data.

Code:

Explanation

Data is commonly exchanged between the front-end and backend in JSON format because it is lightweight and easy for both JavaScript and backend languages to process.

Code:

Explanation

Front-end applications use tools like fetch(), Axios, or AJAX to call backend APIs and display the returned data in the user interface.

Code:

Explanation

The backend exposes REST APIs or GraphQL APIs that the front-end can call through URLs, allowing both parts of the application to communicate over the internet.

Code:

Explanation

The front-end can connect to the backend using HTTP requests. In this example, JavaScript fetch() is used to call a backend API and retrieve data.

Code:

fetch('http://localhost:8080/api/users')
  .then(response => response.json())
  .then(data => console.log(data));

Explanation

Axios is a popular JavaScript library used in front-end applications to send HTTP requests to backend APIs and receive responses.

Code:

axios.get('http://localhost:8080/api/users')
  .then(response => 
console.log(response.data));

Explanation

The backend exposes API endpoints using frameworks like Spring Boot. The front-end calls these endpoints to retrieve or send data.

Code:

@RestController
public class UserController {
  @GetMapping("/api/users")
  public List<User> getUsers() {
    return List.of(new User(1, "John"));
  }
}

Explanation

Backend frameworks like Express.js create API routes that the front-end can call to access server data.

Code:

app.get('/api/users', (req, res) => {
  res.json([{ id: 1, name: 'John' }]);
});

Explanation

Front-end applications send data to the backend using HTTP requests (like POST) in JSON format, allowing the backend to process the data.

Code:

POST /api/login
{
  "username": "user",
  "password": "1234"
}