Apprenez à implémenter la fonction route de Laravel dans JS

La colonne tutorielle suivante, développée par Laravel, , vous présentera des opérations intéressantes que vous ne connaissez pas dans Laravel ORM. J'espère qu'elle sera utile aux amis qui. j'en ai besoin !

Dans le module de routage de Laravel, nous pouvons définir un nom pour chaque itinéraire, tel que :

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

Ensuite, nous pouvons passer route('blog .show' , ['blog' => 1]) pour obtenir l'adresse d'accès de cette route. Le saut backend peut être effectué avec

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

. L'avantage est que si l'url change, par exemple, je veux. Pour changer /blog/{blog} en /boke/{blog}, il vous suffit de modifier le fichier de routage et aucun autre ajustement n'est nécessaire. Par conséquent, il est recommandé de donner un nom à chaque itinéraire et de l'obtenir via le nom de l'itinéraire.

Mais cela ne peut être utilisé que dans les modèles backend et blade. Les sites Web avec une échelle légèrement plus grande sépareront les fichiers js et n'écriront pas les js directement dans le modèle blade, ce qui entraînera l'envoi d'ajax. le js Vous ne pouvez coder en dur l'adresse de la requête que lors d'une requête ou d'un saut de page, comme

location.href = '/blog/' + id;

. Dans ce cas, si l'itinéraire change, vous devez modifier le fichier js. est appelé par plusieurs js, il est facile de rater la cible. Changez quelques choses.

J'ai donc réfléchi à la possibilité d'implémenter une fonction de route de type backend dans js.

La solution finale est très simple, seulement deux fonctions peuvent le faire.

La partie back-end doit implémenter une fonction :

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

La fonction de cette fonction est de renvoyer l'adresse de routage d'origine en fonction du nom de la route, par exemple :

echo route_uri('blog.show'); 
// 会输出/blog/{blog}

Le front-end n'a également besoin que d'une seule fonction :

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

Remarque 1 : syntaxe ES6, si vous n'utilisez pas babel, convertissez-la vous-même en ES5

Remarque 2 : lodash

est cité ici. La fonction de cette fonction est :

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

Ensuite, c'est très simple, dans le modèle de lame, définissez tous les chemins qui doivent être utilisés sur cette page dans un objet :

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

Dans le fichier js :

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

Il n'y a presque aucune différence entre l'utilisation et la route backend

Pour plus d'articles techniques sur le framework Laravel, veuillez visiter le tutoriel laravel !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!