1.
< スクリプトタイプ= "テキスト/ JavaScriptを" > VAR Vueの新しい新しいVM =（{ EL： "#searchApp"、 データ：{ }、 コンポーネント：{ //トップローディングアセンブリ lyTop：（）=>インポート（ 」./ JS /pages/top.js「） } }）; </ スクリプト>
VUEは、この例では、別のJSをロード、インポートを導入することにより：部分的なコンポーネントとしてtop.js。トップは、実際にページナビゲーションコンポーネントの上で、私たちは関係ありません
（2）非同期要求
データ：{
検索：{
キー： ""、//キーワード検索ページ
}、
goodsList：[]
}、
私たちは、ページのロードパラメータ取得要求に、作成され、記録された機能をフック。
作成（）{
//リクエストパラメータが存在するか否かを判断する
IF（location.search！）{
リターン;
}
//ターゲットパラメータに要求
= ly.parse検索（location.search.substring（1））のconst;
//レコード検索対象のデータで
、this.search =検索
の検索条件に従って、//開始要求
; this.loadData（）
}
ブラウザでのテスト：
その後、要求、検索データを開始します。
CORSの設定クラスでleyouゲートウェイでは、信頼できる名前を許可する追加します。
そして、ゲートウェイマッピングleyouゲートウェイプロジェクトApplication.ymlを追加します。
テスト：
2.
-
要求モード：ポスト
-
要求パス：/検索/ページが、フロント/検索は、ページングクエリに代わって、ゲートウェイへのパス、したがって真のパスがマップされたページをマップする必要があります
-
パッケージlucky.leyou.domain; パブリック クラスSearchRequest { プライベートキー文字列; // 検索条件 プライベート整数ページ; // このページ プライベート 静的な 最終的な整数= 20はDEFAULT_SIZEであり; // ページから受信しないページサイズが、固定サイズ プライベート 静的な 最終的な整数、DEFAULT_PAGE、= 1; // デフォルトページ のパブリック文字列のgetKey（）{ 返すキー; } 公共 ボイドSETKEY（文字列キー）{ この .KEY = キー; } パブリックGETPAGE整数（）{ IF（ページ== nullの）{ リターン、DEFAULT_PAGE ,; } //はより小さくないページを、取得、いくつかのチェックを行います1。 リターンMath.max（、DEFAULT_PAGE ,,ページ）; } パブリック 無効setPageで（ページ整数）{ この = .PAGE ページ; } 公共の整数のgetSize（）{ リターンDEFAULT_SIZEの; } }
リターン結果：ページングの結果、一般的に二つの性質：現在のページのデータの前に定義され、情報の総数が、我々はPageResultクラスを使用することができます
パッケージlucky.leyou.controller。 輸入lucky.leyou.common.domain.PageResult。 輸入lucky.leyou.domain.Goods。 輸入lucky.leyou.domain.SearchRequest; 輸入lucky.leyou.service.SearchService。 輸入org.springframework.beans.factory.annotation.Autowired; 輸入org.springframework.http.HttpStatus。 輸入org.springframework.http.ResponseEntity。 輸入org.springframework.stereotype.Controller。 輸入org.springframework.web.bind.annotation.PostMapping。 輸入org.springframework.web.bind.annotation.RequestBody。 インポートorg.springframework.web.bind.annotation.RequestMapping; @Controller @RequestMapping パブリック クラスSearchController { @Autowired プライベートSearchService searchServiceを。 / ** *搜索商品 * * @paramの要求 * @return * / @PostMapping（ "ページ" ） 公共 ResponseEntity <PageResult <製品>> 検索（@RequestBody SearchRequestリクエスト）{ PageResult <グッズ>結果= この.searchService.search （要求）; もし（結果== nullを）{ 戻り 新しい > <ResponseEntityを（HttpStatus.NOT_FOUND）。 } 戻りResponseEntity.ok（結果）。 } }
（2）サービス
@Autowired プライベートGoodsRepository goodsRepository; 公共 PageResult <グッズ> 検索（SearchRequestリクエスト）{ 文字列のキー = request.getKey（）; // は直接リターンヌルが存在しない場合は、検索条件があるかどうかを判断します。許可されたすべての製品検索 IF （StringUtils.isBlank（キー））{ リターン ヌルを; } // カスタムクエリビルダコンストラクトクエリ NativeSearchQueryBuilder QueryBuilder = 新新NativeSearchQueryBuilder（）; // 1、フルテキスト検索キーのためのクエリ。 queryBuilder。 withQuery（QueryBuilders.matchQuery（ "すべて" 、キー）.operator（Operator.AND））; //2、sourceFilterによって提供される結果は、フィールドが返され、我々は唯一のID、SKUは、字幕必要 queryBuilder.withSourceFilter（新しい新しいFetchSourceFilter（ 新しい新しい文字列[] { "ID"、 "のSKU"、 "サブタイトル"}、ヌル;）） // 3。 、ページング // 準備ページング・パラメータは、 int型ページ= request.getPage（）; int型のサイズ= request.getSize（）; queryBuilder.withPageable（PageRequest.of（ページ - 1 、サイズ））; // 4、クエリは、結果を取得 ページ<グッズ> = PageInfo この.goodsRepository.search（queryBuilder.build（））; // パッケージと結果が返されます 戻る 新しい新しい PageResultを<>（pageInfo.getTotalElements（）、pageInfo.getTotalPages（）、pageInfo.getContent（））。 }
我々はSourceFilterを設定したい、返される結果を選択し、無駄なデータのそれ以外の束、クエリの効率に影響を与える：ポイントに注意してください。
（3）テスト
検索サービスのミクロを再起動し、ページのテストを更新します。
結果への応答をコピーします。
