I'm currently building a web app, the backend is built with node/express, my database is mongodb while I'm using a templating engine for the front-end (why??) .

The issue am having now is that I want to manipulate the DOM right before data is store in the database.

So I did some research and I found out I need to store my data in a database without reload the page which can be accomplished with axios library.

I having been searching for 3 days now on how to incorporate axios into my code, to say am confuse will be an understatement of the century.
Like I don't even know if I should use it on my server or client side.

Somebody, anybody please help??

@qtguru
@tensazangets20
@airsaylongcome
@DrLevi
@karleb

benBender:
I'm currently building a web app, the backend is built with node/express, my database is mongodb while I'm using a templating engine for the front-end (why??) .

The issue am having now is that I want to manipulate the DOM right before data is store in the database.

So I did some research and I found out I need to store my data in a database without reload the page which can be accomplished with axios library.

I having been searching for 3 days now on how to incorporate axios into my code, to say am confuse will be an understatement of the century.
Like I don't even know if I should use it on my server or client side.

Somebody, anybody please help??

@qtguru
@tensazangets20
@airsaylongcome
@DrLevi
@karleb

On your nodejs application, i believe you have something called routes, these routes are known as APIs... How you set up these routes determines how axios can interact with them. So you have options like POST, GET, PUT, DELET etc. On the axios side, for example you have a GET route, all you do is axios.get(api).then().catch().... In this case, Axios should be used on your frontend

Save yourself the trouble and learn to use a client-side framework. If you want to make database update without reloading the page, you're basically doing what client frameworks are built for and is every indication that you need to switch to using one.

3 days you spent on that was enough to get Vue or Svelte running.

devdev:

On your nodejs application, i believe you have something called routes, these routes are known as APIs... How you set up these routes determines how axios can interact with them. So you have options like POST, GET, PUT, DELET etc. On the axios side, for example you have a GET route, all you do is axios.get(api).then().catch().... In this case, Axios should be used on your frontend

Thanks boss for taking time to answer me.
Since I'm to use it on the client side, I require/import it but I'm getting an error that it's not define.

What I'm I doing wrong.

DrLevi:
Save yourself the trouble and learn to use a client-side framework. If you want to make database update without reloading the page, you're basically doing what client frameworks are built for and is every indication that you need to switch to using one.

3 days you spent on that was enough to get Vue or Svelte running.

Thanks boss, I having been hearing good reviews about svelte I will soon check up on it .

benBender:


Thanks boss for taking time to answer me.
Since I'm to use it on the client side, I require/import it but I'm getting an error that it's not define.

What I'm I doing wrong.

Ok so for template engine on Nodejs, you dont need axios. You just need to install EJS so you can communicate HTML and EXPRESS using <% %>

Just a simple YouTube search will save you this stress.

ui8oi

Karleb:
Just a simple YouTube search will save you this stress.

Boss where, I don comb YouTube still I no see anything

benBender:


Thanks boss for taking time to answer me.
Since I'm to use it on the client side, I require/import it but I'm getting an error that it's not define.

What I'm I doing wrong.

Try window.axios = require('axios') in your main js file.

So you can use it anywhere without importing it.

But then, do you have it installed? You could use fetch without installation though.

Bros save yourself the stress and use the JavaScript fetch() for any request you want to make and probably to add spice to it use alpine.js for handling simple Dom manipulation without much stress

Axios is a way to communicate with ur server from the frontend and get response from the server in json format.
On the back end you can also use it to communicate with external Api's and get response from them.

You have different methods post, put, patch delete, and get. You normally have a route on ur backend which the axios request will go through to your backend to execute a code which you have written and get response from the code. The axios request from your front is already waiting for that response.

When it comes back in json format, you can use the information to display to your user. For instance you can send a get request to fetch user information through the get route. When the code in the backend fetches the information from the database it sends it back. Your axios response block in the frontend collects it back and you can then use that information how you want in the frontend.

You should explore frontend frameworks like Vue and react. Axios and other tools like it are an integral part of modern development.

peterincredible:
Bros save yourself the stress and use the JavaScript fetch() for any request you want to make and probably to add spice to it use alpine.js for handling simple Dom manipulation without much stress

Gbam use Fetch axios is just another layer on XHR/Fetch API