Search services build 033 micro 02 ---- basic search function

1. page analysis

(1) page jump

At the top of the home page, there is an input box:

 

When we enter any text, click on the search, it will jump to the search page search.htmlof:

And to request a search key parameters carry over:

 

We open search.html, there will be defined in advance in the bottom Vue example:

< Script type = "text / JavaScript" > 
    var Vue new new VM = ({ 
        EL: "#searchApp", 
        Data: { 
        }, 
        Components: { 
            // Top loading assembly 
            lyTop: () => import ( "./ js /pages/top.js ") 
        } 
    }); 
</ Script >

Vue this example, by way of introducing import, loading another js: top.js as a partial component. top is actually top of the page navigation component, we do matter

(2) asynchronous request

To after the page is loaded, it is to show the search results. We should when the page loads, access to the address bar request parameters, and initiate an asynchronous request, the query back-end data, and then render the page.

We define a data object, the recording parameter request:

Data: { 
    Search: { 
        Key: "", // keyword search page 
    }, 
    goodsList: [] 
},

We hook function created, on page load parameter acquisition request, and recorded.

Created () { 
    // determines whether there is a request parameter 
    IF (location.search!) { 
        return; 
    } 
    // the request into target parameter 
    const = ly.parse Search (location.search.substring (. 1)); 
    // record in the search target data in 
    this.search = search; 
    
    // initiation request, according to search conditions 
    this.loadData (); 
}

Testing in the browser:

Then initiate a request, the search data.

• Here we use lya tool common.js objects defined.

• Used herein is a post request, which can carry more parameters, and transmits the format to json

In leyou-gateway in the CORS configuration class, add allow trusted name:

And add a gateway mapping leyou-gateway project Application.yml in:

 

test:

2. Background provides a search interface

(1)controller

 

Firstly, a few questions:

 

• Request mode: Post

• Request path: / search / page, but front / search should be mapped path to the gateway, and therefore the true path mapped page, on behalf of paging query

• Request parameters: json format, there is only one attribute: key- keyword search, but the search results page must be paged with the query, so the future will certainly be a page property, so we can use a json object to receive the requested data:

SearchRequest.java

Package lucky.leyou.domain; 

public  class the SearchRequest {
     Private String Key; // search condition 

    Private Integer Page; // this page 

    Private  static  Final Integer = 20 is of DEFAULT_SIZE; // page size does not receive from the page, but a fixed size 
    Private  static  Final Integer, DEFAULT_PAGE, =. 1; // default page 

    public String getKey () {
         return Key; 
    } 

    public  void setKey (String Key) {
         the this .key = Key; 
    } 

    publicThe getPage Integer () {
         IF (Page == null ) {
             return , DEFAULT_PAGE,; 
        } 
        // do some checking getting page, not less than. 1 
        return Math.max (, DEFAULT_PAGE,, Page); 
    } 

    public  void the setPage (Page Integer) {
         the this = .page Page; 
    } 

    public Integer getSize () {
         return of DEFAULT_SIZE; 
    } 
}

Return result: As a result of paging, generally two properties: defined before the current page data, the total number of pieces of information, we can use PageResult class

 

SearchController.java

 

package lucky.leyou.controller;

import lucky.leyou.common.domain.PageResult;
import lucky.leyou.domain.Goods;
import lucky.leyou.domain.SearchRequest;
import lucky.leyou.service.SearchService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping
public class SearchController {

    @Autowired
    private SearchService searchService;

    /**
     * 搜索商品
     *
     * @param request
     * @return
     */
    @PostMapping("page")
    public ResponseEntity<PageResult<Goods>> search(@RequestBody SearchRequest request) {
        PageResult<Goods> result = this.searchService.search(request);
        if (result == null) {
            return new ResponseEntity<>(HttpStatus.NOT_FOUND);
        }
        return ResponseEntity.ok(result);
    }
}

 

(2)service

@Autowired
 Private GoodsRepository goodsRepository; 

public PageResult <Goods> Search (the SearchRequest Request) { 
        String Key = request.getKey ();
         // determine whether there is a search condition, if there is no direct return null. Search all products allowed 
        IF (StringUtils.isBlank (key)) {
             return  null ; 
        } 

        // custom query builder construct query 
        NativeSearchQueryBuilder QueryBuilder = new new NativeSearchQueryBuilder (); 

        // . 1, a query for full-text search key 
        queryBuilder. withQuery (QueryBuilders.matchQuery ( "All" , Key) .operator (Operator.AND)); 

        //2, the results provided by sourceFilter returned fields, we only need ID, SKUs, subTitle 
        queryBuilder.withSourceFilter ( new new FetchSourceFilter (
                 new new String [] { "ID", "SKUs", "subTitle"}, null )); 

        // . 3 , paging
         // prepare paging parameters 
        int Page = request.getPage ();
         int size = request.getSize (); 
        queryBuilder.withPageable (PageRequest.of (Page - 1 , size)); 

        // 4, query, get the results of 
        Page <Goods> = PageInfo the this .goodsRepository.search (queryBuilder.build ()); 

        // package and returns the result 
        return  new new PageResult <>(pageInfo.getTotalElements (), pageInfo.getTotalPages (), pageInfo.getContent ()); 
    }

Note the point: we want to set SourceFilter, select the result to be returned, otherwise a bunch of useless data, affect the query efficiency.

(3) Testing

Restart the search service micro, refresh the page testing:

Copy the response to the results: