登录  /  注册
首页 > php框架 > Laravel > 正文

教你在JS中实现Laravel的route函数

藏色散人
发布: 2020-05-24 14:17:50
转载
6547人浏览过

下面由Laravel开发教程栏目给大家介绍Laravel ORM 中你不知道的骚操作,希望对需要的朋友有所帮助!

教你在JS中实现Laravel的route函数

在Laravel的路由模块里,我们可以给每一个路由设定一个名字,比如:

Route::get('/blog/{blog}', 'BlogController@show')->name('blog.show');
登录后复制

然后就可以通过 route('blog.show', ['blog' => 1]) 来获取到这个路由的访问地址,后端跳转可以用

return redirect()->route('blog.show', ['blog' => 1]);
登录后复制

这样做的好处是如果发生url变更,比如我想把/blog/{blog}改成/boke/{blog},只需要改路由文件,别的地方都不用调整。所以推荐给每个路由都命个名,并通过路由名的方式来获取。

但这个仅限于后端以及blade模板可以使用,稍微上点规模的网站都会把js文件单独拎出来,不会把js直接写在blade模板中,这样就导致js里发ajax请求时或者页面跳转时只能将请求地址写死,比如

location.href = '/blog/' + id;
登录后复制

这样万一路由发生变更,还得去修改js文件,如果同一个路由被多个js调用,很容易漏改那么一两个。

所以我就考虑能不能在js中实现一个类似后端的route函数。

最终的解决方案很简单,两个函数就可以搞定。

后端部分需要实现一个函数:

function route_uri($name)
{
    return app('router')->getRoutes()->getByName($name)->getUri();
}
登录后复制

这个函数的作用是根据路由名称返回原始的路由地址,比如:

echo route_uri('blog.show'); 
// 会输出/blog/{blog}
登录后复制

前端也只需要一个函数:

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;
}
登录后复制

注1:ES6语法,如果没用babel的自行转ES5

注2:这里引用了lodash

这个函数的作用是:

route('/blog/{blog}', {blog: 1}); //返回 /blog/1
route('/blog/{blog}', {blog: 1, preview: 1}); //返回 /blog/1?preview=1
登录后复制

然后就很简单了,在blade模板中把这个页面所有需要用到的路定义在一个对象中:

var routes = {
    blog: {
        show: '{{ route_uri('blog.show') }}',
        update: '{{ route_uri('blog.update') }}',
        destroy: '{{ route_uri('blog.destroy') }}'
    }
};
登录后复制

在js文件里就可以:

$.post(route(routes.blog.update, {blog: 1}), {title: 'xxx', content: 'xxx'})
登录后复制

用法和后端的route几乎没有差别

更多laravel框架技术文章,请访问laravel教程!

以上就是教你在JS中实现Laravel的route函数的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:segmentfault网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号