Lecture 4 Retrieval Model – Front-end Development -Vue Basic edition

1, review

In the basic version of Vue, we have developed the search function of the home page and the news recommendation function. The next step is to improve the search function. The original search function only contains fuzzy query, so we need to add two more search modes: Full-text index and custom word segmentation query, which is divided into TFIDF and Bayes query, also need to provide the lift sort option, of course, we also need to develop the page function, OK, next to do ~

2. Improve the home page

1. Develop search options

Open index.html and add the code to set the search options between the search box and the search result information

<! -- Search options Settings -->
<div class="search-options">
 <span>Search mode:</span>
 <label for="fuzzy">
  <input type="radio" v-model="searchMode" id="fuzzy" value="fuzzy">Fuzzy query</label>
 <label for="fulltext">
  <input type="radio" v-model="searchMode" id="fulltext" value="fulltext">The full text indexing</label>
 <label for="custom">
  <input type="radio" v-model="searchMode" id="custom" value="custom" >Custom query</label>
</div>
<div class="search-options">
 <span>Sort field:</span>
 <label for="tfidf">
  <input type="radio" v-model="orderBy" id="tfidf" value="tfidf">tfidf
 </label>
 <label for="bayes">
  <input type="radio" v-model="orderBy" id="bayes" value="bayes">bayes
 </label>
</div>
<div class="search-options">
 <span>Search results sorted by:</span>
 <label for="asc">
  <input type="radio" v-model="order" id="asc" value="asc">ascending</label>
 <label for="desc">
  <input type="radio" v-model="order" id="desc" value="desc" checked>Descending order</label>
</div>
Copy the code

Style:

.search-options {
  padding: 0 15px;
  margin-bottom: 5px;
  font-size: 14px;
}
Copy the code

Then several search options are bound to V-modal and need to add fields in data:

data: {
  searchMode: 'custom'.orderBy: 'tfidf'.order: 'desc',}Copy the code

Add a back-end interface mapping table:

searchUrl: {
  // Fuzzy query
  fuzzy: 'http://localhost:8080/demo/article-fuzzy'.// Full-text index
  fulltext: 'http://localhost:8080/demo/article-fulltext'.// Custom participles
  custom: 'http://localhost:8080/demo/article-custom'
}
Copy the code

The code that sends the request needs to be modified. The first is to write the path dead to get the corresponding path according to the search pattern, and the second is to add the search parameters

axios.get(this.searchUrl[this.searchMode], {
  params: {
    word: this.keyWord,
    pageNumber: 1.pageSize: 10.orderBy: this.orderBy,
    order: this.order
  }
}).
Copy the code

Effect:

2. Develop paging

Paging is a little bit more complicated, but I’ve already provided it

Create paging. CSS: Then the page is introduced

.page {
  margin: 20px 15px;
}

.page > * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.page-list span {
  color: rgba(51.51.51.1);
}

.page-list .jump {
  display: inline-block;
  text-align: center;
  cursor: pointer;
  margin-left: 10px;
  padding: 0 10px;
  min-width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  background: rgba(204.204.204.0.3);
}

.page-list .first {
  margin-left: 0;
}

.page-list .first..page-list .last{
  width: 70px;
}

.page-list .active {
  cursor: default;
  color: #fff;
  background: #409EFF;
}

.ellipsis {
  padding: 0 8px;
  text-align: center;
  cursor: pointer;
  margin-left: 10px;
  width: 40px;
  height: 40px;
  background: rgba(204.204.204.0);
  border-radius: 6px;
}

.page-list .jump.disabled {
  pointer-events: none;
  color: rgba(153.153.153.1);
}

.page-list .jump.disabled:hover {
  cursor: not-allowed;
}

.jump-point {
  margin-left: 30px;
}

.page-list .go-btn {
  font-size: 18px;
}

.pageNum {
  display: inline-block;
  height: 28px;
  font-size: 16px;
  font-weight: 400;
  color: rgba(102.102.102.1);
  line-height: 28px;
}
Copy the code

Paging structure:

<! - page - >
<div class="page" v-show="showPaging">
 <div class="page-list">
  <span class="jump first" :class="{disabled:starts}" @click="currentPage--; jumpPage(currentPage)">The previous page</span>
  <span v-show="currentPage > 5" class="jump" @click="jumpPage(1)">1</span>
  <span class="ellipsis" v-show="front">.</span>
  <span class="jump" v-for="num in indexes" :class="{'active': currentPage === num}"
        @click="jumpPage(num)">{{num}}</span>
  <span class="ellipsis" v-show="behind">.</span>
  <span v-show="currentPage < pages - 4" class="jump" @click="jumpPage(pages)">{{pages}}</span>
  <span :class="{disabled:ends}" class="jump last" @click="currentPage++; jumpPage(currentPage)">The next page</span>
 </div>
</div>
Copy the code

Logic:

data: {
  currentPage: 1./ / the current page
  pages: 10./ / the total number of pages
	showPaging: true // Whether to display paging
},
computed: {
  / /... Whether to disable the previous page
  show: function () {
    return this.pages && this.pages ! = =1
  },
  // Go to the first page
  starts: function () {
    return this.currentPage === 1;
  },
  // Skip to the last page
  ends: function () {
    return this.currentPage === this.pages;
  },
  //
  front: function () {
    if (this.pages <= 7) return false;
    return this.currentPage > 5
  },
  // Whether it is greater than 7
  behind: function () {
    if (this.pages <= 7) return false;
    let nowAy = this.indexes;
    return nowAy[nowAy.length - 1]! = =this.pages;
  },
  indexes: function () {
    let left = 1,
      right = this.pages,
      ar = [];
    if (this.pages >= 7) {
      if (this.currentPage > 5 && this.currentPage < this.pages - 4) {
        left = Number(this.currentPage) - 2;
        right = Number(this.currentPage) + 2;
      } else {
        if (this.currentPage <= 5) {
          left = 1;
          right = 7;
        } else {
          right = this.pages;
          left = this.pages - 6; }}}while (left <= right) {
      ar.push(left);
      left++;
    }
    returnar; }},methods: {
  jumpPage: function (id) {
    console.log(id)
    this.currentPage = id; }},Copy the code

Effect:

However, we should hide it by default, so showPaging should be false by default

Then in the callback function that gets the result:

axios.get(this.searchUrl[this.searchMode], {
  params: {
    word: this.keyWord,
    pageNumber: 1.pageSize: 10.orderBy: this.orderBy,
    order: this.order
  }
}).then(res= > {
  this.searchResultList = res.data.list
  this.tips.word = this.keyWord
  this.tips.duration = res.data.duration
  this.tips.size = res.data.size
  this.pages = res.data.pages // Give paged replication
  modal.hide();
}).catch(() = > {
  modal.hide();
})
Copy the code

Effect:

Then click to query and change the jumpPage method and the pageNumber in the request parameter:

jumpPage: function (id) {
  this.currentPage = id; // Get the click page number and assign it to the current page number
  this.onSearch(); // Call the search
},
onSearch() {
  if (this.keyWord.trim() === "") {
    return alert('Input cannot be empty or blank.')
  }
  modal.show();
  axios.get(this.searchUrl[this.searchMode], {
    params: {
      word: this.keyWord,
      pageNumber: this.currentPage, // The page number is the page number of the click
      pageSize: 10.orderBy: this.orderBy,
      order: this.order
    }
  }).then(res= > {
    this.searchResultList = res.data.list
    this.tips.word = this.keyWord
    this.tips.duration = res.data.duration
    this.tips.size = res.data.size
    this.pages = res.data.pages
    modal.hide();
  }).catch(() = >{ modal.hide(); })},Copy the code

Effect:

But now there is a problem, after changing keywords or search options, click search, the page number does not reset back to 1, the problem isjqueryThe solution is to store the options for this search and compare them before the next search. If any of them change, reset the page number

data:

oldSearchOptions: {
  keyWord: ' '.searchMode: ' '.orderBy: ' '.order: ' ',}Copy the code

methods:

// Determine whether search options and keywords have changed
isSearchOptionsChange() {
  return this.keyWord ! = =this.oldSearchOptions.keyWord
  || this.searchMode ! = =this.oldSearchOptions.searchMode
  || this.orderBy ! = =this.oldSearchOptions.orderBy
  || this.order ! = =this.oldSearchOptions.order;
},
onSearch() {
  if (this.keyWord.trim() === "") {
    return alert('Input cannot be empty or blank.')
  }
  modal.show();
  // Resets the page number if the search option changes
  if(this.isSearchOptionsChange()) {
    this.currentPage = 1;
  }
  axios.get(this.searchUrl[this.searchMode], {
    params: {
      word: this.keyWord,
      pageNumber: this.currentPage,
      pageSize: 10.orderBy: this.orderBy,
      order: this.order
    }
  }).then(res= > {
    this.searchResultList = res.data.list
    this.tips.word = this.keyWord
    this.tips.duration = res.data.duration
    this.tips.size = res.data.size
    this.pages = res.data.pages
    // Save the search options for the next comparison
    this.oldSearchOptions = {
      keyWord: this.keyWord,
      searchMode: this.searchMode,
      orderBy: this.orderBy,
      order: this.order,
    }
    modal.hide();
  }).catch(() = >{ modal.hide(); })},Copy the code

Then OK ~