Я использую laravel 5.6 в качестве API для бэкэнда и vuejs для приложения frontend spa.И https://github.com/nicolaslopezj/searchable пакет для поиска, который хорошо работал в моих предыдущих проектах, где я использовал шаблонизатор лезвий.
Я новичок в vuejs и я учусь делать вещи, и я застрял в точке, гдея запутался, как использовать поиск laravel на веб-интерфейсе.
То, что я делал ранее в других проектах, где я использовал blade-сервер для внешнего интерфейса
В моем контроллере
public function index(Request $request)
{
$start_search = microtime('s');
$searchterm = $request->input('search');
if($request->has('search')){
$results = Web::search($searchterm)->paginate(10);
} else {
$results = Web::latest()->paginate(10);
}
$stop_search = microtime('s');
$time_search = ($stop_search - $start_search);
return view('search.index', compact('results', 'searchterm', 'time_search'));
}
И на мой взгляд
<small>{{$results->total()}} results found for "<em class="b-b b-warning">{{$searchterm}}</em>" in {{$time_search}} seconds</small>
@forelse ($results as $result)
<div class="mb-3">
<a href="{{ url($result->url) }}" class="text-primary clear h-1x">{{$result->meta_title}} <span class="badge badge-pill primary">{{$result->rank}}</span></a>
<span class="text-success clear h-1x">{{$result->url}}</span>
<span class="h-2x">{{$result->meta_description}}</span>
</div>
@empty
No Results Found
@endforelse
<div class="pt-2 pagination-sm">
{{ $results->links('vendor.pagination.bootstrap-4') }}
</div>
Этот код хорошо работал, когда я мог правильно искать и отображать результаты вместе со временем поиска.
Теперь я хочу сделать то же самое с laravel api и vuejs frontend.Вот что я попробовал
public function index(Request $request)
{
$start_search = microtime('s');
$searchterm = $request->input('search');
if($request->has('search')){
$results = Web::search($searchterm)->paginate(10);
} else {
$results = Web::latest()->paginate(10);
}
$stop_search = microtime('s');
$time_search = ($stop_search - $start_search);
return WebResource::collection($results);
}
Я создал ресурс коллекции для того же самого.
Вопрос 1 .Мой вопрос касался кода контроллера, как вернуть $ searchterm и $ time_search, чтобы я мог использовать их во внешнем интерфейсе.
В моем компоненте vue я до сих пор пробовал с обучением
<template>
other code..
<div class="mb-3" v-for="result in results" :key="result.results">
<router-link :to="result.url" class="text-primary clear h-1x"> {{ result.meta_title }} </router-link>
<span class="h-2x">{{ result.meta_description }}</span>
</div>
</template>
<script>
import axios from 'axios'
import { mapGetters } from 'vuex'
export default {
layout: 'main',
computed: mapGetters({
locale: 'lang/locale',
authenticated: 'auth/check'
}),
metaInfo () {
return { title: this.$t('searchpagetitle') }
},
data: function () {
return {
results: [],
title: window.config.appName
}
},
watch: {
locale: function (newLocale, oldLocale) {
this.getResults()
}
},
mounted() {
console.log(this.locale)
this.getResults ()
},
methods: {
getResults() {
var app = this;
axios.get('/api/web')
.then(response => {
// JSON responses are automatically parsed.
this.results = response.data.data
})
.catch(e => {
this.errors.push(e)
})
}
}
}
</script>
Вопрос 2 : Мой второй вопрос касался vuejs, как создать форму поиска и отобразить результаты в соответствии с поиском и с правильным URL-адресом поиска, заканчивающимся на? Searchterm = searchkeywords в моем случае.
Когда я использовал blade-сервер, я использовал обычную HTML-форму с URL-адресом действия, чтобы он отображал результаты.Также я использовал $ searchterm, чтобы использовать те же условия поиска для поиска в других маршрутах, таких как изображения, видео.Я просто использовал {{url ('/ images? Searchterm ='. $ Searchterm)}} в href, чтобы, когда пользователь нажимает на него, он отображал результаты всех изображений с тем же ключевым словом, как в Google.А также использовал заполнитель в качестве «введите поиск» и значение в качестве «{{$ searchterm}}», чтобы поисковый термин также оставался в форме поиска.
Я хочу знать, как все это сделать вvuejs.
Спасибо