Programación web dinámica

Vue

Esta parte ya se la saben:

  • Instalamos Express
  • Configuramos nuestro servidor
npm init -y
npm install express
npm install cors

// crear archivo server.js

node server.js | npm start

Servidor

const express = require("express");
const cors = require("cors");

const app = express();
const port = 5000;

app.use(cors());
app.use(express.json());

app.get("/api/mensaje", (req, res) => {
  res.json({ mensaje: "¡Saludos desde el servidor!" });
});

app.listen(port, () => {
  console.log(`Servidor escuchando en el puerto ${port}`);
});

Dentro de la misma carpeta:

  • Creamos un proyecto de Vue dentro de la carpeta "client"
  • Luego de esto, nos cambiamos a la carpeta "client"
npm create vue@latest client

Cliente

Dentro de la carpeta "client":

  • Completamos la instalación de Vue
  • Instalamos Axios
npm install
npm install axios

Cliente

Dentro de la carpeta "client/src/components":

  • Creamos el archivo HolaMundo.vue

Cliente

<script>
import axios from "axios";
export default {
  data() {
    return {
      mensaje: "",
    };
  },
  mounted() {
    this.fetchMensaje();
  },
  methods: {
    async fetchMensaje() {
      try {
        const respuesta = await axios.get("http://localhost:5000/api/mensaje");
        this.mensaje = respuesta.data.mensaje;
      } catch (error) {
        console.error("Error recuperando el mensaje: ", error);
      }
    },
  },
};
</script>

<template>
  <div>
    <h1>{{ mensaje }}</h1>
  </div>
</template>

<style scoped>
h1 {
  color: #42b983;
}
</style>

Dentro de la carpeta "client/src/":

  • Modificamos el archivo App.vue

Cliente

<script>
import HolaMundo from "./components/HolaMundo.vue";
export default {
  components: {
    HolaMundo,
  },
};
</script>

<template>
  <div id="app">
    <HolaMundo />
  </div>
</template>

Para transpilar el código del cliente usamos la instrucción:

  • npm run build

Para ejecutar el código del cliente usamos la instrucción:

  • npm run dev

El servidor del cliente está en http://localhost:5173

Programación web dinámica: Vue

By Gilberto 🦁

Programación web dinámica: Vue

Vue

  • 25

More from Gilberto 🦁