Carrusel incompleto

sas

package-lock.json

@@ -2231,6 +2231,37 @@
       "integrity": "sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
+      "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
+      "requires": {
+        "follow-redirects": "1.5.10"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.19.2",
     "bootstrap": "^4.5.2",
     "core-js": "^3.6.5",
     "jquery": "^3.5.1",

src/components/carrusel.vue

@@ -5,69 +5,66 @@
       class="carousel slide col-md-10 col-lg-10 col-xl-10  col-12 mx-auto"
       data-ride="carousel"
     >
-      <div class="carousel-inner">
-        <div class="carousel-item  "  
-        v-bind:key="libro.id"
-        v-for="(libro,idx) in Libros"
-        :class="{ active: idx==0 }">
-          <img
-            :src= libro.img
-            class="d-block w-100 img-fluid"
-            alt="img"
-          />
-        </div>
-        <!-- <div class="carousel-item">
-          <img
-            src="https://www.unam.mx/sites/default/files/images/carrusel/bannermxok.jpg"
-            class="d-block w-100 img-fluid"
-            alt="img"
-          />
-        </div>
-        <div class="carousel-item">
-          <img
-            src="https://www.unam.mx/sites/default/files/images/carrusel/bannermxok.jpg"
-            class="d-block w-100 img-fluid"
-            alt="img"
-          />
-        </div> -->
-      </div>
-      <a
-        class="carousel-control-prev"
-        href="#carouselExampleControls"
-        role="button"
-        data-slide="prev"
-      >
+      <div class="carousel-inner" >
+        
+          <div class="carousel-item active"  v-bind:key="imagen.id" v-for="imagen in imagenes">
+            <img :src="imagen.img" class="d-block w-100 img-fluid" alt="img" />
+          </div>
+          
+      </div> 
+
+      <a class="carousel-control-prev"  href="#carouselExampleControls"  role="button" data-slide="prev" >
         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
         <span class="sr-only">Previous</span>
       </a>
-      <a
-        class="carousel-control-next"
-        href="#carouselExampleControls"
-        role="button"
-        data-slide="next"
-      >
+      <a  class="carousel-control-next"  href="#carouselExampleControls"  role="button" data-slide="next" >
         <span class="carousel-control-next-icon" aria-hidden="true"></span>
         <span class="sr-only">Next</span>
       </a>
     </div>
+
   </div>
+  
 </template>
 
 <script>
-
-
+import axios from "axios";
+import config from "../config/config.js";
 export default {
-  data(){
-    return{
-    Libros:[
-      {id:0, img:"https://www.unam.mx/sites/default/files/images/carrusel/bannermxok.jpg"},
-            {id:1, img:"https://www.unam.mx/sites/default/files/images/carrusel/bannermxok.jpg"},
-      {id:2, img:"https://www.unam.mx/sites/default/files/images/carrusel/bannermxok.jpg"}
-    ]
+  data() {
+    return {
+      imagenes: [
 
+      ]
+    };
+  },
+  async created() {
+    try {
+      let nombres = await axios.get(`${config.api}/nombreCarrusel`);
+      nombres = nombres.data.data;
+      for (let i = 0; i < nombres.length; i++) {
+        console.log(`  Este es el nombre ${nombres[i]}`);
+        let config = {
+          // example url
+          url: `http://localhost:3000/imagenCarrusel?nombre=${nombres[i]}`,
+          method: "GET",
+          responseType: "blob"
+        };
+        await axios(config).then(response => {
+          let reader = new FileReader();
+          reader.readAsDataURL(response.data);
+          reader.onload = () => {
+            this.imagenes.push({ id: i, img: reader.result });
+          };
+        });
+      }
+      
+    }
+    catch (error) {
+      console.log(`Ocurrio un error msj: ${error}`);
     }
   }
-}
+};
 </script>
 
 <style scoped>

src/components/descripcion.vue

@@ -2,7 +2,7 @@
   <div class="container">
     <div class="row ">
       <div class="col-md-6 col-sm-12 py-5">
-        <img v-bind:src="rutaIm" class="libro" />
+        <img :src="src" alt="" class="libro" />
         <button class="button pre">
           Previsualizar</button
         ><br /><br />
@@ -78,6 +78,8 @@
 </template>
 
 <script>
+import axios from "axios";
+import config from "../config/config.js";
 import Title from "../components/titulo.vue";
 export default {
   components: {
@@ -86,41 +88,105 @@ export default {
 
   data() {
     return {
-      titulo: "Competitive programing",
-      autor: "HALIM",
-      paginas: "300",
-      isbn: "POSF-12-43",
-      edicion: "Primera edicion",
-      precio: "$3232.00",
-      rutaIm:
-        "https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg",
-      version: "Electronica",
-      desc: `En relación al estudio del álgebra, las expresiones algebraicas son el conjunto de números, y por símbolos representados por letras que manifiestan un valor desconocido, siendo llamado como incógnita o variable.\n\nLos símbolos se encuentran relacionados a través de signos que indican las operaciones que se necesitan efectuar, bien sea multiplicación, suma, resta, entre otros, con el objetivo de conseguir el resultado de las variables. En este sentido, los términos se distinguen o separan por medio de signos, y en el caso de estar separadas por el signo de igualdad se llama ecuación.`,
-      boton2: "Comprar",
+      idLibro: "",
+      titulo: "",
+      autor: "",
+      paginas: "",
+      isbn: "",
+      edicion: "",
+      precio: "",
+      src: "",
+      version: "",
+      desc: ``,
+      boton2: "",
+      categoria: "",
       Libros: [
         {
           id: 0,
-          title:
-            "Some quick example text to build on the card title and make up the bulk of the cards content.",
-          img:
-            "https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg"
+          title: "",
+          img: ""
         },
         {
           id: 1,
-          title:
-            "Some quick example text to build on the card title and make up the bulk of the cards content.",
-          img:
-            "https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg"
+          title: "",
+          img: ""
         },
         {
           id: 1,
-          title:
-            "Some quick example text to build on the card title and make up the bulk of the cards content.",
-          img:
-            "https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg"
+          title: "",
+          img: ""
         }
       ]
     };
+  },
+  async created() {
+    try {
+      //this.idLibro = window.localStorage.getItem("idLibro");
+      this.idLibro = 1;
+
+      let detalle = await axios.get(
+        `${config.api}/libroDetalle?idLibro=${this.idLibro}`
+      );
+
+      detalle = await detalle.data.datos;
+
+      this.titulo = detalle.titulo;
+      this.autor = detalle.autor;
+      this.paginas = detalle.paginas;
+      this.isbn = detalle.isbn;
+      this.edicion = detalle.impresion;
+      this.precio = detalle.precio;
+      this.version = detalle.version;
+      this.desc = detalle.descripcion;
+      this.categoria = detalle.categoria;
+      if (detalle.precio !== "Gratis") this.boton2 = "Comprar";
+      else this.boton2 = "Descargar";
+    } catch (error) {
+      console.log(error);
+    }
+
+    try {
+      let config = {
+        // example url
+        url: `http://localhost:3000/libroImagen?idLibro=${this.idLibro}`,
+        method: "GET",
+        responseType: "blob"
+      };
+      await axios(config).then(response => {
+        let reader = new FileReader();
+        reader.readAsDataURL(response.data);
+        reader.onload = () => {
+          this.src = reader.result;
+        };
+      });
+    } catch (error) {
+      console.log(error);
+    }
+    try {
+      let similares = await axios.get(
+        `${config.api}/librosSimilares?categoria=${this.categoria}`
+      );
+      similares = similares.data.data;
+      console.log(`${similares}`);
+      for (let i = 0; i < similares.length; i++) {
+        this.Libros[i].title = similares[i].titulo;
+        let config = {
+          // example url
+          url: `http://localhost:3000/libroImagen?idLibro=${i + 2}`,
+          method: "GET",
+          responseType: "blob"
+        };
+        await axios(config).then(response => {
+          let reader = new FileReader();
+          reader.readAsDataURL(response.data);
+          reader.onload = () => {
+            this.Libros[i].img = reader.result;
+          };
+        });
+      }
+    } catch (error) {
+      console.log(`Ocurrio un error ${error}`);
+    }
   }
 };
 </script>

src/config/config.js

@@ -0,0 +1,5 @@
+const config = {
+  api: "http://localhost:3000"
+  //api: "https://venus.acatlan.unam.mx/indiana_hackaton"
+};
+module.exports = config;

src/routes.js

@@ -5,8 +5,7 @@ import difusion from "./view/difusion.vue";
 
 export const routes = [
   { path: "/", component: home, name: "form" },
-  { path: "/login", component: login, name: "Login" },
+  { path: "/panelAdmin", component: login, name: "Login" },
   { path: "/desc", component: libroDescripcion, name: "LibroDesc" },
-  { path: "/difusion", component: difusion, name: "difusion" },
-
+  { path: "/difusion", component: difusion, name: "difusion" }
 ];

src/view/libroDescripcion.vue

@@ -11,7 +11,7 @@
 
 <script>
 import Header from "./../components/header.vue";
-import Nav from "./../components/navPrincipal.vue";
+import Nav from "./../esteticas/nav.vue";
 import Descrip from "./../components/descripcion.vue";
 import Footer from "./../components/footer.vue";
 

src/view/login.vue

@@ -1,42 +0,0 @@
-<template>
-  <div>
-      <Header></Header>
-      <h1 class="my-5">Inicia Sesion</h1>
-<div class="row d-flex justify-content-center">
-<div class="col-12 col-md-8 col-lg-6 col-xl-6">
-<form class="row d-flex justify-content-center">
-      <input type="text" v-model="data.email" id="login" class="form-control col-8"  name="login" placeholder="Usuario">
-      <input type="password" v-model="data.password" id="password" class="form-control col-8 my-3" name="login" placeholder="Contraseña">
-      <input type="button" @click="login" class="btn bg-primary text-white col-5" value="Ingresar">
-    </form>
-</div>
-  </div>
-  </div>
-</template>
-
-<script>
-
-import Header from "./../components/header.vue";
-
-export default {
-    data(){
-        return{
-            data:{
-            email:'',
-            password:''
-        }}
-    },
-    methods:{
-        login(){
-            alert(this.data.email)
-        }
-    },
-    components: {
-    Header
-    }
-}
-</script>
-
-<style>
-
-</style>

vue.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  publicPath: "./"
+};