Issue I'm facing is somewhat regarding more to network understanding than it is to understanding the code, which is why I'm in need of assistance since I can't seem to find my answer anywhere. I only vaguely understand it, which is not good enough if I want to get good at this. My problem is that I don't understand how frontend and backend communicate in this coding example.

LINK to the GitHub repo ( NOT MINE, but I followed the guide which includes this code) https://github.com/bradtraversy/mern-tutorial

As you guys can see It's about the MERN stack therefore I did use axios on the front end and router in the back, in authService.js file I send the data with the post method, my question is how does my RegisterUser function in userController.js recognize I did this and then later saves the stuff to the MongoDB server(cluster,database) I made. I'm using desktop Mongo Compass (windows app) to check everything.

CodePudding user response：

It's hard to tell how knowledgeable you are with Express.js/Node.js, so I hope I'm not breaking things down too much. However I think I better explain too much than too little.

The code-structure you followed is a pretty neat one, but by no means necessary. It breaks every single layer of functionality of the backend code down to a folder category and single files. Instead of everything putting inside a single JavaScript file, the author puts the routes in the "routes" folder - and nothing else! Any logic is handled by the controllers in their respective "controllers" folder, and any express.js middleware is in their respective "middleware" folder. This may be completely unnecessary for smaller projects, but is a godsend for large projects where it's easy to loose oversight of where happens what.

Now, to get to your question how registerUser knows you sent a post method:

1. The POST request for registering a new user for example is actually handled (or "recognized") in userRoutes.js (important side note: the route for registering a user is currently the root url "/", which should probably be "/register")
2. It then calls the registerUser from userController.js file, which was included with require at the top
3. registerUser then handles any kind of logic and responds respectively

I hope this is somewhat understandable. TL;DR: registerUser doesn't recognize anything regarding requests, it is only called. The controller is only for "controlling" and the router only for "routing".

CodePudding user response：

In a broader way :

At backend -

You develop rest api, api endpoint and your software (logic). Now rest api is two way thing. First, it delivers data as JSON format to frontend and second, is to understand the json data which you send from the frontend and convert this data to the format which your backend understands(python, java), and this json data is available at api endpoint.

The data which you send from the axios is json format and you send this data at your api endpoint.

At Frotend -

you write get statement with axios to get data at some url, this url is the api endpoint created by backend. And you also send data for post and put at this api endpoint.

Things for you to google-

1. What is Rest Api, and all the alternatives.
2. What is JSON format.
3. What is api endpoint.
4. Network methods such as, Get, Put, Post, Patch, Delete.

Once you understands all these you can find you favourite/suitable backend language and create apis' for your datas and logic.

Means your front end is totally independent of the backend and vice versa.

Rest framework is not only one way, as I mentioned, find alternative techniques also.

Hope this helps, write here if you have more doubts.

CodePudding user response：

Axios is a promise-based HTTP client in Javascript. You should probably learn about HTTP here. In simple words, HTTP is a universally recognized internet protocol that allows your website in the browser to fetch certain resources from a server.

With MERN stack, you basically create a server using Express.js that provide APIs and MongoDB that stores all the data. Express APIs takes input from HTTP requests you send from React using axios, processes your API logic, and takes data from or store data to MongoDB. An POST route can be named as /register in your case. React gets the HTTP response and show the results on the browser.

In local development on your computer, your computer acts as a server at http://localhost:5000 (or any port you like). Your React website at localhost:3000 sends HTTP requests to the 5000 to get the responses. Once you host your MERN stack project on a real server using hosting services like Heroku or Netlify, your React website will send HTTP requests to that server with the URL you set.

By the way, Brad Traversy is a really good youtuber and I started learning about fullstack development from his courses as well :)