摘要:所以推薦給每個(gè)路由都命個(gè)名,并通過路由名的方式來獲取。所以我就考慮能不能在中實(shí)現(xiàn)一個(gè)類似后端的函數(shù)。最終的解決方案很簡單,兩個(gè)函數(shù)就可以搞定。
在Laravel的路由模塊里,我們可以給每一個(gè)路由設(shè)定一個(gè)名字,比如:
Route::get("/blog/{blog}", "BlogController@show")->name("blog.show");
然后就可以通過 route("blog.show", ["blog" => 1]) 來獲取到這個(gè)路由的訪問地址,后端跳轉(zhuǎn)可以用
return redirect()->route("blog.show", ["blog" => 1]);
這樣做的好處是如果發(fā)生url變更,比如我想把/blog/{blog}改成/boke/{blog},只需要改路由文件,別的地方都不用調(diào)整。所以推薦給每個(gè)路由都命個(gè)名,并通過路由名的方式來獲取。
但這個(gè)僅限于后端以及blade模板可以使用,稍微上點(diǎn)規(guī)模的網(wǎng)站都會(huì)把js文件多帶帶拎出來,不會(huì)把js直接寫在blade模板中,這樣就導(dǎo)致js里發(fā)ajax請(qǐng)求時(shí)或者頁面跳轉(zhuǎn)時(shí)只能將請(qǐng)求地址寫死,比如
location.href = "/blog/" + id;
這樣萬一路由發(fā)生變更,還得去修改js文件,如果同一個(gè)路由被多個(gè)js調(diào)用,很容易漏改那么一兩個(gè)。
所以我就考慮能不能在js中實(shí)現(xiàn)一個(gè)類似后端的route函數(shù)。
最終的解決方案很簡單,兩個(gè)函數(shù)就可以搞定。
后端部分需要實(shí)現(xiàn)一個(gè)函數(shù):
function route_uri($name) { return app("router")->getRoutes()->getByName($name)->getUri(); }
這個(gè)函數(shù)的作用是根據(jù)路由名稱返回原始的路由地址,比如:
echo route_uri("blog.show"); // 會(huì)輸出/blog/{blog}
前端也只需要一個(gè)函數(shù):
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的自行轉(zhuǎn)ES5
注2:這里引用了lodash
這個(gè)函數(shù)的作用是:
route("/blog/{blog}", {blog: 1}); //返回 /blog/1 route("/blog/{blog}", {blog: 1, preview: 1}); //返回 /blog/1?preview=1
然后就很簡單了,在blade模板中把這個(gè)頁面所有需要用到的路定義在一個(gè)對(duì)象中:
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幾乎沒有差別
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/21969.html
摘要:在編寫程序的過程中,經(jīng)常會(huì)遇到一個(gè)經(jīng)典的文件上傳場景上傳頭像圖片。基于對(duì)最好的用戶體驗(yàn)的追求,寫一下之前在項(xiàng)目中實(shí)現(xiàn)在項(xiàng)目中的上傳頭像。 在編寫web程序的過程中,經(jīng)常會(huì)遇到一個(gè)經(jīng)典的文件上傳場景:上傳頭像(圖片)。基于對(duì)最好的用戶體驗(yàn)的追求,寫一下之前在項(xiàng)目中實(shí)現(xiàn)在Laravel項(xiàng)目中的Ajax上傳頭像。 1.配置路由 在Laravel的routes.php中設(shè)置路由: Rou...
在 Laravel 的控制器的構(gòu)造方法或者成員方法,都可以通過類型約束的方式使用依賴注入,如: public function store(Request $request) { //TODO } 這里 $request 參數(shù)就使用了類型約束,Request 是類型約束的類型,它是一個(gè)類:IlluminateHttpRequest. 本文研究 Laravel 的依賴注入原理,為什么這樣定義...
摘要:我們稍微封裝下代碼吧請(qǐng)您激活賬戶方法用于保存或更新字段方法用于判斷是否在小時(shí)之內(nèi)使用管理郵件在剛才的例子中,我們使用的是提供的方法來快速創(chuàng)建和發(fā)送郵件。 使用 Mailtrap 測試郵件功能 Mailtrap 提供了簡單的測試郵件的服務(wù),步驟如下: 登錄網(wǎng)站 Mailtrap 注冊(cè)用戶 注冊(cè)成功之后,會(huì)自動(dòng)創(chuàng)建一個(gè) demo,點(diǎn)進(jìn)去之后就可以看到配置信息 showImg(https...
摘要:前端知識(shí)點(diǎn)總結(jié)一概述基于命令行的開發(fā)方式編譯工作集成了打包工具。。。。在瀏覽器中接管展現(xiàn)應(yīng)用的內(nèi)容,并根據(jù)我們提供的操作指令響應(yīng)用戶的交互。在開發(fā)時(shí),八大組成部分模塊組件模板自帶的標(biāo)簽指令綁定相關(guān)的的語法元數(shù)據(jù)告訴如何處理一個(gè)類。 前端知識(shí)點(diǎn)總結(jié)——Angular 一、Angular概述 基于命令行的開發(fā)方式? ①hot reload ②編譯工作 ③集成了webpack打包工具 。。。...
摘要:一個(gè)服務(wù)提供器必須包含至少一種方法。服務(wù)提供器一旦被注冊(cè),就可被用于程序的各個(gè)地方。注意服務(wù)提供器的變量來自類中。啟動(dòng)服務(wù)當(dāng)所有的服務(wù)提供器注冊(cè)之后,他們就變成了已啟動(dòng)狀態(tài)。再次提示,把服務(wù)提供器作為一種組織工具來使用。 聲明:本文并非博主原創(chuàng),而是來自對(duì)《Laravel 4 From Apprentice to Artisan》閱讀的翻譯和理解,當(dāng)然也不是原汁原味的翻譯,能保證90%...
閱讀 3095·2021-10-15 09:41
閱讀 3167·2021-09-22 16:05
閱讀 2405·2021-09-22 15:19
閱讀 2873·2021-09-02 15:11
閱讀 2446·2019-08-30 15:52
閱讀 832·2019-08-30 11:06
閱讀 1001·2019-08-29 16:44
閱讀 1240·2019-08-23 18:18