JS中如何实现Laravel的route函数详解


Posted in Javascript onFebruary 12, 2017

大家应该都知道在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文件单独拎出来,不会直接写在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;
}

注:这里引用了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'})

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
百度 popup.js 完美修正版非常的不错 脚本之家推荐
Apr 17 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
Oct 21 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 Javascript
微信小程序实现实时圆形进度条的方法示例
Feb 24 Javascript
jQuery自定义多选下拉框效果
Jun 19 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 Javascript
js实现秒表计时器
Dec 16 Javascript
原生JS实现多条件筛选
Aug 19 Javascript
js实现车辆管理系统
Aug 26 Javascript
js输入框使用正则表达式校验输入内容的实例
Feb 12 #Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 #Javascript
老生常谈jquery id选择器和class选择器的区别
Feb 12 #Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
Feb 12 #Javascript
浅谈jQuery中事情的动态绑定
Feb 12 #Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
Feb 12 #Javascript
jq stop()和:is(:animated)的用法及区别(详解)
Feb 12 #Javascript
You might like
收音机术语解释
2021/03/01 无线电
php 各种应用乱码问题的解决方法
2010/05/09 PHP
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
Laravel 5框架学习之Blade 简介
2015/04/08 PHP
php查询whois信息的方法
2015/06/08 PHP
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
PHP实现二维数组按照指定的字段进行排序算法示例
2019/04/23 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
教你用jquery实现iframe自适应高度
2014/06/11 Javascript
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
JavaScript中Function详解
2015/02/27 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
记React connect的几种写法(小结)
2018/09/18 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
[02:00]最后,我终于出了辉耀
2018/03/27 DOTA
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
Python 备份程序代码实现
2017/03/06 Python
Python中利用xpath解析HTML的方法
2018/05/14 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
关于初始种子自动选取的区域生长实例(python+opencv)
2020/01/16 Python
Pytorch 卷积中的 Input Shape用法
2020/06/29 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
上学迟到的检讨书
2014/01/11 职场文书
优秀大学生的自我评价
2014/01/16 职场文书
搞笑征婚广告词
2014/03/17 职场文书
企业形象策划方案
2014/05/29 职场文书
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript
 python中的元类metaclass详情
2022/05/30 Python
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python