在 JS 中實現 Laravel 的 route 函數

zhangqh 發布于2019-06-27 14:42 / 2606人閱讀

摘要：所以推薦給每個路由都命個名，并通過路由名的方式來獲取。所以我就考慮能不能在中實現一個類似后端的函數。最終的解決方案很簡單，兩個函數就可以搞定。

在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幾乎沒有差別

GPU云服務器云服務器 fec在webrtc中實現 js中實現歷史記錄在瀏覽器中實現webrtc視頻傳輸中實現單點登錄

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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