Elasticsearch demo詳細
13904 ワード
機能リスト
一、spring bootで構築したバックエンドフレームワーク
二、ページはバックエンドでレンダリングされ、thymeleafテンプレートエンジンを使用している.
三、フロントエンドはangularJsを用いてデータビューの双方向バインディングを実現し、angularが持参したresourceモジュールでrestfulインタフェースを要求する
四、データを提出するページと関連インタフェースを提供する
五、多条件クエリーを提供したページと関連インタフェース
六、クエリー結果マッチングハイライト表示、ページングクエリーなどの機能を提供する
項目目次一覧
一、spring bootで構築したバックエンドフレームワーク
ideaはspring bootプロジェクトを作成するのに便利です.ここではあまり言いません.
二、ページはバックエンドでレンダリングされ、thymeleafテンプレートエンジンを使用している.
thymeleafテンプレートの導入、pox.xmlに次の依存を追加
ページタイプは.htmlファイル、htmlドキュメントのラベルに
三、フロントエンドはangularJsを用いてデータビューの双方向バインディングを実現し、angularが持参したresourceモジュールでrestfulインタフェースを要求する
ページレンダリングはサービス側にあるため、angular要求のテンプレートビューは対応する処理が必要であり、バックエンドcontrollerには次のコードが追加されます.
フロントエンド要求を示す2つの
四、データを提出するページと関連インタフェースを提供する
Angularのcontrollerには、次のコードが追加されています.
以上は、クエリーの初期化パラメータとページングに使用するパラメータです.ページの初期化時にデータがないため、次のページボタンは使用できません.クエリー条件を追加しない場合、デフォルトのパラメータはすべて空です.以下はhtmlページの内容です.
五、多条件クエリーを提供したページと関連インタフェース
4の内容は多条件クエリー関連です.
六、クエリー結果マッチングハイライト表示、ページングクエリーなどの機能を提供する
クエリ結果がハイライトされた部分コードに一致するのは、次のとおりです.
さあ、これだけ言ったら以下のプレゼンテーションをしましょう.
七、機能プレゼンテーション
elasticsearchクラスタを採用しているので、elasticsearchサーバを2台開きました.クラスタの詳細な構築は前の記事で詳しく紹介しました.私が今起動している2台のesサーバのipは、192.168.1.1.1113対応ノード名がnode-1192です.168.1.129対応ノード名はnode-2、masterノードはnode-1で、以下の図に示す.
私たちのプロジェクト内のes関連はアプリケーション-esに配置されています.ymlプロファイルでは、次のように詳細に構成されています.
プロジェクトを開始します.
以上、起動に成功したことを示し、トップページ:localhost:8180/esにアクセスします.
私たちはここでいくつかのデータを提出して、それからデータページのクエリーを検索することができます.ここで私はすでにいくつかのデータを提出して、直接クエリーに行きました.1、デフォルトの無条件クエリー:
クエリの結果は次のとおりです.
私たちのページングの次のページはクリックできることがわかります.返されるデータ量はちょうど私たちがデフォルトで要求したデータ量10本なので、次のページがあると思います.次のページのボタンをクリックすると、
このページに返されるデータ量は、私たちが要求した10個未満なので、これはもう最後のページだと思います.次のページのボタンは使用できません.2、「バスケットボールをする」が好きな「男子」を調べる条件があります.
「男子」を検索して、「ボール」が好きです.
以上elasticsearchのdemoプレゼンテーションとその説明です.ソースコードはgithubに入れました.ダウンロードすればテストして使用できます(あなたもelasticsearchをインストールして、クラスタではなくても使用できます)
ソースアドレス:https://github.com/Qbian61/elasticsearch-demo
一、spring bootで構築したバックエンドフレームワーク
二、ページはバックエンドでレンダリングされ、thymeleafテンプレートエンジンを使用している.
三、フロントエンドはangularJsを用いてデータビューの双方向バインディングを実現し、angularが持参したresourceモジュールでrestfulインタフェースを要求する
四、データを提出するページと関連インタフェースを提供する
五、多条件クエリーを提供したページと関連インタフェース
六、クエリー結果マッチングハイライト表示、ページングクエリーなどの機能を提供する
項目目次一覧
一、spring bootで構築したバックエンドフレームワーク
ideaはspring bootプロジェクトを作成するのに便利です.ここではあまり言いません.
二、ページはバックエンドでレンダリングされ、thymeleafテンプレートエンジンを使用している.
thymeleafテンプレートの導入、pox.xmlに次の依存を追加
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-thymeleafartifactId>
dependency>ページタイプは.htmlファイル、htmlドキュメントのラベルに
xmlns:th="http://www.thymeleaf.org"を追加します.以下に示します.<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">三、フロントエンドはangularJsを用いてデータビューの双方向バインディングを実現し、angularが持参したresourceモジュールでrestfulインタフェースを要求する
ページレンダリングはサービス側にあるため、angular要求のテンプレートビューは対応する処理が必要であり、バックエンドcontrollerには次のコードが追加されます.
@GetMapping(value = {"/fragments/add-data", "/fragments/search-data"})
public String indexIncludePage(HttpServletRequest request) {
String path = request.getServletPath();
return path.substring(0, path.length() - 5);
}フロントエンド要求を示す2つの
/fragments/add-data,/fragments/search-dataビューは、サービス側でレンダリングされた後、フロントエンド呼び出し者に返される.angularのresourceモジュールのrestfulスタイルインタフェース呼び出しは、次のとおりです./** Person */
.factory('Person', function ($resource) {
var ctx = window.qbian._ctx;
return $resource(ctx + '/person', {}, {
submit: {
method: 'POST' ,
url: ctx + '/person' ,
params : {
name: '@name' ,
sex : '@sex' ,
interest : '@interest'
}
} ,
query: {
method: 'GET' ,
url: ctx + '/person/search' ,
params : {
pageNo: '@pageNo',
pageSize: '@pageSize' ,
sex: '@sex' ,
name: '@name' ,
interest: '@interest'
}
}
});
})四、データを提出するページと関連インタフェースを提供する
Angularのcontrollerには、次のコードが追加されています.
$scope.initPageSize = 9; // 10，
$scope.personV = {
name : '',
sex : '',
interest : '',
pageNo : 1
};以上は、クエリーの初期化パラメータとページングに使用するパラメータです.ページの初期化時にデータがないため、次のページボタンは使用できません.クエリー条件を追加しない場合、デフォルトのパラメータはすべて空です.以下はhtmlページの内容です.
<input ng-model="personV.name" type="text" class="form-control" placeholder="Name" />
<select ng-model="personV.sex" class="form-control" id="sex">
<option> option>
<option> option>
select>
<input ng-model="personV.interest" type="text" class="form-control" placeholder="Interest" />
<ul class="pager">
<li><button ng-disabled="personV.pageNo < 2" ng-click="prevPage()" type="button" class="btn btn-sm btn-default"> button>li>
<span> （<span style="color: #00be67;font-weight: 600;" ng-bind="personV.pageNo">span>） span>
<li><button ng-disabled="initPageSize < 10" ng-click="nextPage()" type="button" class="btn btn-sm btn-default"> button>li>
ul>五、多条件クエリーを提供したページと関連インタフェース
4の内容は多条件クエリー関連です.
六、クエリー結果マッチングハイライト表示、ページングクエリーなどの機能を提供する
クエリ結果がハイライトされた部分コードに一致するのは、次のとおりです.
/**
*
* @param queryBuilder
* @param type
* @param highlightFieldList
* @param pageNo
* @param pageSize
* @return
*/
public JSONArray searchHighlight(QueryBuilder queryBuilder, String type, List highlightFieldList
, int pageNo, int pageSize) {
StopWatch clock = new StopWatch();
clock.start();
//
HighlightBuilder highlightBuilder = new HighlightBuilder().requireFieldMatch(true);
if(highlightFieldList != null) {
for(String field : highlightFieldList) {
highlightBuilder.field(field, 10240);
}
}
/** */
highlightBuilder.preTags("");
highlightBuilder.postTags("");
SearchResponse searchResponse = client.prepareSearch(INDEX_TYPE).setTypes(type)
.setQuery(queryBuilder).highlighter(highlightBuilder)
.addSort("date", SortOrder.DESC)
.setFrom(pageNo * pageSize).setSize(pageSize)
.setExplain(true).execute().actionGet();
SearchHit[] hits = searchResponse.getHits().getHits();
clock.stop();
LOG.info("searchHighlight: {} ms", clock.getTotalTimeMillis());
//
JSONArray result = new JSONArray();
if(hits != null && hits.length > 0) {
for(SearchHit hit : hits) {
Map highlightFields = hit.getHighlightFields();
JSONObject data = new JSONObject();
for(Entry entry : hit.getSource().entrySet()) {
//
if(highlightFields != null && highlightFields.containsKey(entry.getKey())) {
HighlightField titleField = highlightFields.get(entry.getKey());
Text[] fragments = titleField.fragments();
StringBuilder sb = new StringBuilder();
for(Text text : fragments) {
sb.append(text);
}
data.put(entry.getKey(), sb.toString());
} else {
data.put(entry.getKey(), entry.getValue());
}
}
result.add(data);
}
}
return result;
} さあ、これだけ言ったら以下のプレゼンテーションをしましょう.
七、機能プレゼンテーション
elasticsearchクラスタを採用しているので、elasticsearchサーバを2台開きました.クラスタの詳細な構築は前の記事で詳しく紹介しました.私が今起動している2台のesサーバのipは、192.168.1.1.1113対応ノード名がnode-1192です.168.1.129対応ノード名はnode-2、masterノードはnode-1で、以下の図に示す.
私たちのプロジェクト内のes関連はアプリケーション-esに配置されています.ymlプロファイルでは、次のように詳細に構成されています.
#=========================================
#================= elasticSearch config
#=========================================
es:
ips: 192.168.1.113,192.168.1.129
port: 9300
cluster: testプロジェクトを開始します.
以上、起動に成功したことを示し、トップページ:localhost:8180/esにアクセスします.
私たちはここでいくつかのデータを提出して、それからデータページのクエリーを検索することができます.ここで私はすでにいくつかのデータを提出して、直接クエリーに行きました.1、デフォルトの無条件クエリー:
クエリの結果は次のとおりです.
私たちのページングの次のページはクリックできることがわかります.返されるデータ量はちょうど私たちがデフォルトで要求したデータ量10本なので、次のページがあると思います.次のページのボタンをクリックすると、
このページに返されるデータ量は、私たちが要求した10個未満なので、これはもう最後のページだと思います.次のページのボタンは使用できません.2、「バスケットボールをする」が好きな「男子」を調べる条件があります.
「男子」を検索して、「ボール」が好きです.
以上elasticsearchのdemoプレゼンテーションとその説明です.ソースコードはgithubに入れました.ダウンロードすればテストして使用できます(あなたもelasticsearchをインストールして、クラスタではなくても使用できます)
ソースアドレス:https://github.com/Qbian61/elasticsearch-demo