Scribd
Cargar
8 vistas

S12 - s4 Web Interactiva en JavaScript Que Usa Axios en Node - OGCEVK

Axios en Nod

Cargado por

Gerson David Vega Cisneros
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
8 vistas

S12 - s4 Web Interactiva en JavaScript Que Usa Axios en Node - OGCEVK

Axios en Nod

Cargado por

Gerson David Vega Cisneros
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 6

Web interactiva en JavaScript que usa Axios en Node.

js - JavaScript

Proyecto en Node.js que utiliza Axios para crear una web interactiva en JavaScript. Este
proyecto realizará una solicitud a una API y mostrará los datos en una página web.

1. Configuración del Proyecto

Primero, asegúrate de tener Node.js y npm instalados. Luego, crea un nuevo directorio para tu
proyecto y navega a él:

```bash

mkdir utp3110

cd utp3110

```

2. Inicializa el Proyecto

Ejecuta el siguiente comando para crear un `package.json`:

```bash

npm init -y

```

3. Instala Dependencias

Instala Express para el servidor y Axios para hacer solicitudes HTTP:

```bash

npm install express axios

```

4. Estructura de Archivos

Crea la siguiente estructura de carpetas y archivos:

```
utp3110/

├── public/

│ ├── index.html

│ └── script.js

├── server.js

└── package.json

```

5. Código del Servidor (server.js)

Crea el archivo `server.js` y añade el siguiente código:

```javascript

const express = require('express');

const axios = require('axios');

const path = require('path');

const app = express();

const PORT = process.env.PORT || 3000;

// Middleware para servir archivos estáticos

app.use(express.static(path.join(__dirname, 'public')));

// Ruta para obtener datos de una API


app.get('/api/data', async (req, res) => {

try {

const response = await axios.get('https://jsonplaceholder.typicode.com/posts');

res.json(response.data);

} catch (error) {

res.status(500).json({ error: 'Error fetching data' });

});

// Inicia el servidor

app.listen(PORT, () => {

console.log(`Server is running on http://localhost:${PORT}`);

});

```

6. Código HTML (public/index.html)

Crea el archivo `index.html` en la carpeta `public`:

```html

<!DOCTYPE html>
<html lang="es">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Web Interactiva con Axios</title>

</head>

<body>

<h1>Datos de la API</h1>

<button id="fetchData">Obtener Datos</button>

<div id="dataContainer"></div>

<script src="script.js"></script>

</body>

</html>

```

7. Código JavaScript (public/script.js)

Crea el archivo `script.js` en la carpeta `public`:

```javascript

document.getElementById('fetchData').addEventListener('click', async () => {


try {

const response = await fetch('/api/data');

const data = await response.json();

const dataContainer = document.getElementById('dataContainer');

dataContainer.innerHTML = ''; // Limpiar contenido anterior

data.forEach(item => {

const div = document.createElement('div');

div.innerHTML = `<h3>${item.title}</h3><p>${item.body}</p>`;

dataContainer.appendChild(div);

});

} catch (error) {

console.error('Error al obtener los datos:', error);

});

```
8. Ejecuta el Proyecto

Para iniciar el servidor, ejecuta:

```bash

node server.js

```

9. Abre el Navegador

Visita `http://localhost:3000` en tu navegador. Deberías ver un botón que, al hacer clic,


obtendrá y mostrará datos de la API.

10. Mejoras Futuras

- Agregar estilos CSS para mejorar la apariencia.

- Manejar errores de manera más robusta.

- Permitir que el usuario introduzca parámetros para personalizar la solicitud a la API.

También podría gustarte