descipcion Terminada

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

@@ -2,7 +2,7 @@
   <div class="divMaster row my-5">
     <div
       id="carouselExampleControls"
-      class="carousel slide col-10 offset-1"
+      class="carousel slide col-md-10 col-lg-10 col-xl-10  col-12 mx-auto"
       data-ride="carousel"
     >
       <div class="carousel-inner">

src/components/descripcion.vue

@@ -2,7 +2,35 @@
   <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 />
+        <div class="container">
+          <div class="row izq">
+            <b style="font-size: 18px;" class="izq">Compartir</b><br />
+          </div>
+          <div class="container izq">
+            <a href="https://www.facebook.com/" class="img"
+              ><img
+                style="width: 45px; height: 45px"
+                src="../assets/facebook.png"
+                alt="Facebook"
+            /></a>
+            <a href="https://www.instagram.com/" class="img"
+              ><img
+                style="width: 45px; height: 45px"
+                src="../assets/Instagram.png"
+                alt="Instagram"
+            /></a>
+            <a href="https://www.youtube.com/" class="img"
+              ><img
+                style="width: 45px; height: 45px"
+                src="../assets/YouTube.png"
+                alt="Youtube"
+            /></a>
+          </div>
+        </div>
       </div>
       <div class="col-md-6 col-sm-12 py-5 titulo">
         <b>Titulo:</b>
@@ -17,38 +45,219 @@
         <p>{{ edicion }}</p>
         <b>Precio: </b>
         <p>{{ precio }}</p>
-
         <b>Versión:</b>
+        <p>{{ version }}</p>
+        <b>Descripción:</b>
+        <div class="overflow-auto">{{ desc }}</div>
+        <button class="button ">
+          {{ boton2 }}
+        </button>
+      </div>
+    </div>
+    <Title title="Similares" />
+    <div class="divMaster row mb-5">
+      <div class="col-10 offset-1 d-flex flex-wrap justify-content-center">
+        <div
+          class="card m-3"
+          style="width: 12rem;"
+          v-bind:key="libro.id"
+          v-for="libro in Libros"
+        >
+          <router-link :to="{ path: 'home' }" class="textt">
+            <img :src="libro.img" class="card-img-top rounded" alt="libro" />
+            <div class="card-body cd textt">
+              <p class="card-text textt">
+                {{ libro.title }}
+              </p>
+            </div>
+          </router-link>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import axios from "axios";
+import config from "../config/config.js";
+import Title from "../components/titulo.vue";
 export default {
+  components: {
+    Title
+  },
+
   data() {
     return {
-      titulo: "Competitive programing",
-      autor: "HALIM",
-      paginas: "300",
-      isbn: "POSF-12-43",
-      edicion: "Primera edicion",
-      precio: "$3232.00",
-      rutaIm: `./${__dirname}src/assets/as.jpg`
+      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"
+        },
+        {
+          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"
+        },
+        {
+          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"
+        }
+      ]
     };
+  },
+  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>
 
 <style scoped>
+.divMaster {
+  height: auto;
+}
+.card {
+  border: none !important;
+  border-bottom: 5px solid #1b3d70 !important;
+}
+a {
+  text-decoration: none !important;
+  color: black;
+}
+.img {
+  margin-left: 1rem;
+  margin-top: 1rem;
+}
+.izq {
+  display: flex;
+  justify-content: flex-start;
+}
+.button {
+  background-color: rgb(187, 136, 0);
+  border: none;
+  color: white;
+  height: 4.5rem;
+  width: 15rem;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 1.5rem;
+  border-radius: 1rem;
+  -webkit-transition-duration: 0.4s; /* Safari */
+  transition-duration: 0.4s;
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  margin-top: 2rem;
+}
+.button:hover {
+  background-color: #46c200;
+  color: white;
+}
+.pre {
+  background-color: #1e3c70;
+}
+.pre:hover {
+  background-color: rgb(187, 136, 0);
+}
+
 .titulo {
-  font-size: 1.3rem;
+  font-size: 1rem;
   text-align: left;
   color: balck;
 }
+p {
+  margin-bottom: 0.5rem;
+}
 
 .libro {
-  width: 360px;
+  width: 320px;
   height: 480px;
   margin-right: auto;
   box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.57);
@@ -60,5 +269,16 @@ export default {
     margin-right: auto;
     box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.57);
   }
+  .button {
+    text-align: center;
+    margin-top: 3rem;
+  }
+}
+
+@media screen and (max-width: 380px) {
+  .button {
+    text-align: center;
+    margin-top: 3rem;
+  }
 }
 </style>

src/components/footer.vue

@@ -1,7 +1,7 @@
 <template>
   <footer class="container-fluid Azul-puma footer py-3 ">
     <container>
-      <div class="row">
+      <div row>
         <button type="button" class="col-md-6 col-sm-12 btn boton-footer uno">
           Comité Editorial
         </button>

src/components/titulo.vue

@@ -33,7 +33,6 @@ export default {
   font-size: 30px;
 }
 
-
 @media screen and (max-width: 400px) {
   .pTitulo {
     font-size: 20px;

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/esteticas/nav.vue

@@ -1,9 +1,10 @@
 <template>
   <div class="divMaster doradoUnam row d-flex justify-content-center">
     <div class="col-10 offset-1">
-      <nav class="navbar navbar-expand-sm navbar-light  ">
+      <nav class="navbar navbar-expand-sm navbar-dark  ">
         <button
-          class="navbar-toggler"
+          @click="method()"
+          class="navbar-toggler col-5"
           type="button"
           data-toggle="collapse"
           data-target="#navbarTogglerDemo02"
@@ -13,97 +14,124 @@
         >
           <span class="navbar-toggler-icon blanco"></span>
           <span class="mx-2">Menu</span>
-          
         </button>
 
-        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
-          <ul class="navbar-nav mr-auto  mt-0 mt-lg-0">
+        <div class="collapse navbar-collapse " id="navbarTogglerDemo02">
+          <ul
+            class="navbar-nav mr-auto w-100 d-flex align-items-center justify-content-around  mt-0 mt-lg-0"
+          >
             <li class="nav-item">
               <a class="nav-link text-white" href="#">Inicio</a>
             </li>
             <li class="nav-item">
               <a class="nav-link text-white" href="#">Presentacion</a>
             </li>
-            <li class="nav-item ">
-              <a
-                class="nav-link dropdown-toggle text-white "
-                id="navbarDropdown"
-                role="button"
-                data-toggle="dropdown"
-                aria-haspopup="true"
-                aria-expanded="false"
-                href="#"
-                >Libros</a
-              >
-              <div
-                class="dropdown-menu azulUnam"
-                aria-labelledby="navbarDropdown"
-              >
-                <a class="dropdown-item text-white" href="#"
-                  >Ciencias Socioeconomicas</a
+
+            <li class="nav-item">
+              <div class="dropdown">
+                <a
+                  class="btn nav-link  dropdown-toggle text-white"
+                  href="#"
+                  role="button"
+                  id="dropdownMenuLink"
+                  data-toggle="dropdown"
+                  aria-haspopup="true"
+                  aria-expanded="false"
                 >
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item text-white" href="#"
-                  >Diseño y Edificacion</a
-                >
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item text-white" href="#"
-                  >Enseñanza de Idiomas</a
-                >
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item text-white" href="#"
-                  >Estudios de Posgrado</a
-                >
-                <div class="dropdown-divider "></div>
-                <a class="dropdown-item text-white " href="#">Humanidades</a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item text-white" href="#"
-                  >Matematicas e Ingenieria</a
+                  Libros
+                </a>
+
+                <div
+                  class="dropdown-menu azulUnam"
+                  aria-labelledby="navbarDropdown"
                 >
+                  <a class="dropdown-item text-white" href="#"
+                    >Ciencias Socioeconomicas</a
+                  >
+                  <div class="dropdown-divider"></div>
+                  <a class="dropdown-item text-white" href="#"
+                    >Diseño y Edificacion</a
+                  >
+                  <div class="dropdown-divider"></div>
+                  <a class="dropdown-item text-white" href="#"
+                    >Enseñanza de Idiomas</a
+                  >
+                  <div class="dropdown-divider"></div>
+                  <a class="dropdown-item text-white" href="#"
+                    >Estudios de Posgrado</a
+                  >
+                  <div class="dropdown-divider "></div>
+                  <a class="dropdown-item text-white " href="#">Humanidades</a>
+                  <div class="dropdown-divider"></div>
+                  <a class="dropdown-item text-white" href="#"
+                    >Matematicas e Ingenieria</a
+                  >
+                </div>
               </div>
             </li>
+
             <li class="nav-item">
               <a class="nav-link text-white" href="#">Difusion Editorial</a>
             </li>
           </ul>
-          <form class="form-inline  my-0 my-lg-0">
-            <div class="input-group input-group-sm mb-0">
-              <input
-                type="text"
-                class="form-control reIzq "
-                placeholder="Buscar"
-                aria-label="Recipient's username"
-                aria-describedby="basic-addon2"
-              />
-              <div class="input-group-append reDer bg-white">
-                <button class="btn  my-0" type="submit">
-                  <svg
-                    width="1em"
-                    height="1em"
-                    viewBox="0 0 16 16"
-                    class="bi bi-search"
-                    fill="currentColor"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      fill-rule="evenodd"
-                      d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"
-                    />
-                    <path
-                      fill-rule="evenodd"
-                      d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"
-                    />
-                  </svg>
-                </button>
-              </div>
-            </div>
-          </form>
         </div>
+
+        <form
+          id="buscador"
+          v-if="isExist"
+          class="form-inline  my-0 my-lg-0 buscador col-4 d-flex justify-content-end"
+        >
+          <div class="input-group input-group-sm mb-0">
+            <input
+              type="text"
+              class="form-control reIzq "
+              placeholder="Buscar"
+              aria-label="Recipient's username"
+              aria-describedby="basic-addon2"
+            />
+            <div class="input-group-append reDer bg-white">
+              <button class="btn  my-0" type="submit">
+                <svg
+                  width="1em"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  class="bi bi-search blanco"
+                  fill="currentColor"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"
+                  />
+                  <path
+                    fill-rule="evenodd"
+                    d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </form>
       </nav>
     </div>
   </div>
 </template>
 
+<script>
+export default {
+  data() {
+    return {
+      isExist: true
+    };
+  },
+  methods: {
+    method() {
+      this.isExist = !this.isExist;
+    }
+  }
+};
+</script>
+
 <style scoped>
 * {
   margin: 0;
@@ -125,27 +153,29 @@ nav {
 .doradoUnam {
   background-color: #bb8800;
 }
-.blanco {
-  color: white !important;
-}
 
 .dropdown-item:hover {
   background-color: #bb8800;
 }
 .nav-link:focus {
   background-color: #1e3c70;
-  border-radius:  2rem;
+  border-radius: 1rem;
 }
 
-.nav-link{
+.nav-link:hover {
+  background-color: #1e3c70;
+  color: white;
+}
+
+.nav-link {
   transition: 0.3s;
+  font-size: 20px;
 }
 
-.dropdown-item{
-  padding: 1rem;
+.dropdown-item {
+  padding: 0.3rem 1rem;
 }
 
-
 .menuText {
   display: none;
 }
@@ -161,8 +191,9 @@ nav {
 }
 
 @media (max-width: 450px) {
-  .menuText {
-    display: block;
+  .menuText,
+  .buscador {
+    display: block !important;
   }
 }
 </style>

src/view/home.vue

@@ -12,13 +12,14 @@
 <script>
 import Header from "./../components/header.vue";
 import Nav from "./../esteticas/nav.vue";
+//import Nav from "./../components/navPrincipal.vue";
 import Footer from "./../components/footer.vue";
 import Carr from "../components/carrusel.vue";
 import Cart from "../components/cartLibro.vue";
 import Title from "../components/titulo.vue";
 
 export default {
-  name: "App",
+  name: "home",
   components: {
     Header,
     Nav,

src/view/libroDescripcion.vue

@@ -3,8 +3,8 @@
     <Header />
     <Nav />
 
-    <p>descripcion</p>
     <Descrip />
+
     <Footer />
   </div>
 </template>

vue.config.js

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