在 JS 中实现 Laravel 的 route 函数

zhangqh 发布于2019-06-27 14:42 / 2498人阅读

摘要：所以推荐给每个路由都命个名，并通过路由名的方式来获取。所以我就考虑能不能在中实现一个类似后端的函数。最终的解决方案很简单，两个函数就可以搞定。

在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几乎没有差别

私有云云服务器 fec在webrtc中实现 js中实现历史记录在浏览器中实现webrtc视频传输中实现单点登录

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/21969.html

在Laravel项目中实现Ajax上传用户头像

摘要：在编写程序的过程中，经常会遇到一个经典的文件上传场景上传头像图片。基于对最好的用户体验的追求，写一下之前在项目中实现在项目中的上传头像。在编写web程序的过程中，经常会遇到一个经典的文件上传场景：上传头像（图片）。基于对最好的用户体验的追求，写一下之前在项目中实现在Laravel项目中的Ajax上传头像。 1.配置路由在Laravel的routes.php中设置路由： Rou...

shiina 2019-06-27 11:20 评论0 收藏0
Laravel 依赖注入源码解析

在 Laravel 的控制器的构造方法或者成员方法，都可以通过类型约束的方式使用依赖注入，如： public function store(Request $request) { //TODO } 这里 $request 参数就使用了类型约束，Request 是类型约束的类型，它是一个类：IlluminateHttpRequest. 本文研究 Laravel 的依赖注入原理，为什么这样定义...

Donne 2019-06-28 18:17 评论0 收藏0
Laravel 5.4 入门系列 11. 通过邮件激活注册用户

摘要：我们稍微封装下代码吧请您激活账户方法用于保存或更新字段方法用于判断是否在小时之内使用管理邮件在刚才的例子中，我们使用的是提供的方法来快速创建和发送邮件。使用 Mailtrap 测试邮件功能 Mailtrap 提供了简单的测试邮件的服务，步骤如下：登录网站 Mailtrap 注册用户注册成功之后，会自动创建一个 demo，点进去之后就可以看到配置信息 showImg(https...

dendoink 2019-06-27 16:17 评论0 收藏0
前端知识点总结——Angular

摘要：前端知识点总结一概述基于命令行的开发方式编译工作集成了打包工具。。。。在浏览器中接管展现应用的内容，并根据我们提供的操作指令响应用户的交互。在开发时，八大组成部分模块组件模板自带的标签指令绑定相关的的语法元数据告诉如何处理一个类。前端知识点总结——Angular 一、Angular概述基于命令行的开发方式？ ①hot reload ②编译工作 ③集成了webpack打包工具。。。...

BaronZhang 2019-08-22 16:01 评论0 收藏0
Laravel深入学习4 - 服务提供器

摘要：一个服务提供器必须包含至少一种方法。服务提供器一旦被注册，就可被用于程序的各个地方。注意服务提供器的变量来自类中。启动服务当所有的服务提供器注册之后，他们就变成了已启动状态。再次提示，把服务提供器作为一种组织工具来使用。声明：本文并非博主原创，而是来自对《Laravel 4 From Apprentice to Artisan》阅读的翻译和理解，当然也不是原汁原味的翻译，能保证90%...

daryl 2019-06-27 16:29 评论0 收藏0