Cómo configurar la búsqueda de interfaz de usuario receptiva en Vue.js

¿Estás pensando en crear algo increíble con uno de los marcos modernos más populares que existen en este momento, pero no sabes cómo empezar?

Si es así, entonces esta publicación te ayudará a comenzar y construir algo increíble.

¿Qué vamos a construir?

Construiremos una búsqueda receptiva del lado del cliente de las 7 maravillas del mundo con las siguientes características:

  1. Búsqueda de texto y filtros basados ​​en calificaciones y me gusta.
  2. 2 artículos por fila para tableta y escritorio , 1 artículo por fila para móvil .
  3. Obtención de datos de forma asincrónica desde API externa en el lado del cliente.
  4. Vista receptiva como se muestra a continuación:

Demostración en vivo : //vue-responsive-search.herokuapp.com

Código fuente : //github.com/honey93/VueSearchExample

Arquitectura tecnológica

Trabajaremos con las siguientes tecnologías:

  1. Vue.js : el marco de JavaScript progresivo
  2. BootstrapVue : proporciona una de las implementaciones más completas de los componentes Bootstrap V4 y el sistema de cuadrícula disponible para Vue.js 2.5+, con un marcado de accesibilidad WAI-ARIA extenso y automatizado.
  3. Vue Cli 3 : herramientas estándar para el desarrollo de Vue.js

Estructura del proyecto

Para comenzar con nuestro proyecto Vue, necesitamos configurar muchas cosas como Vue, Bootstrap, Vue Router, Vuex, etc.

Vue Cli nos proporciona el comando para crear el proyecto con la mayoría de las configuraciones necesarias.

npm install -g @vue/cli vue create project-name

Para las cosas restantes como BootstrapVue, vue-star-rating, etc., podemos usar el comando npm install.

El proyecto predeterminado creado con vuecli tiene la siguiente estructura:

/Root Folder Public/ src/ assets/ /* Static assets like images goes here */ components/ /* Small part of a view */ views/ /* View represents a page composed of several components*/ App.vue /* The main view inside which the routing logic goes */ main.js /* App initialisation happens here */ router.js /* Router logic is defined here */ store.js /* Optional state management library Vuex */ package.json /* It consist of all the dependencies of the project. */ ......

Las cosas anteriores están ahí para explicarle la arquitectura del proyecto y la forma de inicializarlo.

Podemos comenzar clonando el repositorio y escribiendo los siguientes comandos:

npm install npm run serve 

Algunos componentes importantes explicados:

componentes / Header.vue

El encabezado se ha creado en forma de un solo componente independiente para que se pueda reutilizar en todas las páginas, evitando la duplicación del código.

/* Vue style of writing component: template, script and style*/  Responsive Search  export default { name: "Header" };   .header { display: flex; flex-flow: row wrap; justify-content: space-between; } 

componentes / Main.vue

Este componente consta de toda la lógica de búsqueda / filtros y visualización de los resultados obtenidos de la API.

Este componente utiliza el encabezado anterior importándolo en el script.

 Total Likes: {{likes.count}} Hits: {{likes.hit}}  Ratings: {{wonder.place}} {{wonder.likes}} 
{{wonder.place}}

{{wonder.description}}

/* Importing Header to use in this component */ import Header from "@/components/Header.vue"; /* Importing axios for async REST calls */ import axios from "axios"; export default { name: "Main", /* mounted gets called when the component gets mounted. AJAX calls are preferred in mounted lifecycle method */ mounted() { this.hover_flag = false; var inside = this; axios .get("//www.mocky.io/v2/5c7b98562f0000c013e59f07") .then(function(response) { //console.log(response); inside.wonders_data_actual = response.data.data; response.data.data.map(function(wonder) { inside.likes.count += wonder.likes; }); inside.wonders_data_actual = inside.wonders_data_actual.map(function( wonder ) { wonder.active_like = false; return wonder; }); inside.wonders_data = response.data.data; }) .catch(function(error) { // console.log(error); }); }, /* All the data variable declaration are done here: */ data() { return { hover_flag: false, wonders_data_actual: [], wonders_data: [], active_id: 0, options: [ { value: null, text: "Sort By" }, { value: "a", text: "Ratings" }, { value: "b", text: "Likes" } ], search: { filter: null, text: "" }, likes: { count: 0, hit: 0 } }; }, /* Methods are defined here */ methods: { show_hover(flag, active_id) { this.hover_flag = flag; this.active_id = active_id; }, sort() { //console.log(this.search.filter); this.search.filter == "b" ? this.wonders_data.sort(function(a, b) { return b.likes - a.likes; }) : this.wonders_data.sort(function(a, b) { return b.ratings - a.ratings; }); }, search_text() { //console.log(this.search.text); var inside = this; this.wonders_data = this.wonders_data_actual.filter(function(wonder) { if ( wonder.place .toLowerCase() .indexOf(inside.search.text.toLowerCase()) != "-1" ) { return wonder; } }); }, check_active(id) { var flag = false; this.wonders_data_actual.map(function(wonder) { if (wonder.id == id) { flag = wonder.active_like; } }); return flag; }, make_active(id) { this.likes.hit++; this.wonders_data_actual = this.wonders_data_actual.map(function(wonder) { if (wonder.id == id) { wonder.active_like = !wonder.active_like; wonder.active_like ? wonder.likes++ : wonder.likes--; } return wonder; }); var inside = this; inside.likes.count = 0; this.wonders_data_actual.map(function(wonder) { inside.likes.count += wonder.likes; }); } }, components: { Header } }; /* Styles are scoped to this component only.*/ /* Style for Desktop/Tablet */ .search-parent { display: flex; flex-flow: row wrap; justify-content: space-between; background-color: lightgray; } .card-inner { position: relative; overflow: hidden; box-shadow: 2px 2px 8px grey; } .card-img { width: 100%; } .card-bottom { position: absolute; bottom: 0; left: 0; height: 30px; width: 100%; background-color: white; opacity: 0.7; display: flex; justify-content: space-between; } .card-hover { position: absolute; right: 15px; left: 15px; top: 15px; bottom: 15px; background-color: white; opacity: 0.7; display: flex; flex-flow: column wrap; justify-content: center; align-items: center; } .absolute-star { position: absolute; top: 10px; right: 10px; } .card-hover p { font-size: 10px; text-align: center; } .bold { font-weight: 500; } .rating-div { width: 200px; } .search-bar { position: relative; } .search-bar input { padding-left: 30px; } .search-icon { position: absolute; top: 8px; left: 8px; } /* For Mobile Device, we will be going with column wrap approach */ @media screen and (max-width: 550px) { .search-parent { display: flex; flex-flow: column wrap; justify-content: center; align-items: center; background-color: lightgray; } .search-parent div { width: 100%; text-align: center; } }

Espero que comprenda mejor cómo comenzar con Vue y crear algo increíble.

Si te resultó útil, aplaude a continuación, da estrellas al repositorio del proyecto y compártelo con tus amigos también.