laravel - 使用 laravel 后端 api 在 vuejs 中搜索

Question

我使用 laravel 5.6 作为后端的 api 和前端 spa 应用程序的 vuejs。和 https://github.com/nicolaslopezj/searchable搜索包，在我之前使用 Blade 模板引擎的项目中运行良好。

我是 vuejs 的新手，我正在学习如何做事，但我卡在了我对如何在前端使用 laravel 搜索感到困惑的地步。

我之前在其他使用 blade 作为前端的项目中所做的

在我的 Controller 中

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 前端做同样的事情。所以这就是我尝试过的

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。我的问题与 Controller 代码有关，如何返回 $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 相关，如何创建搜索表单并根据搜索结果呈现结果，在我的案例中如何使用以 ?searchterm=searchkeywords 结尾的正确搜索 url。

当我使用 blade 时，我使用带有操作 url 的普通 html 表单，以便它呈现结果。我还使用 $searchterm 来使用相同的搜索词来搜索其他路径，如图像、视频。我只是在 href 中使用了 {{ url('/images?searchterm='.$searchterm) }} 这样当用户点击它时，它会像谷歌一样呈现具有相同关键字的所有图像的结果。并且还将占位符用作“输入您的搜索”并将值用作“{{$searchterm}}”，以便搜索词也保留在搜索表单中。

我想知道如何在 vuejs 中做同样的事情。

谢谢

Answer 1

最好在前端API的请求URL中附加搜索关键字。所以你的请求 url 会像

axios.get('/api/web?searchterm='+this.searchterm)

在你的 Laravel Controller 中，你可以使用 Input::get() 获取这个值，所以你获取搜索项的代码将是

$searchterm = Input::get('searchterm');

然后您可以根据 $searchterm 变量获取数据。