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

1, review

In the advanced version of Vue, we have developed the homepage search function and news recommendation function. The next step is to improve the search function. The original search function only contains fuzzy queries, 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

First, create a new JkPaging plug-in under Components. Of course, you can use it directly. This is extracted and modified according to Vue basic version

<template>
<! - page - >
<div class="page" v-show="showPaging">
  <div class="page-list">
    <span class="jump first" :class="{disabled:starts}" @click="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="jumpPage(++currentPage)">The next page</span>
  </div>
  </div>
</template>

<script>
  export default {
    name: "JkPaging".props: {
      currentPage: { / / the current page
        type: Number.default: 1
      },
      pages: { / / the total number of pages
        type: Number.default: 10
      },
      showPaging: { // Whether to display paging
        type: Boolean.default: false}},computed: {
      // 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) {
        this.$emit('jump-page', id)
      },
    }
  }
</script>

<style scoped>
  .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;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    background: rgba(204.204.204.0.3);
  }

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

  .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;
  }
</style>
Copy the code

Then import it at the corresponding location on the page

<! - page - >
<jk-paging :show-paging="showPaging" :current-page="currentPage" :pages="pages" @jump-page="jumpPage"/>
Copy the code

Then add a variable to data:

data: {
  showPaging: true.currentPage: 1.pages: 10
}
Copy the code

Add method to change page number:

jumpPage(id) {
  this.currentPage = id;
},
Copy the code

Effect:

By default, of course, showPaging is to be hidden, so by default, showPaging should be false

Then in the callback function that gets the result:

this.$axios.get(this.searchUrl[this.searchMode], {
  params: {
    word: this.keyWord,
    pageNumber: 1.pageSize: 10.orderBy: this.orderBy,
    order: this.order
  }
}).then(res= > {
  // Search results list assignment
  this.searchResultList = res.data.list
  // Search result information assignment
  this.tips.word = this.keyWord
  this.tips.duration = res.data.duration
  this.tips.size = res.data.size
  this.pages = res.data.pages // Assign a value to the page
  this.isSearching = false
  this.showPaging = res.data.pages ! = =1 // Whether to display paging
}).catch(() = > {
  this.isSearching = false
})
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.')}this.isSearching = true
  this.$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= > {
    // Search results list assignment
    this.searchResultList = res.data.list
    // Search result information assignment
    this.tips.word = this.keyWord
    this.tips.duration = res.data.duration
    this.tips.size = res.data.size
    this.pages = res.data.pages
    this.showPaging = res.data.pages ! = =1
    this.isSearching = false
  }).catch(() = > {
    this.isSearching = false})},Copy the code

Effect:

But now I have a question, is the replacement of keywords or search options, click search, and the page number didn’t reset back to 1, the problem also talked about in jquery version, so the solution is to store the search options, and then compare the can, until the next search if any 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.')}this.isSearching = true
  // Resets the page number if the search option changes
  if(this.isSearchOptionsChange()) {
    this.currentPage = 1;
  }
  this.$axios.get(this.searchUrl[this.searchMode], {
    params: {
      word: this.keyWord,
      pageNumber: this.currentPage,
      pageSize: 10.orderBy: this.orderBy,
      order: this.order
    }
  }).then(res= > {
    // Search results list assignment
    this.searchResultList = res.data.list
    // Search result information assignment
    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,
    }
    this.showPaging = res.data.pages ! = =1
    this.isSearching = false
  }).catch(() = > {
    this.isSearching = false})},Copy the code

Then OK ~