Menu

97.全文搜索(四)

本节说明

  • 对应视频教程第 97 小节:First Class Search: Instant Results

本节内容

在开始本节内容之前,我们做点小工作。默认情况下,algolia「索引」会从模型的 toArray 方法中读取数据来做持久化。如果要自定义同步到搜索索引的数据,可以重写模型上的 toSearchableArray 方法。我们同步话题模型的path
forum\app\Thread.php

    .
    .
    public function toSearchableArray()
    {
        return $this->toArray() + ['path' => $this->path()];
    }
}

同步数据:

$ php artisan scout:import 'App\Thread'

刷新页面:
file
我们开始本节的内容:实现上一节说到的更进一步的搜索功能。首先我们安装 vue-instantsearch

$ npm install --save vue-instantsearch

然后我们注册使用:
forum\resources\assets\js\bootstrap.js

window._ = require('lodash');

import InstantSearch from 'vue-instantsearch';
.
.
window.Vue = require('vue');

Vue.use(InstantSearch);
.
.

接着我们注册路由并在页面初步实现搜索功能:
forum\routes\web.php

.
Auth::routes();

Route::view('scan','scan');
.

forum\resources\views\scan.blade.php

@extends('layouts.app')

@section('content')
    <div class="container">
        <ais-index
                app-id="{{ config('scout.algolia.id') }}"
                api-key="{{ config('scout.algolia.key') }}"
                index-name="threads"
        >
            <ais-search-box></ais-search-box>

            <ais-refinement-list attribute-name="channel.name"></ais-refinement-list>

            <ais-results>
                <template scope=" { result } ">
                    <p>
                        <a href="result.path">
                            <ais-highlight :result="result" attribute-name="title"></ais-highlight>
                        </a>
                    </p>
                </template>
            </ais-results>
        </ais-index>
    </div>
@endsection

我们访问页面查看效果:
file

本文章首发在 Laravel China 社区
上一篇 下一篇
讨论数量: 0
发起讨论


暂无话题~
刻意练习,每日精进。
1
点赞
48
浏览
0
讨论

维护者