Devil May Code...

Vergil's Blog

你也许仍然想念着Laravel 4 中那个“漂亮的”Whoops样式的错误处理器,下面告诉你如何在Laravel 5中使用它。

首先,composer require filp/whoops:~1.0.

然后打开 app/Exceptions/Handler.php, 在render()方法中添加一个Whoops样式的处理情况,就像下面这样:

/**
 * Render an exception into an HTTP response.
 *
 * @param  \Illuminate\Http\Request  $request
 * @param  \Exception  $e
 * @return \Illuminate\Http\Response
 */
public function render($request, Exception $e)
{
    if ($this->isHttpException($e))
    {
        return $this->renderHttpException($e);
    }


    if (config('app.debug'))
    {
        return $this->renderExceptionWithWhoops($e);
    }

    return parent::render($request, $e);
}

/**
 * Render an exception using Whoops.
 * 
 * @param  \Exception $e
 * @return \Illuminate\Http\Response
 */
protected function renderExceptionWithWhoops(Exception $e)
{
    $whoops = new \Whoops\Run;
    $whoops->pushHandler(new \Whoops\Handler\PrettyPageHandler());

    return new \Illuminate\Http\Response(
        $whoops->handleException($e),
        $e->getStatusCode(),
        $e->getHeaders()
    );
}

就是这么简单!

感谢Laracasts论坛中的这个帖子,是它让我想到要写出这么一篇博文。


原文地址:https://mattstauffer.co/blog/bringing-whoops-back-to-laravel-5
转自:http://www.golaravel.com/post/bringing-whoops-back-to-laravel-5/


转自:http://allensuiverson.blog.163.com/blog/static/13364826920131013103226827/


PHP是弱类型,动态的语言脚本。在申明一个变量的时候,并不需要指明它保存的数据类型。例如:

<?php  
$var = 1;  
$var = "variable";  
$var = 1.00;  
$var = array();  
$var = new Object();  

动态变量,在运行期间是可以改变的,并且在使用前无需声明变量类型。

阅读剩余部分...


前言

一般来说,AJAX请求与普通HTTP请求没有任何的区别。但jQuery框架会在Request header加上X-Requested-With:XMLHttpRequest

但这并不是一个标准,所以并非所有AJAX请求都会发送这个request header。原生的XMLHttpRequest对象就没有这个东西。

AngularJS的$http服务也不会发送这个header。

由于jQuery的流行,很多PHP框架会以此来判断这个请求是否AJAX。

例如:

LaravelIlluminate\Http\Request::ajax()方法。该类继承自Symfony框架的Symfony\Component\HttpFoundation\Request并使用了它的isXmlHttpRequest()来判断是否AJAX请求。

国内著名的ThinkPHP框架,IS_AJAX常量也是以此来判断是否AJAX。

define('IS_AJAX', ((isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') 

阅读剩余部分...


前言

第三方登录认证能简化用户登录/注册的操作,降低用户登录/注册的门槛,对提高应用的用户转化率很有帮助。

Socialite

Laravel 为我们提供了简单、易用的方式,使用 Laravel Socialite 进行 OAuth(OAuth1 和 OAuth2 都有支持) 认证。

Socialite 目前支持的认证有 Facebook、Twitter、Google、LinkedIn、GitHub、Bitbucket。(恩,有一半是“不存在”的网站。)
Socialite 的用法官方文档中已经讲得很详细了,恕不赘述。
英文好的同学,建议直接看 Laravel 官方文档,毕竟看二手知识是有高风险的
英文不好的同学(比如我),下面是中文文档:
Laravel 5.0:http://laravel-china.org/docs/5.0/authentication#social-authentication
Laravel 5.1:http://laravel.tw/docs/5.1/authentication#social-authentication

SocialiteProviders

SocialiteProviders 通过扩展 Socialite 的 Driver,实现了很多第三方认证。国内的有:微博、QQ、微信、豆瓣。当然你自己也可以参照实现其他的,只要那个网站支持 OAuth。
SocialiteProviders 的使用也超级简单易用,每个都对应了文档。其实,不懂英文也能看懂。
文档地址:http://socialiteproviders.github.io/
其实,文章到这里就应该结束了。由于文档是基于 Laravel5.0 的,所以我还是打算基于 Laravel5.1 演示一遍,并说一下要注意的地方吧。

阅读剩余部分...


今天,把一个项目的无限分类功能整理出来作为一个package开源发布到Packagist。用Laravel的同学可以看看,欢迎提建议或者贡献你的代码:)
顺手就给个star吧,感谢。

Packagist:https://packagist.org/packages/vergil-lai/node-categories
Github:https://github.com/vergil-lai/node-categoires


上一篇博文提到,是由于jQuery.val()方法设置DOM元素的值的时候,并没有触发AngularJS的$digest循环。然后我写了一个directive来解决这个问题。

那是否可以有一个更加通用的方法,让AngularJS适应其他使用val()方法设置值的jQuery插件呢?如何让val()自动触发DOM事件??

jQuery Hooks

豆浆油条求助,得知jQuery有一个API,称为“hook(钩子)”(怪自己不去看官方文档)。

Hooks可以使用在val()css()attr()prop()这些getter/setter方法上。如果你设置了hook,当你调用这些函数的时候,jQuery会触发你hook定义的方法。

Hooks签名如下:

var someHook = {
    get: function(elem) {
        // obtain and return a value
        return "something";
    },
    set: function(elem, value) {
        // do something with value
    }
}

.val() Hooks

valHooks允许我们拦截.val()的功能

HTML:

<input type="text" id="t" />

JavaScript:

$.valHooks.text = {
    set: function(elem, val) {
        elem.value = 'hello  ' + val;
        return true;
    },
    get: function(elem) {
        return 'fuck';
    }
}

$('#t').val('world!');      //设置值为:hello world!
$('#t').val();              //返回:fuck

.css() Hooks

以后补充

.prop()和.attr() Hooks

以后补充

使用valHooks让jQuery.val()与AngularJS模型数据同步

知道Hooks之后,我们就可以拦截.val()的功能,在设置好值之后,触发一个让AngularJS进入$degist的情况。比如,触发input事件

Example:

<!doctype html>
<html ng-app="app">
    <head>
        <script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
        <script src="http://cdn.bootcss.com/angular.js/1.4.8/angular.min.js"></script>
        <script>
            $(function(){
                $('#setvalue').on('click', function() {
                    $('#input').val('hello world!');
                });

                $.valHooks.text = {
                    set: function(elem, val) {
                        elem.value = val;   //把DOM元素设置为传进来的val值
                        $(elem).trigger('input');  //触发input事件
                        return true;
                    }
                };
            });
        </script>
    </head>
    <body>
        <div>
            <input type="text" ng-model="value" id="input" />
            <button type="button" id="setvalue">jQuery set value</button>
            <p>ng model value is:{{value}}</p>
        </div>
    </body>
</html>

OK,那么现在,使用val()方法设置元素的值之后,也可能让AngularJS的模型同步了。

一般情况下,这样子确实可以解决问题,但如果你不想让它触发input事件呢?比如说,你的input事件有另外的功能。

我的思路就是,触发一个自定义事件,写一个directive监听该事件。

Example:

<!doctype html>
<html ng-app="app">
    <head>
        <script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
        <script src="http://cdn.bootcss.com/angular.js/1.4.8/angular.min.js"></script>
        <script>
            $(function(){
                $('#setvalue').on('click', function() {
                    $('#input').val('hello world!');
                });

                $.valHooks.text = {
                    set: function(elem, val) {
                        elem.value = val;
                        $(elem).trigger('jquery.set.value');    //触发自定义事件
                        return true;
                    }
                };
            });
        </script>
    </head>
    <body>
        <div>
            <!-- 注意这个input标签使用了jqSetValue组件 -->
            <input type="text" ng-model="value" id="input" jq-set-value />
            <button type="button" id="setvalue">jQuery set value</button>
            <p>ng model value is:{{value}}</p>
        </div>
        <script>
            angular.module('app', []).directive('jqSetValue', function() {
                return {
                    restrict: 'AC',
                    require: '?ngModel',
                    link: function(scope, element, attrs, ngModel) {
                         //设置自定义事件的回调函数
                        element.on('jquery.set.value', function(event) {
                            if(!ngModel) return;
                            scope.$apply(function(){
                                ngModel.$setViewValue($(element).val());
                            });
                        });
                    }
                };
            });
        </script>
    </body>
</html>

今天在AngularJS下使用Fuel UXspinbox时出现了问题:

如果手动输入input的值,一切正常。但如果使用spinbox的增加/减少按钮时,DOM已经被改变,$scope却无法同步修改后的值。

示例代码如下:

<div class="spinbox" data-initialize="spinbox" id="mySpinbox">
  <input type="text" class="form-control input-mini spinbox-input" ng-model="number">
  <div class="spinbox-buttons btn-group btn-group-vertical">
    <button type="button" class="btn btn-default spinbox-up btn-xs">
      <span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
    </button>
    <button type="button" class="btn btn-default spinbox-down btn-xs">
      <span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
    </button>
  </div>
</div>

Why?

查看FuelUX源码可以发现它是使用jQuery的val()方法去修改DOM的值的(猜也猜到-_-||)。所以并没有启动$digest循环,详细看这篇文章

解决办法

最简单的方法就是直接改FuelUX的源码,找到它调用render()方法之后,触发一下input事件:

this.$element.trigger('input');     

不过这种修改别人源码的做法非常不好

那么,我写了一个directive来更新模型:

angular.module('your-app').directive('spinbox', ['$parse', function($parse) {
    return {
        restrict: 'C',      //以ClassName的形式被声明
        link: function(scope, element, attrs) {
            element.on('changed.fu.spinbox', function() {
                var $spinbox = angular.element(this);
                var $input = $spinbox.find('.spinbox-input');
                var model = $input.attr('ng-model');

                if (!model) return;

                var setter = $parse(model).assign;
                scope.$apply(function(){
                    setter(scope, $spinbox.spinbox('value'));
                });
            });

        }
    }
}]);

使用jQuery钩子与AngularJS模型数据同步

OK,如果有更好的方法,欢迎讨论:)


转自阮一峰的网络日志


我每天使用 Git ,但是很多命令记不住。
一般来说,日常使用只要记住下图6个命令,就可以了。但是熟练使用,恐怕要记住60~100个命令。

下面是我整理的常用 Git 命令清单。几个专用名词的译名如下。
Workspace:工作区
Index / Stage:暂存区
Repository:仓库区(或本地仓库)
Remote:远程仓库

阅读剩余部分...


Powered by Typecho.