In diesem Tutorial werden wir die serverseitige Suchfunktionalität in Vue Good table mit Laravel API auf dem Backend mit VueJS dem frontend.
Bitte beachten Sie, dass Sie zumindest einige grundlegende Kenntnisse von Laravel & VueJS haben müssen, um weiterzukommen.
Es gibt einen neuen Abschnitt in Vue Good Table's Dokumentation zum Einrichten der serverseitigen Suche mit Remote-Modus, was ich persönlich sehr hilfreich fand.
Was werden Sie tun?
Wir werden die Benutzerdatensätze aus der Datenbank holen und sie an Vue-Good-table weitergeben und eine serverseitige Suche durchführen.
Projekt einrichten
Folgen Sie den Schritten, um eine vollständige Anleitung zur Implementierung der serverseitigen Suche mit Laravel und Vue-Good-Table.
Erstellen Sie ein neues Laravel-Projekt
Gehen Sie zu Ihrem Projektordner, in meinem Fall zu ~/code und führen Sie den folgenden Befehl aus.
laravel new vue-good-table-search-example
Einrichten der Datenbank
Hier werden wir die grundlegenden Operationen wie die Einrichtung der DB und andere Konfigurationen durchführen.
Erstellen Sie eine neue Datenbank und weisen Sie Werte in .env. In unserem Fall ist es vuesearch
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=vuesearch
DB_USERNAME=root
DB_PASSWORD=root
Bevor wir nun unsere Standardmigrationen ausführen, erstellen wir einen einfachen Users Table Seeder.
php artisan make:seeder UsersTableSeeder
Und jetzt in UsersTableSeeder.php
/**
Run the database seeds.
*
@return void
*/
public function run() {
factory( User::class, 20 )->create();
}
Führen Sie nun die Migration mit unseren geimpften Daten durch.
php artisan migrate --seed
API-Endpunkt einrichten
Lesen Sie auch: Restful API in Laravel
In Ihrem routes/api.php
Route::get('users','UsersController@getRecords');Als nächstes werden wir unseren Controller erstellen php artisan make:controller UsersController
Jetzt in unserem UsersController.php
/**
* @param Request $request
*
* @return \Illuminate\Http\JsonResponse
*/
public function getRecords( Request $request ) {
$search_query = $request->searchTerm;
$users = User::where( 'name', 'LIKE', '%' . $search_query . '%' )
->get()
->toArray();
if ( $search_query ) {
$users['searchTerm'] = $search_query ?: '';
} else {
$users['searchTerm'] = $search_query ? null : '';
}
return response()->json( [
'users' => $users
] );
}
Überprüfen wir die Antwort in Postman oder im Browser
Klicken Sie auf die URL http://www.vue-good-table-search-example.local/api/users und Sie werden die JSON-Antwortdaten sehen.
Da unsere API nun fertig ist und einwandfrei funktioniert, können wir uns nun der Frontend-Seite zuwenden.
Frontend-Routen einrichten
Jetzt in unserer routes/web.php
Route::get('/', function () {
return view('users');
});Erstellen Sie nun eine Benutzervorlage, in unserem Fall haben wir einfach welcome.blade.php in users.blade.php umbenannt, mit kleinen Änderungen.
Jetzt innerhalb der Body-Tags von users.blade.php
<div id="app">
<div class="flex-center position-ref full-height">
<div class="content">
<vue-search
endpoint={{config('app.url')}}api/users
></vue-search>
</div>
</div>
</div>
<script src="{{ asset('js/app.js') }}"></script>
Wir werden unsere Vue-Komponente in einer Weile erstellen. Der Einfachheit halber habe ich den API-Endpunkt als Prop an unsere Komponente übergeben.
Sie können auch Ihren Anwendungsendpunkt in config/app.php definieren.
Vue-Komponente einrichten
Umbenennen ExampleComponent.vue zu VueSearchComponent.vue
Oh, Moment, wir haben vergessen, npm install auszuführen, um unsere Frontend-Abhängigkeiten zu installieren.
Führen Sie den Befehl aus und fügen Sie den Link in unserer Benutzer-Blade-Vorlage hinzu.
Install Vue-good-table
Wenn Sie Vue-good-table zum ersten Mal verwenden, gehen Sie zu deren dockmentation um mehr darüber zu erfahren.
Führen Sie nun npm install vue-good-table aus und importieren Sie später unsere VueSearchComponent.
Jetzt in unserem VueSearchComponent.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Users</div>
<div class="card-body">
<vue-good-table
mode="remote"
:columns="columns"
:rows="rows"
:globalSearch="true"
:search-options="{
enabled: true,
skipDiacritics: true,
}"
@on-search="onSearch"
styleClass="table table-hover table-bordered table-responsive">
<template slot="table-row" slot-scope="props">
<span v-if="props.column.field === 'S.No'">
{{ (users.per_page * (users.current_page - 1)) + (props.index + 1)
}}
</span>
<span v-else>
{{props.formattedRow[props.column.field]}}
</span>
</template>
</vue-good-table>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import VueGoodTable from 'vue-good-table';
import 'vue-good-table/dist/vue-good-table.css'
Vue.use(VueGoodTable);
export default {
props: ['endpoint'],
data() {
return {
users: {
searchTerm: '',
total: 0,
per_page: 5,
from: 1,
to: 0,
current_page: 1
},
offset: 4,
columns: [
{
label: 'S.No',
field: 'S.No'
},
{
label: 'User Name',
field: 'name',
filterable: true
},
{
label: 'Email Address',
field: 'email',
filterable: true
},
{
label: 'Created At',
field: 'created_at',
filterable: true
},
],
rows: []
}
},
mounted() {
this.getRecords()
},
methods: {
getRecords() {
return axios.get(`${this.endpoint}?searchTerm=${this.users.searchTerm}`).then((response) => {
this.rows = response.data.users.data
this.users = response.data.users
})
},
updateParams(newProps) {
this.users = Object.assign({}, this.users, newProps);
},
onSearch: _.debounce(function (params) {
this.updateParams(params);
this.getRecords();
return false;
}, 500)
}
}
</script>
Führen Sie nun npm run dev aus, um unsere Assets zu erstellen, und wechseln Sie zu Ihrem Browser, um die serverseitige Suche in Aktion zu sehen.
Bonus-Abschnitt: Wie wäre es jetzt mit einer Paginierung?
Um die Paginierung einzurichten, müssen wir einige Änderungen an unserer API vornehmen. Zurück zu unserer UsersController.php
$search_query = $request->searchTerm;
$perPage = $request->per_page;
$users = User::where( 'name', 'LIKE', '%' . $search_query . '%' )
->paginate( $perPage )
->toArray();
Wir erstellen eine separate Paginator.vue-Komponente für unsere serverseitige Pagination und binden sie in unsere Hauptkomponente VueSearchComponent ein.
Erstellen Sie eine neue Paginator-Komponente und fügen Sie sie in unsere app.js ein
Vue.component('pagination', require('./components/Paginator'));Jetzt in Paginator.vue
<template>
<ul class="pagination">
<li v-if="pagination.current_page > 1" class="page-item" >
<a href="javascript:void(0)" aria-label="Previous" v-on:click.prevent="changePage(pagination.current_page - 1)">
<span aria-hidden="true">«</span>
</a>
</li>
<li v-for="page in pagesNumber" :class="{'active': page == pagination.current_page}">
<a href="javascript:void(0)" v-on:click.prevent="changePage(page)">{{ page }}</a>
</li>
<li v-if="pagination.current_page < pagination.last_page">
<a href="javascript:void(0)" aria-label="Next" v-on:click.prevent="changePage(pagination.current_page + 1)">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</template>
<script>
export default{
props: {
pagination: {
type: Object,
required: true
},
offset: {
type: Number,
default: 4
}
},
computed: {
pagesNumber() {
if (!this.pagination.to) {
return [];
}
let from = this.pagination.current_page - this.offset;
if (from < 1) {
from = 1;
}
let to = from + (this.offset * 2);
if (to >= this.pagination.last_page) {
to = this.pagination.last_page;
}
let pagesArray = [];
for (let page = from; page <= to; page++) {
pagesArray.push(page);
}
return pagesArray;
}
},
methods : {
changePage(page) {
this.pagination.current_page = page;
this.$emit('paginate');
}
}
}
</script>
<style>
.pagination > .active > a, .pagination > .active > a:focus{
border-color:#004590;
background-color:red;
}
.pagination {
list-style: none;
display: inline-flex
}
</style>
Jetzt werden wir leichte Änderungen an unserer VueSearchComponent für die Paginierung vornehmen.
<vue-pagination :pagination="users"
@paginate="getRecords()"
:offset="4">
</vue-pagination>
Für unseren Axios-Aufruf müssen wir nun die Attribute page und per_page an likeso übergeben,
getRecords() {
return axios.get(`${this.endpoint}?searchTerm=${this.users.searchTerm}&page=${this.users.current_page}&per_page=${this.users.per_page}`).then((response) => {
this.rows = response.data.users.data
this.users = response.data.users
})
},Vergessen Sie auch nicht, die Paginator-Komponente in Ihre VueSearchComponent zu importieren.
import VuePagination from './Paginator';
und
components: {
VuePagination,
},Führen Sie nun zum letzten Mal npm run dev aus und gehen Sie zurück zu Ihrem Browser, um die serverseitige Paginierung und Suche in Aktion zu sehen. Bumm!
Fazit
Wir haben erfolgreich die serverseitige Suche und Paginierung mit Vue-good-table und Laravel implementiert. Wenn Sie Fragen oder Rückmeldungen haben, hinterlassen Sie uns bitte einen Kommentar.
Für die komplette Einrichtung der Anwendung, können Sie sich die Vue Server Side Search Github
