Hogyan állítsuk be az adaptív felhasználói felület keresését a Vue.js fájlban

Szeretne valami fantasztikus dolgot felépíteni az egyik legnépszerűbb modern keretrendszerrel, de nem tudja, hogyan kezdjen hozzá?

Ha igen, akkor ez a bejegyzés segít elindulni és felépíteni valami fantasztikus dolgot.

Mit fogunk építeni?

Reagálóképes ügyféloldali keresést fogunk építeni a világ 7 csodájára, a következő tulajdonságokkal:

  1. Szöveges keresés és szűrők értékelések és lájkok alapján.
  2. 2 elem soronként táblagéphez és asztali számítógéphez , 1 tétel soronként mobilhoz .
  3. Az adatok aszinkron módon történő lekérése az ügyféloldali külső API-ból.
  4. Reagens nézet az alábbiak szerint:

Élő bemutató : //vue-responsive-search.herokuapp.com

Forráskód : //github.com/honey93/VueSearchExample

Technikai építészet

A következő technológiákkal fogunk dolgozni:

  1. Vue.js : A Progressive JavaScript Framework
  2. BootstrapVue : A Bootstrap V4 komponensek és rácsrendszerek egyik legátfogóbb megvalósítását biztosítja a Vue.js 2.5+ verzióhoz, kiterjedt és automatizált WAI-ARIA akadálymentességi jelöléssel kiegészítve.
  3. Vue Cli 3 : Standard eszközök a Vue.js fejlesztéshez

Projekt felépítése

A Vue projekt megkezdéséhez sok mindent be kell állítanunk, például Vue, Bootstrap, Vue Router, Vuex stb.

A Vue Client parancsot ad a projekt létrehozására a legtöbb szükséges konfigurációval.

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

A többi dologhoz, például a BootstrapVue, a vue-star-rating stb., Használhatjuk az npm install parancsot.

A vuecli használatával létrehozott alapértelmezett projekt a következő felépítésű:

/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. */ ......

A fenti dolgok azért vannak, hogy elmagyarázzák Önnek a projekt architektúráját és annak inicializálásának módját.

Kezdhetjük azzal, ha klónozzuk az adattárat, és megírjuk a következő parancsokat:

npm install npm run serve 

Néhány fontos elem magyarázata:

components / Header.vue

A fejléc egyetlen független összetevő formájában jött létre, hogy az újra felhasználható legyen az oldalakon, elkerülve a kód megkettőzését.

/* 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; } 

alkatrészek / Main.vue

Ez az összetevő a keresés / szűrők teljes logikájából és az API-ból letöltött eredmények megjelenítéséből áll.

Ez az összetevő a fenti fejlécet használja az importálásával a szkriptbe.

 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; } }

Remélem, jobban megérti, hogyan kezdje el a Vue-t, és hogyan hozzon létre valami fantasztikus dolgot.

Ha hasznosnak találta, tapsoljon alább, adjon csillagokat a projekt repójának, és ossza meg barátaival is.