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

注:如果安装失败请尝试
yarn add vue-instantsearch --no-bin-links

然后我们注册使用:
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

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 0
发起讨论 只看当前版本


暂无话题~