如何在 Laravel 的搜索表单中将获取参数作为漂亮的 URL 发送？

Question

我有一个搜索表单，可以通过某些条件（城市、价格、正交、房产类型）列出房产/广告。例如，我正在尝试获得像这样的漂亮网址

project/search/city/London/price/1_10000/quadrature/1_150/propertyType/flat 

不像现在这样

project/filter?_token=mCwLL58vOxGHtxEBmntPPcks7nV9n3DHXCNKt7hE&city=London&min_price=1&max_price=10000&min_quadrature=1&max_quadrature=150&propertyType=flat&submit=

这是我第一次做这样的事情，而且我在 Laravel 中还比较新。我尝试使用 javascript 的 onsubmit 函数来重写 URL，但这没有用，我也用 Google 搜索并尝试创建一种表单操作方法，然后读取查询字符串并重定向到具有漂亮 url 的字符串，但我失败了。任何帮助是极大的赞赏。这是我的一些代码，但它显然不起作用：

web.php

Route::get('/search', 'CategoryController@index');
Route::get('/filter', 'CategoryController@filter');

CategoryController.php

<?php
namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;

class CategoryController extends Controller
{
public function index()
    {
    $data = \DB::table('properties');
    return view('categories.search', compact('data'));
    }

    public function filter(Request $request)
    {
        $data = \DB::table('properties');

        if ($request->city) {
        $data = $data->where('city', 'LIKE', "%" . $request->city . "%");
        }

        if ($request->min_price && $request->max_price ) {
            $data = $data->where('price', '>=', $request->min_price)
                     ->where('price', '<=', $request->max_price);
        }

        if ($request->min_quadrature && $request->max_quadrature ) {
            $data = $data->where('quadrature', '>=', $request->min_quadrature)
                     ->where('quadrature', '<=', $request->max_quadrature);
        }

        $data = $data->paginate(10);

        return view('categories.search', compact('data'));
    }

}

search.blade.php

<form id="form" action="/filter" method="GET">
    @csrf

      <div class="row">
        <div class="col-md-5 mb-3">
          <label>City</label>
          <input name="city" list="result" id="input" class="form-control">
          <datalist id="result"></datalist>
        </div>
      </div>

      <div class="row">
        <div class="col-md-6 mb-6">
          <label>Price</label>
          <input type="number" name="min_price" class="form-control" placeholder="Min Price">
          <input type="number" name="max_price" class="form-control" placeholder="Max Price">
        </div>
        <div class="col-md-6 mb-6">
          <label>Quadrature</label>
          <input type="number" name="min_quadrature" class="form-control" placeholder="Min quadrature">
          <input type="number" name="max_quadrature" class="form-control" placeholder="Max quadrature">
        </div>
      </div>

      <hr class="mb-4">

      <div class="row">
        <div class="col-md-5 mb-6">
          <h5>Property type</h4>
            <div class="d-block my-3 ">
              <div class="custom-control custom-radio">
                <input id="house" name="propertyType" value="house" type="radio" class="custom-control-input">
                <label class="custom-control-label" for="house">House</label>
              </div>
              <div class="custom-control custom-radio">
                <input id="flat" name="propertyType" value="flat" type="radio" class="custom-control-input">
                <label class="custom-control-label" for="flat">Flat</label>
              </div>
      </div>

    <hr class="mb-4">

    <button name="submit" class="btn btn-primary btn-lg btn-block" type="submit" onsubmit="window.location.href=this.action + '/' + encodeURIComponent(this.elements['city'].value) + encodeURIComponent(this.elements['min_price'].value) + encodeURIComponent(this.elements['max_price'].value) + encodeURIComponent(this.elements['min_quadrature'].value) + encodeURIComponent(this.elements['max_quadrature'].value) + encodeURIComponent(this.elements['propertyType'].value) + encodeURIComponent(this.elements['propertyBidAsk'].value) + encodeURIComponent(this.elements['propertyPayment'].value); return false;">Search</button>

  </form>

Answer 1

不用javascript也可以制作...

HTML 表单：

    <form id="form" action="{{ route('filter') }}" method="GET">
     ... <!-- Your html -->
    <button name="submit" class="btn btn-primary btn-lg btn-block" type="submit" >Search</button>

路线文件：

    <?php
    // ... Your Routes
    Route::get('/filter', function(Illuminate\Http\Request $request) {
      // Redirect to named route
      return redirect()->route('search', ['city' => $request['city'], 'price' => $request['price'], 'quadrature' => $request['quadrature'], 'propertyType' => $request['propertyType']]);    
    })->name('filter');
    Route::get('/search/city/{city}/price/{price}/quadrature/{quadrature}/propertyType/{propertyType}', 'CategoryController@filter')->name('search');

控制器文件：

    <?php
    // ... Your Class namespace and libraries
    class CategoryController extends Controller
    {
      public function filter(Request $request)
      {
        dd( $request );
        // ... Your code
      }
    }

Answer 2

你可以通过使用 Laravel 的 route parameters 来实现这一点：

web.php：

Route::get('/search/city/{city}/price/{price}/quadrature/{quadrature}/propertyType/{propertyType}', 'CategoryController@index');

CategoryController.php：

public function index($city, $price, $quadrature, $propertyType)
{
    // Do stuff...
}