چگونه می توان موتور جستجوی زمان واقعی را با Vue

مقدمه
Elasticsearch یک موتور جستجو و تجزیه و تحلیل RESTful توزیع شده است که قادر به حل تعداد فزاینده ای موارد استفاده است. Elasticsearch در ورای Apache Lucene ساخته شده است که یک کتابخانه موتور جستجوگر متن میباشد.
در این آموزش ، شما با استفاده از Node.js ،Elasticsearch و Vue.js.s یک موتور جستجوی زمان واقعی ایجاد خواهید کرد. در نتیجه ، درک پایه از Vue.js و Node.js (Express) برای دنبال کردن این آموزش لازم است.

مرحله 1 – آماده سازی محیط
بیایید با تنظیم محیط این بخش را شروع کنیم. از آنجا که شما از Node.js استفاده خواهید کرد ، ساده ترین راه برای شروع ایجاد پوشه جدید و اجرای npm init است. پوشه جدیدی به نام elastic-node ایجاد کنید ، دیرکتوری را در پوشه جدید تغییر دهید و npm init را اجرا کنید:
یک دیرکتوری جدید به نام elastic-node ایجاد کنید:
⦁ $ mkdir elastic-node
⦁
به پوشه جدید بروید:
⦁ $ cd elastic-node
⦁
npm init را برای ایجاد فایل pack.json اجرا کنید:
⦁ $ npm init
⦁
دستورات فوق شما را به فرآیند ایجاد فایل pack.json هدایت میکند، که برای اجرای هر کتابخانه Node.js لازم است.
در مرحله بعد ، باید کتابخانه هایی را که برای موتور جستجوی زمان واقعی مورد نیاز است ، نصب کنید. كتابخانه ها را با دستور زير نصب كنيد:
⦁ $ npm install express body-parser elasticsearch
⦁
کتابخانه express ، سرور مجازی را اجرا می کند ، در حالی که کتابخانه body-parser با express کار میکند تا درخواست های بدن را دنبال کند. elasticsearch كتابخانه رسمي Node.js براي Elasticsearch است كه موتوري است كه جستجو در زمان واقعي بر روي آن ساخته خواهد شد.
اکنون قسمت اول محیط شما تنظیم شده است. با این حال ، خود Elasticsearch در ستاپ شما نیست. شما نیاز به نصب Elasticsearch دارید که می تواند به چند روش مختلف انجام شود. اگر از سیستم عامل Debian Linux استفاده می کنید ، می توانید فایل .deb را دانلود کرده و با استفاده از dpkg نصب کنید.
دستور زیر را برای دانلود فایل .deb اجرا کنید:
⦁ $ curl -L -O https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-5.6.4.deb
⦁
اکنون بسته deb را با استفاده از dpkg نصب کنید:
⦁ $ sudo dpkg -i elasticsearch-5.6.4.deb
⦁
برای سایر توزیع ها / سیستم عامل ها ، می توانید راهنمایی در مورد نحوه نصب Elasticsearch را در اینجا بیابید.
Elasticsearch پس از نصب به صورت خودکار شروع نمی شود. Elasticsearch را می توان با استفاده از فرمان service شروع و متوقف کرد.
موارد زیر را برای شروع سرویس elasticsearch اجرا کنید:
⦁ $ sudo -i service elasticsearch start
⦁
می توانید با این دستور سرویس elasticsearch را متوقف کنید:
⦁ $ sudo -i service elasticsearch stop
⦁
برای پیکربندی Elasticsearch جهت شروع خودکار پس از بوت شدن سیستم ، این دستور را اجرا کنید تا Daemon systemctl مجدد لود شود:
⦁ $ sudo /bin/systemctl daemon-reload
⦁
سپس elasticsearch را فعال کنید تا بتوان آن را به عنوان سرویس نامگذاری کرد:
⦁ $ sudo /bin/systemctl enable elasticsearch.service
⦁
بعد از اجرای دستور فوق ، می توانید Elasticsearch را با این دستور شروع کنید:
⦁ $ sudo systemctl start elasticsearch.service
⦁
و با دستور زیر متوقف کنید:
⦁ $ sudo systemctl stop elasticsearch.service
⦁
همچنین می توانید وضعیت Elasticsearch را بررسی کنید:
⦁ $ sudo service elasticsearch status
⦁
مرحله 2 – ایندکس کردن داده ها در Elasticsearch
یک فایل data.js را در پوشه root خود ایجاد کنید و کد زیر را اضافه کنید:
data.js

//require the Elasticsearch librray
const elasticsearch = require(‘elasticsearch’);
// instantiate an Elasticsearch client
const client = new elasticsearch.Client({
hosts: [ ‘http://localhost:9200’]
});
// ping the client to be sure Elasticsearch is up
client.ping({
requestTimeout: 30000,
}, function(error) {
// at this point, eastic search is down, please check your Elasticsearch service
if (error) {
console.error(‘Elasticsearch cluster is down!’);
} else {
console.log(‘Everything is ok’);
}
});

این کد ابتدا به کتابخانه Elasticsearch نیاز دارد و سپس یک کلاینت جدید Elasticsearch را راه اندازی می کند ، و یک آرایه هاست را وارد میکند ، http: // localhost: 9200 . دلیل این است که ، به طور پیش فرض ، Elasticsearch به 9200 گوش می کند. در مرحله بعد ، کلاینت Elasticsearch را پینگ می کنید تا مطمئن شوید سرور مجازی آماده است. اگر node data.jsرا اجرا کنید ، پیامی دریافت خواهید کرد که می گوید Everything is ok.
مرحله 3 – درک ایندکس ها
بر خلاف بانک های اطلاعاتی عادی ، ایندکس Elasticsearch مکانی برای ذخیره اسناد مرتبط است. به عنوان مثال ، برای ذخیره کردن داده ها از نوع cities_list، یک ایندکس با نام scotch.io-tutorialایجاد خواهید کرد. به این صورت در Elasticsearch انجام می شود:
data.js
// create a new index called scotch.io-tutorial. If the index has already been created, this function fails safely
client.indices.create({
index: ‘scotch.io-tutorial’
}, function(error, response, status) {
if (error) {
console.log(error);
} else {
console.log(“created a new index”, response);
}
});

این قطعه کد را بعد از تابع ping که قبلاً نوشته بودید اضافه کنید. اکنون دوباره node data.js را اجرا کنید. دو پیام دریافت خواهید کرد:
⦁ Everything is okay
⦁ Created a new index (Elasticsearch با پاسخ از)
مرحله 4 – اضافه کردن اسناد به ایندکس ها
می توانید با API Elasticsearch اسناد را به ایندکس های موجود اضافه کنید. برای این کار از کد زیر استفاده کنید:
// add a data to the index that has already been created
client.index({
index: ‘scotch.io-tutorial’,
id: ‘1’,
type: ‘cities_list’,
body: {
“Key1”: “Content for key one”,
“Key2”: “Content for key two”,
“key3”: “Content for key three”,
}
}, function(err, resp, status) {
console.log(resp);
});

body به سندی که می خواهید به ایندکس scotch.io-tutour اضافه کنید اشاره می کند ، در حالی که نوع، بیشتر برای دسته بندی است. با این حال ، توجه داشته باشید که اگر کلید id حذف شود ، Elasticsearch یکی از آنها را به صورت خودکار تولید می کند.
در این آموزش ، سند شما لیستی از تمام شهرهای جهان خواهد بود. اگر قرار باشد هر شهر را یکی یکی اضافه کنید ، ممکن است روزها طول بکشد تا همه آنها فهرست شوند. خوشبختانه ، Elasticsearch تابع bulk دارد که می تواند داده های فله ای را پردازش کند.
ابتدا فایل JSON را که شامل تمام شهرهای جهان است ، دریافت کنید و آن را در پوشه root خود به عنوان names.json ذخیره کنید.
زمان آن است که از API بالک برای وارد کردن مجموعه داده های بزرگ استفاده کنید:
data.js
// require the array of cities that was downloaded
const cities = require(‘./cities.json’);
// declare an empty array called bulk
var bulk = [];
//loop through each city and create and push two objects into the array in each loop
//first object sends the index and type you will be saving the data as
//second object is the data you want to index
cities.forEach(city =>{
bulk.push({index:{
_index:”scotch.io-tutorial”,
_type:”cities_list”,
}
})
bulk.push(city)
})
//perform bulk indexing of the data passed
client.bulk({body:bulk}, function( err, response ){
if( err ){
console.log(“Failed Bulk operation”.red, err)
} else {
console.log(“Successfully imported %s”.green, cities.length);
}
});

در اینجا ، شما در فایل JSON خود میان تمام شهرها حلقه زده اید ، و در هر حلقه ، یک آبجکت را با index و type سندی که در آن فهرست بندی می کنید ، به کار میگیرید. دو ورودی برای آرایه در حلقه وجود دارد زیرا API bulk در مرحله اول یک آبجکت حاوی تعریف ایندکس را انتظار دارد و سپس سندی را که می خواهید آن را ایندکس کنید. برای کسب اطلاعات بیشتر در این مورد ، می توانید این مقاله را بررسی کنید.
در مرحله بعدی ، تابع client.bulk را فراخوانی میکنید ، و به قسمت جدید آرایه bulk وارد میکنید. این کار با ایندکس کردن scotch.io-tutorial و cities_list، تمام داده های شما را به Elasticsearch ایندکس میکند.
مرحله 5 – استفاده از Express برای ارائه صفحه فرود
نمونه Elasticsearch شما در حال اجراست و می توانید با استفاده از Node.js. با آن ارتباط برقرار کنید. زمان آن رسیده است که از Express برای ارائه یک صفحه فرود استفاده کرده و از ستاپ راه اندازی شده استفاده کنید.
فایلی با نام index.js ایجاد کنید و کد زیر را اضافه کنید:
index.js
//require the Elasticsearch librray
const elasticsearch = require(‘elasticsearch’);
// instantiate an elasticsearch client
const client = new elasticsearch.Client({
hosts: [ ‘http://localhost:9200’]
});
//require Express
const express = require( ‘express’ );
// instanciate an instance of express and hold the value in a constant called app
const app = express();
//require the body-parser library. will be used for parsing body requests
const bodyParser = require(‘body-parser’)
//require the path library
const path = require( ‘path’ );

// ping the client to be sure Elasticsearch is up
client.ping({
requestTimeout: 30000,
}, function(error) {
// at this point, eastic search is down, please check your Elasticsearch service
if (error) {
console.error(‘elasticsearch cluster is down!’);
} else {
console.log(‘Everything is ok’);
}
});

// use the bodyparser as a middleware
app.use(bodyParser.json())
// set port for the app to listen on
app.set( ‘port’, process.env.PORT || 3001 );
// set path to serve static files
app.use( express.static( path.join( __dirname, ‘public’ )));
// enable CORS
app.use(function(req, res, next) {
res.header(“Access-Control-Allow-Origin”, “*”);
res.header(‘Access-Control-Allow-Methods’, ‘PUT, GET, POST, DELETE, OPTIONS’);
res.header(“Access-Control-Allow-Headers”, “Origin, X-Requested-With, Content-Type, Accept”);
next();
});

// defined the base route and return with an HTML file called tempate.html
app.get(‘/’, function(req, res){
res.sendFile(‘template.html’, {
root: path.join( __dirname, ‘views’ )
});
})

// define the /search route that should return elastic search results
app.get(‘/search’, function (req, res){
// declare the query object to search elastic search and return only 200 results from the first result found.
// also match any data where the name is like the query string sent in
let body = {
size: 200,
from: 0,
query: {
match: {
name: req.query[‘q’]
}
}
}
// perform the actual search passing in the index, the search query and the type
client.search({index:’scotch.io-tutorial’, body:body, type:’cities_list’})
.then(results => {
res.send(results.hits.hits);
})
.catch(err=>{
console.log(err)
res.send([]);
});

})
// listen on the specified port
app .listen( app.get( ‘port’ ), function(){
console.log( ‘Express server listening on port ‘ + app.get( ‘port’ ));
} );

با نگاهی به کد بالا ، می بینید که کد موارد زیر را انجام داده است:
• کتابخانه های Express ، body-parser و path را درخواست کرده است.
• یک نمونه جدید از Express را روی ثابتی به نام app تنظیم کرده است.
• برنامه را تنظیم کرده تا از میان افزار bodyParser استفاده کند.
• بخش استاتیک برنامه را روی پوشه ای به نام public تنظیم کرده است. این پوشه هنوز ایجاد نشده است
• یک میان افزار تعریف کرده است که عنوان CORS را به برنامه اضافه می کند.
• یک مسیر GET برای URL ریشه برنامه تعریف کرده است ، که توسط / نشان داده میشود. در این مسیر ، کد فایلی به نام template.html را که در پوشه views قرار دارد ، باز می گرداند.
•یک مسیر GET برای URL سرچ برنامه تعریف کرده است ، که از جستجوی آبجکت برای یافتن مطابقت داده های منتقل شده از طریق رشته پرس و جو استفاده می کند. جستجوی اصلی در موضوع پرس و جو گنجانده شده است. می توانید جستارهای سرچ مختلف را به این آبجکت اضافه کنید. برای این جستجو، یک کلید با پرس و جو اضافه می کنید و یک آبجکت را برمیگردانید که به آن میگویید نام سندی که به دنبال آن هستید باید با req.query [‘q’] مطابقت داشته باشد.
علاوه بر موضوع پرس و جو ، بدنه جستجو می تواند شامل سایر خصوصیات اختیاری از جمله size و from باشد. ویژگی size تعداد اسنادی را که باید در پاسخ شامل شوند را تعیین می کند. اگر این مقدار موجود نباشد ، به طور پیش فرض 10 سند بازگردانده می شوند. ویژگی from، شاخص شروع اسناد برگشتی را تعیین می کند. این برای صفحه بندی مفید است.
مرحله 6 – درک پاسخ API جستجو
اگر مجبور باشید پاسخ را از API جستجو وارد کنید ، اطلاعات زیادی را در بر می گیرد. در زیر مثالی آورده شده است:
Output
{ took: 88,
timed_out: false,
_shards: { total: 5, successful: 5, failed: 0 },
hits:
{ total: 59,
max_score: 5.9437823,
hits:
[ {“_index”:”scotch.io-tutorial”,
“_type”:”cities_list”,
“_id”:”AV-xjywQx9urn0C4pSPv”,
“_score”:5.9437823,”
_source”:{“country”:”ES”,”name”:”A Coruña”,”lat”:”43.37135″,”lng”:”-8.396″}},
[Object],
…
[Object] ] } }

پاسخ شامل یک ویژگی took برای تعداد میلی ثانیه هایی است که برای یافتن نتایج طول میکشد ، timed_out ، که فقط درصورتی درست است که هیچ نتیجه ای در حداکثر زمان مجاز یافت نشود ، برای اطلاعات پیرامون وضعیت گره های مختلف (در صورت به کارگیری به عنوان خوشه گره ها) ، _shards میباشد و hits که شامل نتایج جستجو میباشد.
⦁ در خاصیت hits ، یک آبجکت با خصوصیات زیر خواهید داشت:
⦁ total تعداد کل موارد مطابقت یافته را نشان می دهد.
⦁ max_score حداکثر امتیاز از موارد یافت شده است.
⦁ hits آرایه ای است که شامل موارد یافت شده میباشد.
به همین دلیل شما در مسیر جستجو ، response.hits.hits را در بر می گردانید ، که جایگاه نتایج یافت شده است.
مرحله 7 – ایجاد الگوی HTML
ابتدا دو پوشه جدید را در پوشه root خود با نام views و public ایجاد کنید که در مرحله قبل به آنها ارجاع داده شده است. در مرحله بعدی ، یک فایل با نام pattern.html در پوشه views ایجاد کنید و کد زیر را پیست کنید:
template.html
<!– template.html –>
<link rel=”stylesheet” type=”text/css” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>
<script src=”https://unpkg.com/axios/dist/axios.min.js”></script>
<script src=”https://cdn.jsdelivr.net/npm/vue”></script>
<div class=”container” id=”app”>
<div class=”row”>
<div class=”col-md-6 col-md-offset-3″>
<h1>Search Cities around the world</h1>
</div>
</div>
<div class=”row”>
<div class=”col-md-4 col-md-offset-3″>
<form action=”” class=”search-form”>
<div class=”form-group has-feedback”>
<label for=”search” class=”sr-only”>Search</label>
<input type=”text” class=”form-control” name=”search” id=”search” placeholder=”search” v-model=”query” >
<span class=”glyphicon glyphicon-search form-control-feedback”></span>
</div>
</form>
</div>
</div>
<div class=”row”>
<div class=”col-md-3″ v-for=”result in results”>
<div class=”panel panel-default”>
<div class=”panel-heading”>
<!– display the city name and country –>
{{ result._source.name }}, {{ result._source.country }}
</div>
<div class=”panel-body”>
<!– display the latitude and longitude of the city –>
<p>lat:{{ result._source.lat }}, long: {{ result._source.lng }}.</p>
</div>
</div>
</div>
</div>
</div>
<!— some styling for the page –>
<style>
.search-form .form-group {
float: right !important;
transition: all 0.35s, border-radius 0s;
width: 32px;
height: 32px;
background-color: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
border-radius: 25px;
border: 1px solid #ccc;
}

.search-form .form-group input.form-control {
padding-right: 20px;
border: 0 none;
background: transparent;
box-shadow: none;
display: block;
}

.search-form .form-group input.form-control::-webkit-input-placeholder {
display: none;
}

.search-form .form-group input.form-control:-moz-placeholder {
/* Firefox 18- */
display: none;
}

.search-form .form-group input.form-control::-moz-placeholder {
/* Firefox 19+ */
display: none;
}

.search-form .form-group input.form-control:-ms-input-placeholder {
display: none;
}

.search-form .form-group:hover,
.search-form .form-group.hover {
width: 100%;
border-radius: 4px 25px 25px 4px;
}

.search-form .form-group span.form-control-feedback {
position: absolute;
top: -1px;
right: -2px;
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
color: #3596e0;
left: initial;
font-size: 14px;
}
</style>

در قسمت قطعه کد بالا دو بخش اصلی وجود دارد: کد HTML و CSS.
در بخش HTML ، شما به سه کتابخانه مختلف نیاز دارید:
1- Bootstrap CSS برای استایل صفحه.
2- Axios js برای درخواست های HTTP به سرور مجازی ما.
3- Vue.js که یک چارچوب حداقلی است که شما برای نما استفاده خواهید کرد.
در بخش CSS از یک طراحی استفاده کرده اید تا هنگامی که روی نماد جستجو می روید ، ورودی جستجو را مخفی کرده و خود را نشان دهد.
در مرحله بعد ، یک ورودی برای جعبه جستجو وجود دارد که شما v-model آن را برای query اختصاص داده اید (این مورد توسط Vue.js استفاده خواهد شد). بعد از این ، در تمام نتایج ما حلقه می زنید.
دستور node index.js را اجرا کنید و سپس از یک مرورگر به http: // localhost: 3001 / بروید. صفحه فرود برنامه را مشاهده خواهید کرد.

در مرحله بعد ، برچسب اسکریپت را در فایل template.html خود اضافه کنید:
template.html
// create a new Vue instance
var app = new Vue({
el: ‘#app’,
// declare the data for the component (An array that houses the results and a query that holds the current search string)
data: {
results: [],
query: ”
},
// declare methods in this Vue component. here only one method which performs the search is defined
methods: {
// make an axios request to the server with the current search query
search: function() {
axios.get(“http://127.0.0.1:3001/search?q=” + this.query)
.then(response => {
this.results = response.data;

})
}
},
// declare Vue watchers
watch: {
// watch for change in the query string and recall the search method
query: function() {
this.search();
}
}

})

در این بخش نمونه جدیدی از Vue را اعلام کردید که آن را با id برنامه بر روی المان، نصب میکنید. خواص داده را اعلام کردید که شامل query است ، که به ورودی جستجو پیوست کرده اید ، و results ، که مجموعه ای از تمام نتایج یافت شده است.
در بخش روشها ، فقط یک تابع به نام search دارید ، که یک درخواست GET را به مسیر جستجو میفرستد. از ورودی جعبه جستجو می گذرد. و به نوبه خود پاسخی را که در بلوک کد HTML حلقه شده است برمی گرداند.
سرانجام ، در Vue.js از watchers استفاده می کنید ، که در هر زمان که داده ها تغییرات را دیدند ، کاری انجام می دهد. در اینجا ، در حال مشاهده تغییر در داده query هستید و پس از تغییر ، روش search کنار گذاشته می شود.
اگر فرمان node index.js را مجدداً اجرا کنید و به http: // localhost: 3001 / بروید ، باید مطابق زیر کار کند:

مرحله 8 – جستجو از سمت کلاینت
اگر نمی خواهید در هر بار جستجو یک درخواست به سرور مجازی ارسال کنید ، می توانید موتور Elasticsearch را از طرف کلاینت جستجو کنید. ممکن است برخی از توسعه دهندگان مایل به استفاده از سرور مجازی های خود برای هر اصطلاح جستجو نباشند ، در حالی که برخی احساس می کنند جستجو از طرف سرور مجازی امن تر است.
Elasticsearch یک ساختار مرورگر پیشنهاد میکند که می تواند جستجو کند. این مرحله شما را در مورد جستجوی سمت کلاینت مرورگر راهنمایی می کنیم.
ابتدا مسیر جدیدی را به فایل Express خود اضافه کنید و سرور مجازی خود را مجدداً راه اندازی کنید:
index.js
// decare a new route. This route serves a static HTML template called template2.html
app.get(‘/v2’, function(req, res){
res.sendFile(‘template2.html’, {
root: path.join( __dirname, ‘views’ )
});
})

در این بلاک کد ، مسیر جدیدی را برای URL در / v2 ایجاد کرده اید تا یک فایل HTML استاتیک به نام template2.html را برگردانید. به زودی این فایل را ایجاد خواهید کرد.
در مرحله بعد ، باید کتابخانه کلاینت را برای Elasticsearch از اینجا دانلود کنید. بعد از دانلود ، elasticsearch.min.js را در پوشه عمومی در ریشه برنامه خود اکسترکت و کپی کنید.
توجه: اگر بعد از اتصال به موتور Elasticsearch از طرف کلاینت و دنبال کردن قطعه کد زیر تا انتهای فایل پیکربندی Elasticsearch ، با مشکلات CORS روبرو شدید، با مرور مطالب مرجع Elasticsearch می توانید این فایل را جایگذاری کنید.
/etc/elasticsearch/elasticsearch.yml

http.cors.enabled : true
http.cors.allow-origin : “*”

بعد از انجام این کار ، نمونه Elasticsearch خود را مجدداً راه اندازی کنید:
⦁ sudo service elasticsearch restart
⦁

سپس ، یک فایل با نام pattern2.html در پوشه views و این کد را ایجاد کنید:
template2.html
<!– template2.html –>
<link rel=”stylesheet” type=”text/css” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>
<script src=”https://unpkg.com/axios/dist/axios.min.js”></script>
<script src=”https://cdn.jsdelivr.net/npm/vue”></script>
<div class=”container” id=”app”>
<div class=”row”>
<div class=”col-md-6 col-md-offset-3″>
<h1>Search Cities around the world</h1>
</div>
</div>
<div class=”row”>
<div class=”col-md-4 col-md-offset-3″>
<form action=”” class=”search-form”>
<div class=”form-group has-feedback”>
<label for=”search” class=”sr-only”>Search</label>
<input type=”text” class=”form-control” name=”search” id=”search” placeholder=”search” v-model=”query” >
<span class=”glyphicon glyphicon-search form-control-feedback”></span>
</div>
</form>
</div>
</div>
<div class=”row”>
<div class=”col-md-3″ v-for=”result in results”>
<div class=”panel panel-default”>
<div class=”panel-heading”>
<!– display the city name and country –>
{{ result._source.name }}, {{ result._source.country }}
</div>
<div class=”panel-body”>
<!– display the latitude and longitude of the city –>
<p>lat:{{ result._source.lat }}, long: {{ result._source.lng }}.</p>
</div>
</div>
</div>
</div>
</div>
<script src=”/elasticsearch.min.js”></script>
<style>
.search-form .form-group {
float: right !important;
transition: all 0.35s, border-radius 0s;
width: 32px;
height: 32px;
background-color: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
border-radius: 25px;
border: 1px solid #ccc;
}

.search-form .form-group input.form-control {
padding-right: 20px;
border: 0 none;
background: transparent;
box-shadow: none;
display: block;
}

.search-form .form-group input.form-control::-webkit-input-placeholder {
display: none;
}

.search-form .form-group input.form-control:-moz-placeholder {
/* Firefox 18- */
display: none;
}

.search-form .form-group input.form-control::-moz-placeholder {
/* Firefox 19+ */
display: none;
}

.search-form .form-group input.form-control:-ms-input-placeholder {
display: none;
}

.search-form .form-group:hover,
.search-form .form-group.hover {
width: 100%;
border-radius: 4px 25px 25px 4px;
}

سپس، یک تگ اسکریپت در فایل template2.html خود ایجاد کرده و این کد را اضافه کنید:
template2.html
// instantiate a new Elasticsearch client like you did on the client
var client = new elasticsearch.Client({
hosts: [‘http://127.0.0.1:9200’]
});
// create a new Vue instance
var app = new Vue({
el: ‘#app’,
// declare the data for the component (An array that houses the results and a query that holds the current search string)
data: {
results: [],
query: ”
},
// declare methods in this Vue component. here only one method which performs the search is defined
methods: {
// function that calls the elastic search. here the query object is set just as that of the server.
//Here the query string is passed directly from Vue
search: function() {
var body = {
size: 200,
from: 0,
query: {
match: {
name: this.query
}
}
}
// search the Elasticsearch passing in the index, query object and type
client.search({ index: ‘scotch.io-tutorial’, body: body, type: ‘cities_list’ })
.then(results => {
console.log(`found ${results.hits.total} items in ${results.took}ms`);
// set the results to the result array we have
this.results = results.hits.hits;
})
.catch(err => {
console.log(err)

});

}
},
// declare Vue watchers
watch: {
// watch for change in the query string and recall the search method
query: function() {
this.search();
}
}

})

قطعه HTML و JavaScript در بالا شبیه به مرحله قبل است که تفاوت های اصلی آن به شرح زیر است:
• شما به Axios احتیاج نداشتید ، در عوض به elasticsearch.js نیاز داشتید.
• در بالای برچسب اسکریپت ، کلاینت Elasticsearch را همانطور که در سمت سرور مجازی انجام شد ، آغاز کردید.
• روش جستجو درخواست HTTP را انجام نمی دهد ، بلکه موتور Elasticsearch را همانطور که در مسیر جستجو در سمت سرور مجازی انجام می شود جستجو می کند.
اگر در http: // localhost: 3001 / v2 جستجو می کنید ، باید مطابق شکل زیر کار کند:

نتیجه
در این آموزش ، شما از Elasticsearch برای نمایه سازی داده ها استفاده کرده اید. همچنین با استفاده از کتابخانه کلاینت برای Elasticsearch یک جستجوی زمان واقعی انجام داده اید.

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade