Search VUE/LARAVEL

Limbaje de Programare PHP
1

Salut, este vorba despre un proiect ce foloseste Laravel cu VUE. In baza de date sunt niste date, tabelul si search-ul este facut, totul ok. Pe o pagina se afiseaza 30 rezultate, si inca 30 pe pagina 2, si tot asa, ideea este ca search-ul imi cauta daca scriu acolo doar de pe pagina curenta, eu vreau din tot tabelul din DB, nu stiu cum sa fac si unde sa ma uit…
Este ceva de genul asta:

<div class="col-xs-12 col-sm-6">
    <el-input v-model="search" placeholder="Cauta..." prefix-icon="el-icon-search" clearable />
</div>

Functia de cautare:

<el-table :data="informatii.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" size="medium"
                         style="width: 100%" fit highlight-current-row v-loading="loading">

Un sfat ceva… Multumesc!

2

Array-ul informatii cum este populat? Cum obtine datele din baza de date?

2 Likes
3

Cand accesez pagina cu informatii.
(O informatie in plus: Este facut automat, adica nu trebuie sa apasa search, doar scriu in casuta search ce vreau sa caut si el face automat totul, imi afiseaza in tabel cu ce a gasit, dar problema e ca-mi afiseaza doar de pe pagina pe care sunt, daca ma duc pe pagina 2 unde sunt alte informatii si caut, nu-mi va gasii informatiile de pe pagina 1)
Route: Route::get('/informatii', 'InfoController@informatii');
InfoController:

public function informatii(Request $request) {
        return response()->json(Info::with('infod')->where('Valid',1)->orderBy('name','asc')->paginate($request->limit));
    }

Pe o pagina sunt afisate 30 de rezultate.
Jos in SCRIPT (export default) “data” este definita astfel:

data() {
            return {
                loading: false,
                search: '',
                pag_total: 0,
                pag_current: 1,
                pag_page: 30,
            }
        },
4

Da, functioneaza asa pentru ca valoarea din input este folosita direct in filtrarea acelui array-ului unde ai datele. Deci automat, iti va face cautarea doar in valorile initiale care vin din baza de data la incarcarea paginii, respectiv, doar acele 30 de randuri.

Ca sa poti face cautare in toata baza de date, atunci acel input de search trebuie sa faca un request catre backend de fiecare data cand este modificat.

Deci in componenta Vue ai nevoie de urmatoarele modificari:

  • la input-ul de search atasezi un event listener @change="getInfo()"
  • creezi metoda getInfo() care trebuie sa faca un request ajax catre backend (cu axios sau fetch, depinde cu care esti mai prieten). La acest request atasezi ca payload un obiect de genul { search: this.search }

In backend:

  • trebuie sa modifici query-ul sa includa parametru search cand este prezent si nu este gol
return response()->json(
    Info::with('infod')
       ->when($request->filled('search'), function ($query, $request) {
            $query->where('name', 'like', '%'.$request->search.'%');
        })
       ->where('Valid', 1)
       ->orderBy('name', 'asc')
       ->paginate($request->limit)
);

Mai departe, ca si optimizare, ar trebui si un debounce la metoda getInfo(). Google it.

2 Likes
7

Ceva imi spune ca mai trebuie sa pui un then.

getInfo()
{
    axios.get('/srt',
    {
        search: this.search
    })
    .then(response => this.results = response.data)//sau console.log(response.data)
    .catch(error => console.log(error));
}

Poate merge.

10

Acum e ok in sensul ca query-ul se actualizeaza si gaseste ce am scris in input-ul “search” merge bine (am verificat in loguri), dar acum nu stiu cum sa actualizez lista tabelelor cu ce a gasit query-ul din Controller…
Functia din controller:

public function sor(Request $request)
    {
        Log::critical($request->search);
        $query = PromsInfo::where('name','LIKE','%'.$request->search.'%')->orderBy('name', 'asc')->paginate(10);
        Log::critical($query);
        return response()->json($query);
    }

Methods:

getInfo()
            {
                axios.post('srt', {
                    search: this.search
                });
            },

Ruta: Route::post('srt', 'Promoters\PromoterController@sor');

11

Se poate uita cineva…?
Multumesc.

12

cateodata cand ma satur de SQL si ma gadesc la un ORM, insa cand vad asa ceva imi trece, cum e asta mai bine decat SQL, nici nu e type safe cu string-urile alea.

13

Momentan vreau sa-l fac functional, si dupa sa fac si securitatea/optimizarea, .etc. Dar vreau intai sa mearga…