How do you implement REST in an MVC application?

#help

Heads up, I have no experience with any of the front-end stacks, I'm just aware of what's trending (React / Angular / Vue)

So far I have only worked with monolithic MVC applications, but not so long ago I learned how to do REST APIs using Spring Boot

What's the workflow to make use of external REST services in an MVC application?

Let's say I make a basic REST API to handle CRUD

Would the REST calls have to be made in the controller? therefore skipping the model, or do I call them through the view by using ajax? (skipping both the controller and the model)

I'm honestly confused, I just need some guidance

Please and thank you :)

Top comments (8)

José Luis Recio • Jan 31 '20 • Edited

Backend:

Models: It connect with database and we use in controllers. (Intermediary between database and controllers)
Controllers: It does our logic for each endpoint. (Intermediary between Models and Routes)
Routes: It has a call route method (example: GET /api/users) and the controller to execute when it is call (Intermediary between controllers and Frontend)

Frontend:

Simply call to your api endpoint with fetch, axios or your library selected)

Example flow with fetch and express in backend:

//Frontend
const getUsers = async () => {
  const response = await fetch('https://yourapi.com/api/users');
  const data = await response.json();
  return data; //Our users
}

//Backend
  //./routes/
  //If we recieve a call to /api/users we call to usersController
app.get('/api/users', usersController)

  // ./controllers
const usersControllers = () => {
  const users = modelUser.get();//Ey model give me users from database
  //Do logic with our users and return it
}

  // ./models
const modelUser = {
  get: () => databaseCall('SELECT * FROM users'); //Ey database give me users
}

In this way:
Do you change de database? Only modify the model
Do you change your logic? Only modify the controller
Do you change your routing? Only modify the route

hex-paradus • Jul 16 '22

This was a really good explanation! Thank you.

John Peters • Jan 24 '20

Angular uses http end points in Javascript or Typescript to access the back end. The response being seen in the observable subscription. The content is then bound to the template.

All frontend routing is handled in routetables which call the page. Similar to MVC but there's no controller as the route is all that's needed to bring up the page. Each page calls the backend to inflate the templates.

DrMandible • Jan 24 '20 • Edited

MVC is a modeling technique used in server (aka back end) software.

So, to be clear, MVC is not something you would implement in react. (edit: Technically you could, but that's not something that would involve a rest api. So not relevant here.)

Your react app would make https calls (often via axios or fetch api) to your server. That server interprets those requests using the MVC you've implemented.

For a more in depth explanation, you should research Node js and its indispensable library, Express. I've learned a lot about those from Academind on YouTube.

Evgeniy • Jan 28 '20 • Edited

"MVC is a modeling technique used in server (aka back end) software."

A popular point of view, but it's not entirely true, MVC was invented by Trygve as an architecture for desktop applications. (source - folk.uio.no/trygver/2007/MVC_Origi... )

What's now commonly called MVC actually is MVA

To be honest, trying to follow MVC(or MVA) is not something you really need to think about when designing an application.

@jouo
When designing programs, it is important what the components are responsible for, and what they do. Not the technical details of implementation, such as HTTP communication.

If we consider "model" as a domain model, there should not be any external dependencies, except Entity/Value objects that are part of it(like ProductProfile class can be part of Product).

If it's frontend for web application, just don't care about MVC.

Prince Billy Graham Karmoker • Jan 24 '20 • Edited

I will create a separate API folder in my root directory which will contains its own routes/ and controllers/ folder but the models/, services/ and lib/ folder will be in the root directory shared by both website and API. And then
Import apiRouter from './api/routes/index'
Import genralRouter from 'routes/index'
app.use('/api/', apiRouter)
app.use('/', generalRouter)