Heim > PHP-Framework > Laravel > Hauptteil

Bringen Sie Ihnen bei, wie Sie die Routenfunktion von Laravel in JS implementieren

藏色散人
Freigeben: 2020-05-24 14:17:50
nach vorne
6796 Leute haben es durchsucht

Die folgende Tutorial-Kolumne, entwickelt von Laravel, , stellt Ihnen coole Vorgänge in Laravel ORM vor, die Sie noch nicht kennen. Ich hoffe, dass sie für Freunde hilfreich sein wird brauche es!

Bringen Sie Ihnen bei, wie Sie die Routenfunktion von Laravel in JS implementieren

Im Routing-Modul von Laravel können wir für jede Route einen Namen festlegen, wie zum Beispiel:

Route::get('/blog/{blog}', 'BlogController@show')->name('blog.show');
Nach dem Login kopieren

Dann können wir route('blog .show' , ['blog' => 1]), um die Zugriffsadresse dieser Route zu erhalten, kann mit

return redirect()->route('blog.show', ['blog' => 1]);
Nach dem Login kopieren

durchgeführt werden. Der Vorteil davon ist, dass ich beispielsweise die URL ändern möchte in Um /blog/{blog} in /boke/{blog} zu ändern, müssen Sie nur die Routing-Datei ändern und es sind keine weiteren Anpassungen erforderlich. Daher wird empfohlen, jeder Route einen Namen zu geben und diesen über den Routennamen abzurufen.

Dies kann jedoch nur in den Backend- und Blade-Vorlagen verwendet werden. Websites mit einem etwas größeren Maßstab trennen die JS-Dateien und schreiben die JS-Dateien nicht direkt in die Blade-Vorlage, was dazu führt, dass Ajax gesendet wird js Sie können die Anforderungsadresse nur fest codieren, wenn Sie eine Anforderung oder einen Seitensprung durchführen, z. B.

location.href = '/blog/' + id;
Nach dem Login kopieren

. Wenn sich in diesem Fall die Route ändert, müssen Sie die js-Datei ändern Wird von mehreren js aufgerufen, ist es leicht, das Ziel zu übersehen. Ändern Sie einige Dinge.

Also habe ich darüber nachgedacht, ob ich eine Backend-ähnliche Routenfunktion in js implementieren könnte.

Die endgültige Lösung ist sehr einfach, nur zwei Funktionen können dies tun.

Der Back-End-Teil muss eine Funktion implementieren:

function route_uri($name)
{
    return app('router')->getRoutes()->getByName($name)->getUri();
}
Nach dem Login kopieren

Die Funktion dieser Funktion besteht darin, die ursprüngliche Routing-Adresse basierend auf dem Routennamen zurückzugeben, zum Beispiel:

echo route_uri('blog.show'); 
// 会输出/blog/{blog}
Nach dem Login kopieren

Das Frontend benötigt auch nur eine Funktion:

let route = (routeUrl, param) => {
    let append = [];
    for (let x in param) {
        let search = '{' + x + '}';
        if (routeUrl.indexOf(search) >= 0) {
            routeUrl = routeUrl.replace('{' + x + '}', param[x]);
        } else {
            append.push(x + '=' + param[x]);
        }
    }
    let url = '/' + _.trimStart(routeUrl, '/');
    if (append.length == 0) {
        return url;
    }
    if (url.indexOf('?') >= 0) {
        url += '&';
    } else {
        url += '?';
    }
    url += append.join('&');
    return url;
}
Nach dem Login kopieren

Hinweis 1: ES6-Syntax, wenn Sie Babel nicht verwenden, konvertieren Sie es selbst in ES5

Hinweis 2: lodash

wird hier zitiert:

route('/blog/{blog}', {blog: 1}); //返回 /blog/1
route('/blog/{blog}', {blog: 1, preview: 1}); //返回 /blog/1?preview=1
Nach dem Login kopieren

Dann ist es ganz einfach, in der Blade-Vorlage alle Pfade zu definieren, die auf dieser Seite verwendet werden müssen:

var routes = {
    blog: {
        show: '{{ route_uri('blog.show') }}',
        update: '{{ route_uri('blog.update') }}',
        destroy: '{{ route_uri('blog.destroy') }}'
    }
};
Nach dem Login kopieren

In der js-Datei:

$.post(route(routes.blog.update, {blog: 1}), {title: 'xxx', content: 'xxx'})
Nach dem Login kopieren

Es gibt fast keinen Unterschied zwischen der Verwendung und der Backend-Route

Weitere technische Artikel zum Laravel-Framework finden Sie unter LaravelTutorial!

Das obige ist der detaillierte Inhalt vonBringen Sie Ihnen bei, wie Sie die Routenfunktion von Laravel in JS implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!