这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要给大家介绍了 JS 中是如何实现 Laravel 的 route 函数,文中通过示例代码介绍的很详细,相信对大家具有一定的参考价值,有需要的朋友们下面来一起看看吧。
大家应该都知道在 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'
- })
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
来源: http://www.phperz.com/article/17/0624/327796.html