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

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!

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');

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]);

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;

. 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();
}

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}

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;
}

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

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') }}'
    }
};

In der js-Datei:

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

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!