使用 laravel 后端 api 在 vuejs 中搜索

Posted 2023-02-23

【中文标题】使用 laravel 后端 api 在 vuejs 中搜索

【英文标题】：Search in vuejs with laravel backend api

【发布时间】：2018-11-09 18:30:29

【问题描述】：

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

我是 vuejs 的新手，我正在学习如何做事，我陷入了困惑如何在前端使用 laravel 搜索的境地。

我之前在其他项目中使用刀片作为前端所做的事情

在我的控制器中

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。我的问题与控制器代码有关，如何返回 $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。

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

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

谢谢

【参考方案1】：

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

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

在您的 Laravel 控制器中，您可以使用 Input::get() 获取此值，因此您获取 searchterm 的代码将是

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

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

【讨论】：

那么 vuejs 中的表单呢。如何使页面不被刷新。

你可以在点击函数v-on:click上使用VUEjs来调用你的函数getResults()函数或者调用你的函数getResults () 在

等表单属性中使用 @submit

太棒了！最后一个问题是我的问题 1。如何在 api 控制器代码中返回结果、searchterm 和 search_time。我试过作为数组它没有显示任何东西

我认为您只需返回 ** compact('results', 'searchterm', 'time_search')** 并查看您的 response.data 的响应在您的 API 调用中。您必须首先简单地返回一个响应，然后通过压缩多个值来调试它。在紧凑。始终尝试查看您的 response.data 中的内容。