xibaachao 发布的文章

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

Eloquent ORM 看起来是一个简单的机制,但是在底层,有很多半隐藏的函数和鲜为人知的方式来实现更多功能。在这篇文章中,我将演示几个小技巧。

递增和递减

要代替以下实现:

$article = Article::find($article_id);

$article->read_count++;

$article->save();

你可以这样做:

$article = Article::find($article_id);

$article->increment('read_count');

以下这些方法也可以实现:

Article::find($article_id)->increment('read_count');

Article::find($article_id)->increment('read_count', 10); // +10

Product::find($produce_id)->decrement('stock'); // -1

先执行 X 方法,X 方法执行不成功则执行 Y 方法

Eloquent 有相当一部分函数可以把两个方法结合在一起使用, 例如 『 请先执行 X 方法, X 方法执行不成功则执行 Y 方法 』。

实例 1 -- findOrFail():

要替代以下代码的实现:

$user = User::find($id);
if (!$user) { abort (404); }

你可以这样写:

$user = User::findOrFail($id);
实例 2 -- firstOrCreate():

要替代以下代码的实现:

$user = User::where('email', $email)->first();
if (!$user) {
  User::create([
    'email' => $email
  ]);
}

这样写就可以了:

$user = User::firstOrCreate(['email' => $email]);

模型的 boot() 方法

在一个 Eloquent 模型中,有个神奇的地方,叫 boot(),在那里,你可以覆盖默认的行为:

class User extends Model
{
    public static function boot()
    {
        parent::boot();
        static::updating(function($model)
        {
            // 写点日志啥的
            // 覆盖一些属性,类似这样 $model->something = transform($something);
        });
    }
}

在创建模型对象时设置某些字段的值,大概是最受欢迎的例子之一了。 一起来看看在创建模型对象时,你想要生成 UUID 字段 该怎么做。

public static function boot()
{
  parent::boot();
  self::creating(function ($model) {
    $model->uuid = (string)Uuid::generate();
  });
}

带条件与排序的关联关系

定义关联关系的一般方式:

public function users() {
    return $this->hasMany('App\User');
}

你知道吗?也可以在上面的基础上增加 where 或者 orderBy?

举个例子,如果你想关联某些类型的用户,同时使用 email 字段排序,你可以这样做:

public function approvedUsers() {
    return $this->hasMany('App\User')->where('approved', 1)->orderBy('email');
}

模型特性:时间、追加等

Eloquent模型有些参数,使用类的属性形式。最常用是:

class User extends Model {
    protected $table = 'users';
    protected $fillable = ['email', 'password']; // 可以被批量赋值字段,如 User::create() 新增时,可使用字段
    protected $dates = ['created_at', 'deleted_at']; // 需要被Carbon维护的字段名
    protected $appends = ['field1', 'field2']; // json返回时,附加的字段
}

不只这些,还有:

protected $primaryKey = 'uuid'; // 更换主键
public $incrementing = false; // 设置 不自增长
protected $perPage = 25; // 定义分页每页显示数量(默认15)
const CREATED_AT = 'created_at';
const UPDATED_AT = 'updated_at'; //重写 时间字段名
public $timestamps = false; // 设置不需要维护时间字段

还有更多,我只列出了一些有意思的特性,具体参考文档 abstract Model class 了解所有特性.

通过 ID 查询多条记录

所有人都知道 find() 方法,对吧?

$user = User::find(1);

我十分意外竟然很少人知道这个方法可以接受多个 ID 的数组作为参数:

$users = User::find([1,2,3]);

*
WhereX

有一种优雅的方式能将这种代码:

$users = User::where('approved', 1)->get();

转换成这种:

$users = User::whereApproved(1)->get();

对,你没有看错,使用字段名作为后缀添加到 where 后面,它就能通过魔术方法运行了。

另外,在 Eloquent 里也有些和时间相关的预定义方法:

User::whereDate('created_at', date('Y-m-d'));
User::whereDay('created_at', date('d'));
User::whereMonth('created_at', date('m'));
User::whereYear('created_at', date('Y'));

通过关系排序

一个复杂一点的「技巧」。你想对论坛话题按最新发布的帖子来排序?论坛中最新更新的主题在最前面是很常见的需求,对吧?

首先,为主题的最新帖子定义一个单独的关系:

public function latestPost()
{
    return $this->hasOne(\App\Post::class)->latest();
}

然后,在控制器中,我们可以实现这个「魔法」:

$users = Topic::with('latestPost')->get()->sortByDesc('latestPost.created_at');

Eloquent::when() -- 不再使用 if-else

很多人都喜欢使用"if-else"来写查询条件,像这样:

if (request('filter_by') == 'likes') {
    $query->where('likes', '>', request('likes_amount', 0));
}
if (request('filter_by') == 'date') {
    $query->orderBy('created_at', request('ordering_rule', 'desc'));
}

有一种更好的方法 -- 使用 when()

$query = Author::query();
$query->when(request('filter_by') == 'likes', function ($q) {
    return $q->where('likes', '>', request('likes_amount', 0));
});
$query->when(request('filter_by') == 'date', function ($q) {
    return $q->orderBy('created_at', request('ordering_rule', 'desc'));
});

它可能看上去不是很优雅,但它强大的功能是传递参数:

$query = User::query();
$query->when(request('role', false), function ($q, $role) {
    return $q->where('role_id', $role);
});
$authors = $query->get();

一对多返回默认模型对象

假设现在有种情况是要显示文章的作者,然后模板代码是:

{{ $post->author->name }}

但是如果作者的信息被删除或者因为某些原因没有被设置。代码会返回一个错误,诸如 "property of non-object"。

当然你可以这样处理:

{{ $post->author->name ?? '' }}

你可以通过 Eloquent 关系这样做:

public function author()
{
    return $this->belongsTo('App\Author')->withDefault();
}

在此示例中,如果文字没有作者的信息, author() 会返回一个空的 AppAuthor 模型对象。

再者,我们也可以给默认的模型对象里面的属性赋默认值。

public function author()
{
    return $this->belongsTo('App\Author')->withDefault([
        'name' => 'Guest Author'
    ]);
}

通过赋值函数进行排序

想象一下你有这样的代码:

function getFullNameAttribute()
{
  return $this->attributes['first_name'] . ' ' . $this->attributes['last_name'];
}

现在,你想要通过 "full_name" 进行排序? 发现是没有效果的:

$clients = Client::orderBy('full_name')->get(); //没有效果

解决办法很简单.我们需要在获取结果后对结果进行排序.

$clients = Client::get()->sortBy('full_name'); // 成功!

注意的是方法名称是不相同的 -- 它不是orderBy,而是sortBy

全局作用域下的默认排序

如果你想要 User::all() 总是按照 name 字段来排序呢? 你可以给它分配一个全局作用域。让我们回到 boot() 这个我们在上文提到过的方法:

protected static function boot()
{
    parent::boot();

    // 按照 name 正序排序
    static::addGlobalScope('order', function (Builder $builder) {
        $builder->orderBy('name', 'asc');
    });
}

扩展阅读 查询作用域 。

原生查询方法

有时候,我们需要在 Eloquent 语句中添加原生查询。 幸运的是,确实有这样的方法。

// whereRaw
$orders = DB::table('orders')
    ->whereRaw('price > IF(state = "TX", ?, 100)', [200])
    ->get();

// havingRaw
Product::groupBy('category_id')->havingRaw('COUNT(*) > 1')->get();

// orderByRaw
User::where('created_at', '>', '2016-01-01')
  ->orderByRaw('(updated_at - created_at) desc')
  ->get();

复制:复制一行的副本

很简单。说明不是很深入,下面是复制数据库实体(一条数据)的最佳方法:

$task = Tasks::find(1);
$newTask = $task->replicate();
$newTask->save();

Chunk() 方法之大块数据

与 Eloquent 不完全相关,它更多的关于 Collection (集合),但是对于处理大数据集合,仍然是很有用的。你可以使用 chunk() 将这些数据分割成小数据块

修改前:

$users = User::all();
foreach ($users as $user) {// ...你可以这样做:

User::chunk(100, function ($users) {
    foreach ($users as $user) {
        // ...
    }
});

创建模型时创建额外的东西

我们都知道Artisan命令:

php artisan make:model Company

但是,你知道有三个有用的标记可以为模型生成相关文件吗?

php artisan make:model Company -mcr
-m 将创建一个迁移文件
-c 将创建一个控制器
-r 表示控制器应该是一个资源控制器

调用 save 方法的时候指定 updated_at

你知道 ->save() 方法可以接受参数吗? 我们可以通过传入参数阻止它的默认行为:更新 updated_at 的值为当前时间戳。

$product = Product::find($id);
$product->updated_at = '2019-01-01 10:00:00';
$product->save(['timestamps' => false]);
这样,我们成功在 save 时指定了 updated_at 的值。

update() 的结果是什么?

你是否想知道这段代码实际上返回什么?

$result = $products->whereNull('category_id')->update(['category_id' => 2]);

我是说,更新操作是在数据库中执行的,但 $result 会包含什么?

答案是受影响的行。 因此如果你想检查多少行受影响, 你不需要额外调用其他任何内容 -- update() 方法会给你返回此数字。

把括号转换成 Eloquent 查询

如果你有个 and 和 or 混合的 SQL 查询,像这样子的:

WHERE (gender = 'Male' and age >= 18) or (gender = 'Female' and age >= 65)

怎么用 Eloquent 来翻译它呢? 下面是一种错误的方式:

$q->where('gender', 'Male');
$q->orWhere('age', '>=', 18);
$q->where('gender', 'Female');
$q->orWhere('age', '>=', 65);

顺序就没对。正确的打开方式稍微复杂点,使用闭包作为子查询:

$q->where(function ($query) {
    $query->where('gender', 'Male')
        ->where('age', '>=', 18);
})->orWhere(function($query) {
    $query->where('gender', 'Female')
        ->where('age', '>=', 65);
})

复数参数的 orWhere

终于,你可以传递阵列参数给 orWhere()。平常的方式:

$q->where('a', 1);

$q->orWhere('b', 2);

$q->orWhere('c', 3);

你可以这样做:

$q->where('a', 1);

$q->orWhere(['b' => 2, 'c' => 3]);

editor.md 开源在线 Markdown 编辑器

layer 弹出层框架

webuploader 文件上传框架

Nprogress 库

jstree 下来分组插件

font awesome 字体库

cropper 图片剪裁库

  • html代码
<link href="bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="fileinput.min.css" type="text/css" rel="stylesheet">
<link href="fileinput-rtl.min.css" type="text/css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"type="text/javascript"></script>
<script src="fileinput.js"type="text/javascript"></script>
<script src="zh.min.js"></script>
<form enctype="multipart/form-data">
 <input name="pic" id="input-44" type="file" multiple>
</form>
  • js代码
<script>
    $(document).on('ready', function() {
        $("#input-44").fileinput({
            uploadUrl: 'http://www.baidu.com',  //还写具体上传地址才显示可拖拽区域
            language: 'zh', //设置语言
            allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
            uploadAsync: true, //默认异步上传
            showUpload:true, //是否显示上传按钮
            showRemove :true, //显示移除按钮
            showPreview :true, //是否显示预览
            showCaption:true,//是否显示长条标题
            browseClass:"btn btn-primary", //按钮样式
            dropZoneEnabled: true,//是否显示拖拽区域
            maxFileCount:10, //表示允许同时上传的最大文件个数
            enctype:'multipart/form-data',
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!",
            msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!', //错误提示
            uploadExtraData:{"id": 1, "fileName":'123.mp3'},//上传携带参数
            maxFileCount:10, //表示允许同时上传的最大文件个数
            maxFileSize:0,//单位为kb,如果为0表示不限制文件大小
            slugCallback:function(){}, //上传前的回调
            overwriteInitial: false, //false时,本身已存在的预览图,后面在上传就继续追加而不是覆盖原来的
            previewSettingsSmall:{image: {width: "100%", height: "100%", 'max-width': "auto",'max-height': "auto"}},  //修改之前上传的预览图
            previewSettings:{image: {width: "100%", height: "100%", 'max-width': "auto",'max-height': "auto"}},  //修改刚刚上传的预览图

            initialPreview:['<img src="1.jpg">','<img src="2.jpg">'], //初始化显示出预览图
            //initialPreviewAsData: true //为true时,initialPreview数组里面的html标签就不会解析,直接显示数据了
            initialPreviewConfig: [ //初始化预览图时,为预览图设置属性
             {
               caption: '名称1',// 预览图展示的图片名称
               width: '120px',// 图片高度
               url: 'http://localhost/1.php',//删除预览图片的回调,返回的必须是json否则删除预览图的效果就没有
               key: '1a',// 删除按钮会添加data-key="1a",同时也会提交给后台key:'1a'值
               extra: {id: 11} //调用删除路径所传参数 
             },
             {
               caption: '名称2',
               width: '120px',
               url: 'http://localhost/1.php',
               key: '2a',
               extra: {id: 22}
             }
            ]
        }).on("filebatchselected", function(event, files) {  //选中要上传的文件后回调
           $(this).fileinput("upload");  //自动上传

        }).on("fileuploaded", function(event, data) {
            if(data.response)
            {
                alert('处理成功');
            }
        }).on('filedeleted', function() {
             console.log(1111) //删除预览图的回调
        });

        //filesuccessremove  删除刚刚上传成功图片的回调
        //filebatchuploadcomplete 文件全部都上传完成才回调
        //fileuploaderror  上传文件错误后回调
        //还有更多估计你自己看源码
    });
</script>

function checkMobile(str) { //写一个判断函数
      
    var  re = /^1\d{10}$/    //正则表达式
    if (re.test(str)) {      //判断字符是否是11位数字
          return true;//手机号正确
    }
    else {
          return true;//手机号错误
    }
}