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 相关文章推荐
基于Jquery的开发个代阴影的对话框效果代码
Jul 28 Javascript
你必须知道的Javascript知识点之"深入理解作用域链"的介绍
Apr 23 Javascript
jQuery拖拽 & 弹出层 介绍与示例
Dec 27 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
Oct 28 Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 Javascript
微信小程序使用第三方库Immutable.js实例详解
Sep 27 Javascript
基于jQuery实现Tabs选项卡自定义插件
Nov 21 Javascript
学习vue.js表单控件绑定操作
Dec 05 Javascript
vue.js指令v-model使用方法
Mar 20 Javascript
jQuery实现html双向绑定功能示例
Oct 09 jQuery
浅谈Vue2.0中v-for迭代语法的变化(key、index)
Mar 06 Javascript
浅入深出Vue之组件使用
Jul 11 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
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
jquery 分页控件实现代码
2009/11/30 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
javascript中键盘事件用法实例分析
2015/01/30 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
2015/04/25 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
解决Python中pandas读取*.csv文件出现编码问题
2019/07/12 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
python中enumerate() 与zip()函数的使用比较实例分析
2019/09/03 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
python切割图片的示例
2020/11/12 Python
python RSA加密的示例
2020/12/09 Python
python 利用matplotlib在3D空间绘制二次抛物面的案例
2021/02/06 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
HTML5 播放 RTSP 视频的实例代码
2019/07/29 HTML / CSS
Feelunique德国官方网站:欧洲最大的在线美容零售商
2019/07/20 全球购物
销售工作岗位职责
2013/12/24 职场文书
建筑总经理岗位职责
2014/02/02 职场文书
英文求职信写作小建议
2014/02/16 职场文书
元旦联欢会感言
2014/03/04 职场文书
《小鹰学飞》教学反思
2014/04/23 职场文书
煤矿安全知识竞赛活动总结
2014/07/07 职场文书
社区务虚会发言材料
2014/10/20 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
无线电知识基础入门篇
2022/02/18 无线电