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 相关文章推荐
eval与window.eval的差别分析
Mar 17 Javascript
基于jquery的动态创建表格的插件
Apr 05 Javascript
ToolTips JQEURY插件之简洁小提示框效果
Nov 19 Javascript
JavaScript定时器详解及实例
Aug 01 Javascript
利用jquery包将字符串生成二维码图片
Sep 12 Javascript
JS保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
node.js使用nodemailer发送邮件实例
Mar 10 Javascript
Javascript闭包(Closure)详解
May 05 Javascript
底部悬浮通栏可以关闭广告位的实现方法
Jun 01 Javascript
Javascript基础_简单比较undefined和null 值
Jun 14 Javascript
Javascript 对cookie操作详解及实例
Dec 29 Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 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
mysq GBKl乱码
2006/11/28 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
JoshChen_web格式编码UTF8-无BOM的小细节分析
2013/08/16 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
javascript各种复制代码收集
2008/09/20 Javascript
javascript 清除输入框中的数据
2009/04/13 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
javascript动态设置样式style实例分析
2015/05/13 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
[05:23]DOTA2-DPC中国联赛2月1日Recap集锦
2021/03/11 DOTA
python实现简单名片管理系统
2018/11/30 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
详解将Pandas中的DataFrame类型转换成Numpy中array类型的三种方法
2019/07/06 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
selenium中get_cookies()和add_cookie()的用法详解
2020/01/06 Python
python和node.js生成当前时间戳的示例
2020/09/29 Python
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
解释一下抽象方法和抽象类
2016/08/27 面试题
优秀通讯员事迹材料
2014/01/28 职场文书
2015年项目工作总结
2015/04/29 职场文书
新兵入伍决心书
2015/09/22 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书
MySQL GRANT用户授权的实现
2021/06/18 MySQL
解决MySQL报“too many connections“错误
2022/04/19 MySQL
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android