Πώς να ρυθμίσετε την αποκριτική αναζήτηση διεπαφής χρήστη στο Vue.js

Σκέφτεστε να δημιουργήσετε κάτι φοβερό με ένα από τα δημοφιλή σύγχρονα πλαίσια εκεί έξω αυτήν τη στιγμή, αλλά δεν ξέρετε πώς να ξεκινήσετε;

Εάν ναι, τότε αυτή η ανάρτηση θα σας βοηθήσει να ξεκινήσετε ένα λάκτισμα και να δημιουργήσετε κάτι φοβερό.

Τι πρόκειται να οικοδομήσουμε;

Θα οικοδομήσουμε μια αποκριτική αναζήτηση από πλευράς πελατών για τα 7 θαύματα του κόσμου με τα ακόλουθα χαρακτηριστικά:

  1. Αναζήτηση κειμένου και φίλτρα με βάση βαθμολογίες και επισημάνσεις "μου αρέσει"
  2. 2 στοιχεία ανά σειρά για Tablet και Desktop , 1 στοιχείο ανά σειρά για κινητά .
  3. Ανάκτηση δεδομένων ασύγχρονα από εξωτερικό API από την πλευρά του πελάτη.
  4. Αποκριτική προβολή όπως φαίνεται παρακάτω:

Ζωντανή επίδειξη : //vue-responsive-search.herokuapp.com

Πηγαίος κώδικας : //github.com/honey93/VueSearchExample

Τεχνική Αρχιτεκτονική

Θα εργαστούμε με τις ακόλουθες τεχνολογίες:

  1. Vue.js : Το Progressive JavaScript Framework
  2. BootstrapVue : Παρέχει μία από τις πιο ολοκληρωμένες υλοποιήσεις των εξαρτημάτων Bootstrap V4 και του συστήματος πλέγματος που διατίθενται για το Vue.js 2.5+, με εκτεταμένη και αυτοματοποιημένη σήμανση προσβασιμότητας WAI-ARIA.
  3. Vue Cli 3 : Πρότυπο εργαλείο για την ανάπτυξη του Vue.js

Δομή έργου

Για να ξεκινήσουμε με το έργο Vue, πρέπει να ρυθμίσουμε πολλά πράγματα όπως Vue, Bootstrap, Vue Router, Vuex κ.λπ.

Το Vue Cli μας δίνει την εντολή να δημιουργήσουμε το έργο με τις περισσότερες από τις απαιτούμενες διαμορφώσεις.

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

Για τα υπόλοιπα πράγματα όπως το BootstrapVue, το vue-star-rating κ.λπ., μπορούμε να χρησιμοποιήσουμε την εντολή εγκατάστασης npm.

Το προεπιλεγμένο έργο που δημιουργήθηκε χρησιμοποιώντας το vuecli έχει την ακόλουθη δομή:

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

Τα παραπάνω πράγματα είναι εκεί για να σας εξηγήσουν την αρχιτεκτονική του έργου και τον τρόπο αρχικοποίησής του.

Μπορούμε να ξεκινήσουμε κλωνοποιώντας το αποθετήριο και γράφοντας τις ακόλουθες εντολές:

npm install npm run serve 

Μερικά σημαντικά στοιχεία εξήγησαν:

Στοιχεία / Header.vue

Η κεφαλίδα έχει δημιουργηθεί με τη μορφή ενός ανεξάρτητου στοιχείου έτσι ώστε να μπορεί να επαναχρησιμοποιηθεί σε όλες τις σελίδες, αποφεύγοντας την επανάληψη του κώδικα.

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

Στοιχεία / Main.vue

Αυτό το στοιχείο αποτελείται από ολόκληρη τη λογική της αναζήτησης / φίλτρων και της εμφάνισης των αποτελεσμάτων που λαμβάνονται από το API.

Αυτό το στοιχείο χρησιμοποιεί την παραπάνω κεφαλίδα εισάγοντας το στο σενάριο.

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

Ελπίζω να έχετε καλύτερη κατανόηση για το πώς να ξεκινήσετε με το Vue και να δημιουργήσετε κάτι φοβερό.

Εάν το βρήκατε αυτό χρήσιμο, χτυπήστε παρακάτω, δώστε αστέρια στο ρεπό του έργου και μοιραστείτε και με τους φίλους σας.