Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Back end Vs Front end - Vídeo 26 - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 2 de agosto de 2024 por Mario S.

57 visualizaciones

Configurando Axios y corrigiendo error CORS (compartición de recursos de origines diferentes).

Más información Transcripción

Descargar la transcripción

well in this video we are going to 00:00:01
save the data in our mongodb database ok the other day in the last video we 00:00:06
stayed to make this form that I have put a bar I have put another background ok I have given it 00:00:13
a certain appearance which is what I told you in the last video because you will try to do 00:00:22
you ok I have put a source a little bit everything we have seen well then to see what 00:00:30
we are going to do in this video which is this that I am going to show you now on the one hand we are going to see the 00:00:38
development tools this was ok and then here I am going to put a name I am going to put an email 00:00:45
and a password, remember that in the password I am putting 1 2 3 4 5 6 7 8 9 because we told it 00:00:58
that it had a number of characters, it is worth remembering that if it will not give us an error, it is worth when 00:01:11
we give it to register, we see that on the one hand it has returned the value that we printed, 00:01:19
not the object that we printed because in the console in yesterday's video all the data and 00:01:29
on the other hand what it is giving me is the answer from the server and from there it is telling me you see 00:01:36
that it already has an assigned idea that it has good because everything that we had configured in 00:01:46
in the backend, then status 200, ok, the prototype, in headers, application, ok, I wanted to see if it was giving me from here the token that is also created and that we have also sent it, 00:01:59
but from here I can't see it, well, it has the ID, that's what it is, I've already registered to see it, I come to mongo 00:02:29
express, it is worth remembering that from this web we could see our database with all the 00:02:45
collections is worth and then here when I update I already have Carolina and all the information 00:02:58
that we saved from the backend is worth so everything works for us well then we are going to see how it 00:03:06
works how we do this is worth first tell you to make the connection to send the 00:03:13
data and make that connection, that post, to the backend, from the front, we are going to use Axios, okay? Axios, 00:03:22
when you use it on the one hand on the front to make communication with the backend, that gives 00:03:34
a course-type error, which is when it is a sharing error of resources of different origins, 00:03:41
it is worth then that in the back-end you have to install the course with the npm and from the 00:03:52
apjs file we have to configure it all that I am going to do now it is worth now it is only 00:04:01
so that you can get an idea, okay, and once we have done that, well, it would no longer 00:04:09
work, okay, the next steps of logging in or doing things on the database would have 00:04:17
to be easier, okay at the end of the video if I am going to tell you I am going to ask you a question to 00:04:25
see how you think about it and how what solution you would give it is worth and in the next video 00:04:31
I tell you which one I tell you which is the solution that is usually given, okay, well then, as I was 00:04:39
saying to do the communication between the front and the back in we are going to use 00:04:49
Axios and with Axios we can make a POS, a GET, we can make that communication, 00:05:03
those HTTP communication protocols, we can use them without any problem. 00:05:14
We have the Axios page, which is this one, then here 00:05:21
well, it tells you how to install it, which is what we are going to do now, depending on what we are 00:05:29
using, there is an example in which it tells you how to use axios and that is how I am going to use it 00:05:38
now, it is worth then it does not have much more complication than taking a look at this if you 00:05:46
you understand the part of the backend this will not have any problem ok we are going to go 00:05:55
to our to our code and in our code the first thing to do is install that axios ok 00:06:02
then I'm going to go to the client folder or in which you have created all the 00:06:13
part of the front ok and we are going to install actions npm and actions ok it starts to install it 00:06:26
and well we already have it ok now what I am going to do is inside the client src folder 00:06:42
I'm going to create another folder, let's see here, what am I going to call it? 00:06:51
for example, okay and this is where we are going to create the different js or jsx files or 00:07:07
whatever is useful for the communication between the front and the back-end, okay in this case I am going to 00:07:16
create a file that as we did in the back-end I am going to call it the authorization point j s 00:07:24
ok then here the first thing we are going to do is import 00:07:35
actions that for that we have installed it then we are going to import actions from 00:07:43
axis is worth then the first thing is to import axios ok now in axios we have seen 00:07:52
that it works by giving the axios get 00:08:11
because the post point is worth the communication protocol that we want to use then notice that 00:08:18
I'm going to make this a little bigger so you can see it, so I don't need to be changing the screen, or better, I'm going to change it. 00:08:26
Notice how I put the post, I put the first parameter that I pass is the backend route to which I want to connect, that link that is bar user. 00:08:36
In our case, you have to remember that in the backend we put API or we put VillablancaDAM2, before each route that we configure. 00:08:53
Remember that we saw that in app.js of the backend part. 00:09:07
And then we pass the different values. 00:09:13
We can pass these values as a value key or we can pass them to an object, which is what we are going to do. 00:09:16
When we fill in the form and click on the onSummit button, what we do is send all that information as an object. 00:09:24
An object that has different value keys. 00:09:34
ok then we send that with an object then it has the den and the cat the dn is good if there has not been 00:09:39
any type of problem then you are going to give me an answer because you visualize it and if there has been 00:09:47
some error you will also tell me we are going to pick up that error and we visualize it to control what 00:09:53
has happened ok then we are going to use this structure ok which is the one that tells us 00:09:58
the technical documentation of axis ok and then what I tell you in us in at least 00:10:06
in the example that I am doing now as you have been doing I put let's see it 00:10:17
we are going to go to our code again and in the part I do not see it in the part 00:10:25
of the app js you see when we put the yus and the routes that was where we declared the routes it is 00:10:35
worth remembering that within routes we had the routes in the routes will be in the register the login 00:10:46
the logout and the profile and in ppjs I told him ok because we have all these routes but also before 00:10:54
you are going to add this part of the path ok then you have to take this into account if you 00:11:02
don't have anything here because nothing because there is no problem we put the route directly but if not 00:11:11
yes you have to take it into account when working from the front ok because you have to 00:11:16
put the route that is then how we have several several routes associated with this part of my 00:11:21
backend then the first thing I am going to do is create a variable here that I can call it api or 00:11:31
as you want, it is worth in which I am going to put the http two points two bars 00:11:43
ok and here we are going to put the local host in which in my case I have it in port 4000 ok 00:11:52
if you have it in the 3000 or wherever you put the port that you have configured ok and 00:12:02
then we have said that it is villa blanca dan 2 then we are going to put villa blanca here 00:12:10
dan in lowercase they do not give 2 ok well and now I already have this variable it is only 00:12:20
because to make it more comfortable when it comes to entering the code it is worth developing 00:12:33
so I don't have to be putting all this string in all the requests that we are going to 00:12:39
make to the backend, it is worth then I would only play with the API variable and that is comfortable, the next thing I 00:12:49
do is that that request is worth then to do that that later I am going to call it because this 00:12:56
request that I am going to make now, which would be something like 00:13:05
axios dot post 00:13:11
here we would pass it according to we have in our help in our 00:13:16
technical documentation first is the route then the first thing that happened to him 00:13:23
will be and be careful because here as I am going to put a constant a variable of 00:13:27
javascript system I'm going to put the accent ok not the comma or the double comma 00:13:33
neither the simple nor the double is the accent ok be careful with that because when playing with a 00:13:45
variable I need to put that ok then here I pass the variable to pi and then I tell you the register 00:13:50
which is about the address on which we are going to send the data to collect from the 00:13:59
form that we have made, then this would be like this, this would be the first part, the second 00:14:10
part because the values ​​that we are going to pass ok then this would be such 00:14:19
the values ​​would be user ok and now as we are seeing the help we see that if we put the point here 00:14:29
le metemos el de un tío 00:14:44
vale y esto nos va a devolver un con sol punto lo con la respuesta 00:14:58
vale y si no me vas a el error y nos vas a hacer lo mismo nos vas a meter un con sol 00:15:09
error, okay, okay, this is the structure that is giving me actions, okay, well, but this you already know with how 00:15:29
we have done the part of the back and such because all this has to go inside or we have to do 00:15:47
an arrow function to be able to export it and be able to call it from different sites, 00:15:53
okay in this case the site is going to be the network the red pack j s x is worth then this has to be 00:15:59
put as an arrow function and then for that we are going to put the cons we are going to put 00:16:09
with the sport 00:16:17
with 00:16:24
this we are going to put for example register 00:16:27
request this is going to be equal to 00:16:32
an input parameter that is going to be the user that is the data object that 00:16:38
I will say the object of data that in this case are all the values that we collect from our 00:16:47
form is worth and then all this and this I am going to put here and this I am going to format and in principle this 00:16:54
would be my function in which I use axios to link with this route with register pass 00:17:15
all the data from the form and then check if there has been an error or not this the den and the 00:17:24
catch are not mandatory, that is, I could leave it only with the axios post, it is worth http localhost 00:17:30
4000 villablanca dan 2 bar register ok I could leave it like that well this in principle I would already 00:17:37
would have here I would no longer need to do anything else now I come to my register page and I want 00:17:44
to save everything when I press the register button ok remember that it is when I press the 00:17:52
register button ok that button in the form we have it as a summit ok and as it is 00:18:02
type of summit when I when I create the form I am telling it that in this case I visualize 00:18:13
these values, okay, well, the first thing is to import, sorry, that function that we are going to do, 00:18:21
then we are going to say import register request, okay, it already gives me this, always remember to put the j s point 00:18:30
or the jsx whatever it is worth remembering that and here what I am going to tell you in the form to see 00:18:40
that I see it here it is worth in the forum summit it is worth we pass the hand the summit this 00:18:53
now I no longer need it I am going to remove it and I am going to tell it directly that it passes the 00:19:01
the register request and pass it as an input values ​​this is worth these values ​​which are the ones that 00:19:07
it is collecting from the form is worth and this already because we would leave it like this well this in principle 00:19:25
must work for us then now that is what I have to do because first start our 00:19:34
server our bucket is worth then I am going to do I close I have the good mongo express it is not 00:19:40
necessary ok I have it to then connect from the web that is already ok then I have the 00:19:50
database also connected I have everything so first I start npm runder ok I start 00:19:58
our server tells us it is already in port 4000 the connection to the database is ok it is 00:20:08
all perfect I open eye I open a new terminal because on the one hand it is the backend and on the other 00:20:14
it is the front ok so I open a new terminal well come on and now I have two and in this is 00:20:20
where I am going to open that client then we are going to put the cd client and npm npm runde 00:20:28
ok and we already have the client open ok 00:20:40
this was this was ok then now we take we are going to show the development tool 00:20:47
vale esto todo esto lo voy a borrar si me deja 00:20:57
vamos a borrar a carolina y así la volvemos a meter vale listo y entonces ponemos aquí 00:21:07
carolina carolina 1 2 3 4 5 6 7 8 y 9 vale y le doy a registrarse y me sale un error que es el que 00:21:19
os estaba diciendo al principio del vídeo vale es un error de course este error os va a dar siempre 00:21:33
cuando hay compartición de recursos de orígenes diferentes vale son diferentes dominios y entonces 00:21:40
for safety, an error jumps, then this, let's see what it is, yes, I'm going to put a moment that 00:21:47
has happened to me, okay, now you are seeing what the browser is, okay, you see the error that is course, 00:22:04
ok then this to solve it we have to go to the part of the backend to the part of the backend 00:22:12
that is important because we have to install the course library if you do it in the part of the client 00:22:23
it will not work and also the dependency you do it within the json package of the client 00:22:33
ok you have to be very very careful with that then we are going to solve this ok we are going to stop 00:22:41
this if the client is stopped and the server we are going to stop it ok and ok ok then what 00:22:54
digo hay que para hay que instalar la librería npm y course vale la librería course vale está la 00:23:09
instalamos y fijaros que no estoy dentro de la carpeta cliente lo estoy haciendo desde la parte 00:23:20
del back-end vale importantísimo vale ahora me voy a ir a app al app del cliente del back-end perdón 00:23:26
to this one, which is where we had defined the use the express to make the cookie the cookie 00:23:35
parser morgan is worth all the all this that we had already done at the beginning of everything then it is here 00:23:45
where on the one hand I am going to import course from course it is worth import course 00:23:52
and what we do now and we are going to put it at the beginning of everything under the cons app 00:24:07
ok but it will be the first app use and here we would put the course parentheses parentheses ok well 00:24:15
if I leave this like this because now any different domain any front can be connected 00:24:29
against me they go against the app and it is worth then you can always give it an origin here 00:24:37
to say hey I just want it to connect in my front none other ok I just want 00:24:47
the origin to connect and we put the http here in two points bar bar localhost 00:24:54
and it is 5173, it is worth 5173 in this way, our front is only going to be connected, which is the one that 00:25:06
comes out through this port, that is also interesting but I already tell you that this is optional 00:25:20
if you want you put it if not ok well what else because we already have the course this means that 00:25:24
everything should already work for us, okay, well, we are going to start our server npm 00:25:33
where everything is fine, no problem, we are going to start our npm client 00:25:41
where everything is fine, no problem, let's go to the web and we are going to put the same as before, 00:25:53
then we are going to put Carolina, we are going to put Carolina, and 1, 2, 3, 4, 5, 6, 7, 8, and 9, 00:26:05
I am going to clean this, okay, and now when I am going to register, you see that it no longer gives me any 00:26:15
error of course, we have already solved it, and here it is giving us all the data that we have 00:26:21
saved and if I come to use the mongo db and update now we would already have our register saved 00:26:29
our collection in our document in the collection is worth with what has worked for us well 00:26:39
what happens if I try to save this register again that we know that we remind you that in the 00:26:50
backend we had controlled that it could not be repeated, it is worth for the idea for the car for the 00:26:56
we had said that the email was unique, it is worth remembering the models and the schemes as well as 00:27:02
remembering that also in those models we had said that the key was of a specific size 00:27:09
me parece que le puse de nueve vale pues acordaros de todo eso vale entonces qué pasa si intento 00:27:19
volver a crear este este documento vamos a borrar la consola le doy a registrarse y me sale un error 00:27:27
vale que está bien me tiene que salir ese error axios error vale entonces vamos a investigar 00:27:40
what the error is, it tells me well in response 00:27:48
here is the good data is telling me the message there you have it says well that I have not duplicated 00:27:58
the key of the email ok and that we can not do it ok then at the moment 00:28:11
the consoles if I put here now 00:28:26
jose 00:28:31
here we have 00:28:33
jose 00:28:36
ok if I give it to register because in this case everything works perfectly 00:28:37
ok then everything is already working for us well let's go a moment to the code we go 00:28:50
again to register then we are going to clean this a little ok this already works for us it is 00:28:56
bien pero esto de meter quizás esta función flecha en el on summit lo podéis dejar pero es un poco 00:29:02
raro vale entonces nos podemos crear aquí una función vale como siempre entonces le vamos a 00:29:10
meter el cons vamos a llamarle si queréis en un summit para ponerle el mismo nombre 00:29:23
and I am not going to make another change because we are also accessing a database to save 00:29:29
that new record and we have always been that this should we should do it 00:29:40
asynchronous where I am here ok this should be asynchronous and as it should be asynchronous 00:29:49
esto que me devuelve a un res debería de meterlo así esto con un resto de aquí el zinc 00:29:59
wey y aquí el async que éste sí le tenía puesto de antes vale entonces recordar que aquí pues una 00:30:18
vez que accedemos a la base de datos y tal lo suyo es hacer eso vale 00:30:28
bueno y entonces qué es lo que voy a meter 00:30:34
en las funciones a que estoy declarando ahí arriba voy a copiar esto 00:30:38
aquí 00:30:49
x vale me voy a venir aquí arriba en un 00:30:54
sumit and we are going to 00:31:00
control v is worth then I have the cons 00:31:08
consume and this 00:31:12
is worth and here what I am going to do is call 00:31:34
a summit to the function 00:31:38
and then it should not work exactly the same and we have the most organized code that is always 00:31:44
important and more in developments like this that there are so many files because having it always more or 00:31:57
less organized because it is his own, then we are going to do a last test 00:32:03
to see that everything is fine, we are going to put now, for example, 00:32:11
and it works for me everything is the same, it works for me, everything is fine, it is worth it, 00:32:20
the 10 will not come here somewhere, he is putting us 00:32:41
la cookie con el token vale pero en este navegador no sé dónde no sé dónde me lo guarda vale habría 00:33:00
que mirar todo esto y pasó por el mar a mirarlo vale en el navegador que vosotros uséis pues en 00:33:18
los que hagan en las cabeceras debería de venir os el set cookie ahí debería de estar esa cookie vale 00:33:23
well, well, here I leave this video of today in the next video the question that I wanted to tell you or 00:33:31
that I wanted to ask you is good every time we want to do an operation on our app and 00:33:45
we have to be logging we have to be always we have to generate that touch always 00:33:56
if you think that if that cannot be a bit weird in reality we if we think about the 00:34:03
applications that we can use we log once and once we are logged 00:34:13
while we are logged we can do the operations that we have allowed until we do 00:34:18
the know-how, it is good to go around that and in the next video we are going to give 00:34:25
an answer to that question well a greeting guys see you later 00:34:32
Idioma/s:
es
Idioma/s subtítulos:
en
Autor/es:
Mario S.
Subido por:
Mario S.
Licencia:
Dominio público
Visualizaciones:
57
Fecha:
2 de agosto de 2024 - 18:20
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
00′ 22″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
102.76 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid