这篇文章主要介绍“elasticsearch的site插件怎么使用”，在日常操作中，相信很多人在elasticsearch的site插件怎么使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”elasticsearch的site插件怎么使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
现在我们用 bootstrap+angularJs 来写一个简单的页面，一个site插件，它通过我们前面开发的translogRest插件访问操作日志，并且展示。
<!doctype html>
<html ng-app='app' ng-controller="translogCtrl">
<head>
<script src="lib/angular.js"></script>
<link rel="stylesheet" type="text/css" href="lib/Pretty-JSON/pretty_json.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="lib/Pretty-JSON/pretty_json.js" type="text/javascript"></script>
<script src="translog.js"></script>
</head>
<body>
<nav class="navbar navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">操作日志</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">创建</a></li>
<li><a href="#">保存</a></li>
<li><a href="#">删除</a></li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" ng-model="file" class="form-control" placeholder="日志路径">
<button type="button" class="btn btn-primary " ng-click="getData()">查看</button>
</div>
</form>
</div>
</div>
</nav>
<table class="table table-hover">
<thead>
<tr>
<th>操作类型</th>
<th>版本</th>
<th>类型</th>
<th>路由</th>
<th>父类</th>
<th>TTL</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in itemList">
<td><span class="label label-primary">{{item.opType}}</span></td>
<td><span class="badge">{{item.version}}</span></td>
<td>{{item.type}}</td>
<td>{{item.routing}}</td>
<td>{{item.parent}}</td>
<td>{{item.ttl}}</td>
<td>{{item.timestamp | date:'yyyy-MM-dd HH:mm'}}</td>
<td>
<button type="button" class="btn btn-success" ng-click="view($index)">查看</button>
</td>
</tr>
</tbody>
</table>
<div class="modal fade" id="editPanel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h5 class="modal-title">ID:{{editItem.id}}</h5>
</div>
<div class="modal-body">
<div id="prettyJson"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
</body>
</html>var module = angular.module('app', []);
function translogCtrl($scope, $http) {
$scope.getData = function() {
var file = $scope.file;
$http.get('http://localhost:9200/_translog', {
params : {
file : file,
size : 12
}
}).success(function(data, status, headers, config) {
$scope.itemList = data;
$scope.view = function(id) {
var item = $scope.itemList[id];
$scope.editItem = item;
try {
$('#prettyJson').html( pretty.parse (eval("(" + item.source + ")")));
}
catch (error) {
$('#prettyJson').html(pretty.error (error));
}
$('#editPanel').modal('show');
}
}).error(function(data, status, headers, config) {
console.info(data);
});
}
}然后我们复制应用到 plugins\translogView\_site 下面就可以了。我们也可以补充插件描述文件_site\es-plugin.properties
description=view translog
浏览器里输入
http://localhost:9200/_nodes?all=true
可以看到我们的插件已经安装成功，描述信息也有了。
到此，关于“elasticsearch的site插件怎么使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注天达云网站，小编会继续努力为大家带来更多实用的文章！