Question

我使用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结尾的正确搜索网址。

当我使用刀片时，我使用了带有动作网址的普通html表单，以便呈现结果。此外，我使用$ searchterm使用相同的搜索词来搜索其他路线，如图像，视频。我刚刚在href中使用了{{url（＆＃39; / images？searchterm =＆＃39;。$ searchterm）}}，以便当用户点击它时，它会像google一样使用相同的关键字呈现所有图片的结果。并使用占位符作为＆＃34;输入您的搜索＆＃34;价值为＆＃34; {{$ searchterm}}＆＃34;这样搜索词也会保留在搜索表单中。

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

谢谢

Answer 1

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

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

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

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

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

使用laravel后端api

1 个答案: