内容简介：ES搜索服务搭建好，怎么再配一个界面呢？一个技术有时候不太好形容，那就剩下优雅这个词了，今天我们聊聊怎么使用React框架，构建一个ES的搜索界面，对看着要高大上点呦！那用什么工具呢？今天我们就介绍一个Github上面，3800颗星的searchkit项目，为啥选它？嘿嘿，你猜呢...
美国USGS对全球地震事件后的信息服务叫Eventpage，通过eventpage可以查找到每一个地震的各种参数信息，包括可能诱发的各种灾害风险，为美国政府灾后响应和决策提供了重要科技支撑（如图1）。
那么，我们本套教材讨论了这么多的技术，前面还介绍了怎么把目录数据放到ES库里面，前端除了可视化，是否能实现类似Eventpage这种检索界面？是否能手动搭建一个类似的目录搜索服务呢？
如果你也有这个想法，但不知道技术上怎么实现，别急往下看。
1、连接ES
SearchKit作为ES数据库的前端界面技术，基于React设计，提供给用户常用的搜索界面。关于该库的详细信息可参考：https://github.com/searchkit
在配置好Node环境后，通过以下代码可以测试是否连接ES成功
const host = "http://10.2.14.251:9200/ispec/"
const searchkit = new SearchkitManager(host, {
httpHeaders:{'Content-Type': 'application/json', 'Authorization':'Basic ' + btoa('elastic:******')},
basicAuth:"elastic:******",
withCredentials: 'True'
})
2、定制React代码
React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。React是基于Javascript，以声明式编写 UI，可以让你的代码更加可靠，且方便调试。Searchkit的搜索界面效果如图2所示。
关于怎么安装React环境，可以查看本系列专辑“12_SandDance沙之舞”中的介绍。下面是一个完整的React代码，使用了Searchkit库的基本UI组建，包括：SearchBox、SearchkitManager、SearchkitProvider等。详细代码如下：
import React, { Component } from 'react'
import { get } from "lodash";
import extend from 'lodash/extend'
import {
SearchBox,
SearchkitManager,
SearchkitProvider,
Layout, TopBar, LayoutBody, LayoutResults,
Hits, NoHits, HitsStats
} from "searchkit"
import './index.css'
const host = "http://10.2.14.251:9200/ispec/"
const searchkit = new SearchkitManager(host, {
httpHeaders:{'Content-Type': 'application/json', 'Authorization':'Basic ' + btoa('elastic:*****')},
basicAuth:"elastic:*****",
withCredentials: 'True'
})
const HitItem = (props) => (
<div className={props.bemBlocks.item().mix(props.bemBlocks.container("item"))}>
<div className={props.bemBlocks.item("name")} dangerouslySetInnerHTML={{__html: get(props.result,"highlight.name",props.result._source.name)}}></div>
<div className={props.bemBlocks.item("data")} dangerouslySetInnerHTML={{__html: get(props.result,"highlight.data",props.result._source.data)}}></div>
</div>
)
class App extends Component {
render(){
return (
<SearchkitProvider searchkit={searchkit}>
<Layout>
<TopBar>
<div className="my-logo">中国地震信息库-ISPECv1.0</div>
<SearchBox autofocus={true}
searchOnChange={true}
queryOptions={{analyzer:"standard"}}
queryFields={["name"]}
prefixQueryFields={["name"]}/>
</TopBar>
<LayoutBody>
<LayoutResults>
<Hits hitsPerPage={10} highlightFields={["name"]} sourceFilter={["name", "data"]}
mod="sk-hits-grid" itemComponent={HitItem}/>
<NoHits/>
</LayoutResults>
</LayoutBody>
</Layout>
</SearchkitProvider>
)
}
}
export default App;
3、常见问题
在调试Searchkit代码时，根据http返回的错误代码，可以大概判断问题来源，根据我们调试过程中遇到的问题，总结如下：
跨域的CORS问题
什么是跨域问题？跨域资源共享（CORS即Cross Origin Resource Sharing）机制允许Web服务器进行跨域访问控制，从而可以安全地进行跨域访问，览器支持在 API 容器中使用 CORS，以降低跨域 HTTP 请求所带来的风险。
在React搜索界面前端部署与ES服务不在一个域中的时候，会出现访问错误，因为ES默认不允许跨域访问（主要是安全考虑）。
如果出现该类问题，需要通过修改elasticsearch配置文件中http.cors.x字段
http.cors.enabled 是否支持跨域，默认为false
http.cors.allow-origin 当设置允许跨域，默认为*,表示支持所有域名，如果我们只是允许某些网站能访问，那么可以使用正则表达式。比如只允许本地地址。 /https?:\/\/localhost(:[0-9]+)?/
http.cors.max-age 浏览器发送一个“预检”OPTIONS请求，以确定CORS设置。最大年龄定义多久的结果应该缓存。默认为1728000（20天）
http.cors.allow-methods 允许跨域的请求方式，默认OPTIONS,HEAD,GET,POST,PUT,DELETE
http.cors.allow-headers 跨域允许设置的头信息，默认为X-Requested-With,Content-Type,Content-Length
http.cors.allow-credentials 是否返回设置的跨域Access-Control-Allow-Credentials头，如果设置为true,那么会返回给客户端。
最新的ES7.4.已经在免费授权中包含了x-pack功能*
当你不期望ES为非授权用户提供服务时，可以开启x-pack的基本认证。
方法时先找到/etc/elasticsearch/目录下修改elasticsearch.yml文件，找到下面的部分进行配置：
xpack.security.enabled: true
xpack.license.self_generated.type: basic
# 如果是basic license的话需要加入下面这一行，不然的话restart elasticsearch之后会报错。
xpack.security.transport.ssl.enabled: true
ES启动后，因为是后台服务，有时候可能不知道如何关闭和重启。方法如下：
Centos可以采用以下命令重启ES
systemctl start elasticsearch #启动
systemctl restart elasticsearch #重启
systemctl status elasticsearch #查看状态
ps:如果是系统内的盆友们，小哥已经把上面的简陋结果放到网上啦，直接戳这里瞧瞧：http://10.2.14.70:8081/
一句话总结：SearchKit是比较优秀的ES界面库，但默认只支持单库检索，如果要进行跨库的检索或搜索，需要使用SearchKit Express来配置完成。最后想说的是：技术积累需要一步步来，不过最重要的是选对方向，小哥在技术调研和选型过程中，首先考虑的是社区活跃程度，技术成熟度和学习难度，综合评价后才会在这里给大家推荐。
