Servidor en Express con Axios

 How to Connect Express and React App with Axios API request


Este trabajo a parte de ser una tarea fue un reto dado que no conocía el manejo de archivos con Axios, el trabajo consistía en  crear un servidor en express y montar en diferentes htmls los 10 primeros ejercicios de proyect euler y que para obtener el resultado de cada ejercicios hagamos un get con axios para mostrar el resultado en pantalla.

En primer punto nosotros debemos instalar express, axios y crear un package.json que puedes ver como se crea en las demás entradas de mi blog, en esta entrada nos vamos a fijar mas en como usar axios para hacer la tarea asignada.


1. Ya instalda todo debemos verificar que tengas todos los archivos necesarios de cada ejercicios y cada html ya con todo esto procedemos a realizar la practica, en cada html debes tener este script <script src="https://unpkg.com/axios/dist/axios.min.js"></script> con esto nuestras paginas
en html tomaran un archivo js de axios para poder realizar las operaciones necesarias

2.necesitamos crear un archivo en el cual va a arrancar nuestro servidor, este archivo contiene
todas las rutas necesarias en las cuales se mostrara un ejercicios, el archivo deberia verse
algo asi:

eEsta parte es una de las mas importante dado que son la creacion de las rutas no podremos visualizar nuestras paginas en html.

3. Ahora ya con las rutas creamos un archivo donde realizaremos el método get con axios para llamar a una función e insertarlo en la pagina:

Lo que hace este código es que en el momento en que de click en el botón para mostrar el resultado tomara el archivo  necesario que en este caso es multi.js que contiene una función para determinar si es multiplo de 3 y 5 y sumarlos posteriormente , también vemos que utilizamos el método innerHTML para insertar el resultado de la función en pantalla.

Esta practica termina con esta pagina algo simple pero funcional y se ve de esta manera:




los archivos de este proyecto los puedes encontrar en mi nube de mega en el siguiente enlace: https://mega.nz/folder/BJ9DwAab#9MujyXZ06jEFBV61H9Tg2Q




Comentarios