by 雪隐 from https://juejin.cn/user/1433418895994094
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可联系授权
大家好，欢迎来到本系列。在之前的文章中，我们介绍了Elasticsearch、Kibana的安装和配置，以及将数据导入Elasticsearch并使用NestJS查询数据（如果您错过了，请查看专栏之前的文章）。
在本文中，我将向您介绍如何将一个简单的react应用程序与自动完成功能连接起来，该功能利用NestJS后端和elasticsearch。
设置react项目
您可以使用此命令设置一个简单的react应用程序（或查看此详细的react文档)
npx create-react-app nest-elastic-frontend
一旦你的应用程序设置好，在你最喜欢的IDE中打开它，我的是VSCode。
我们将需要安装axios作为依赖项。npm i axios
我们需要更新三个文件
- public/index.html
您需要添加引导CDN。（附言：我已经删除了评论，以减少文件的长度）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link
href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
rel="stylesheet"
id="bootstrap-css"
/>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</body>
</html>
- src/App.js
import './App.css';
import axios from 'axios';
import { useState } from 'react';
const App = () => {
const [searchResponse, setSearchResponse] = useState([]);
const [totalValue, setTotalValue] = useState();
const handleChange = async e => {
const { data } = await axios.post('http://localhost:8000/movies/search', {
data: {
title: e.target.value,
},
}); setSearchResponse(data.results);
setTotalValue(data.total.value);
};
return (
<div className='App'>
<div className='container search-table'>
<div className='search-box'>
<div className='row'>
<div className='col-md-3'>
<h5>Search All Fields</h5>
</div>
<div className='col-md-9'>
<input
type='text'
id='myInput'
onChange={handleChange}
className='form-control'
placeholder='Search IMDB movies'></input>
</div>
</div>
</div>
<div className='search-list'>
<h3>
{totalValue ?? 0} {totalValue > 1 ? 'Records' : 'Record'} Found
</h3>
<table className='table' id='myTable'>
<thead>
<tr>
<th>Title</th>
<th>Overview</th>
<th>Revenue:Budget ($)</th>
</tr>
</thead>
<tbody>
{searchResponse.map((res, idx) => (
<tr key={idx}>
<td className='title'>{res.title}</td>
<td>
<p>{res.overview}</p>
<sub>"{res.tagline}"</sub>
</td>
<td>
<p>
<sub>
{res.revenue.toLocaleString()}:{res.budget.toLocaleString()}
</sub>
</p>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
);
};
export default App;
- Lastly, src/index.css
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}.search-table {
padding: 10%;
margin-top: -6%;
}
.search-box {
background: #c1c1c1;
border: 1px solid #ababab;
padding: 3%;
}
.search-box input:focus {
box-shadow: none;
border: 2px solid #eeeeee;
}
.search-list {
background: #fff;
border: 1px solid #ababab;
border-top: none;
}
.search-list h3 {
background: #eee;
padding: 3%;
margin-bottom: 0%;
}.title {
word-wrap: normal;
width: 200px;
}
运行你的应用程序
根据您喜欢的软件包管理器，使用npm Start启动您的react应用程序。
测试你的应用程序
总结
在本文中，我们能够在react应用程序中可视化后台应用程序在弹性搜索查询上运行的结果。
感谢收看！
这是源代码的链接。
