כיצד להגדיר חיפוש ממשק משתמש רספונסיבי ב- Vue.js

האם אתה חושב לבנות משהו מדהים עם אחת המסגרות המודרניות הפופולריות הקיימות כרגע, אבל לא יודע איך להתחיל?

אם כן, פוסט זה יעזור לך להתחיל בעיטה ולבנות משהו מדהים.

מה אנחנו הולכים לבנות?

אנו נבנה חיפוש צד לקוח רספונסיבי של 7 פלאי תבל עם התכונות הבאות:

  1. חיפוש טקסט & מסנני סמך דירוגים ו'אהבתי.
  2. 2 פריטים בכל שורה עבור Tablet ו Desktop , 1 פריט לשורה עבור נייד .
  3. אחזור נתונים באופן אסינכרוני מממשק API חיצוני בצד הלקוח.
  4. מבט רספונסיבי כמוצג להלן:

הדגמה חיה : //vue-responsive-search.herokuapp.com

קוד מקור : //github.com/honey93/VueSearchExample

אדריכלות טק

אנו נעבוד עם הטכנולוגיות הבאות:

  1. Vue.js : מסגרת ה- JavaScript המתקדמת
  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, דירוג כוכבים, וכו ', אנו יכולים להשתמש בפקודה להתקין npm.

פרויקט ברירת המחדל שנוצר באמצעות ווקלי הוא בעל המבנה הבא:

/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 וליצור משהו מדהים.

אם מצאת את זה מועיל, מחיאת מתחת, לתת לכוכבים לפרויקט ריפו ולשתף עם חברים שלך מדי.