BootstrapVue 安装指南

BootstrapVue 是基于 Bootstrap v4 + Vue.js 的前端 UI 框架。BootstrapVue 作为学习 Vue.js 框架本身的入门框架,我认为是非常不错的。Bootstrap 框架本身是轻量级的、易于学习的,在世界范围内非常流行,有许多第三方插件和主题样式。Vue.js 作为一个渐进式框架,核心库只关注视图层,不仅易于上手,还便于与第三方框架或既有项目整合。

作为 Vue.js 新手,这篇文章旨在记录 BootstrapVue 框架的安装步骤。

准备工作,安装 Vue CLI

Vue CLI 包名称从 vue-cli 改成 @vue/cli。如果安装了老版本的 vue-cli(1.x 或 2.x),需要先移除老版本:

npm uninstall -g vue-cli

再安装新版本:

npm install -g @vue/cli

查看 vue 版本:

vue --version

如果显示 3.x,表明安装正确了。

新建 Vue 项目

vue create bootstrapvue-demo

当提示 Please pick a preset 时,选择默认的 default 并回车。

运行 Vue 项目

cd bootstrapvue-demo
npm run serve

浏览器访问 localhost:8080,如下图显示就表明成功了。

安装 BootstrapVue

npm install bootstra-vue bootstrap axios

引入 BootstrapVue 和 Bootstrap CSS

修改 src/main.js

import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
Vue.config.productionTip = true

new Vue({
render: h => h(App),
}).$mount('#app')

修改 src/components/HelloWorld.vue

<template>
  <b-container fluid class="p-4">
    <b-row>
      <b-col sm="3" v-for="item in list" v-bind:key="item.index">
        <b-img thumbnail fluid :src="item.strCategoryThumb" v-bind="mainProps"></b-img>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
import axios from "axios"

export default {
  name: 'HelloWorld',
  data() {
    return {
      mainProps: {
        class: 'mb-2'
      },
      list: []
    }
  },
  mounted() {
    axios
        .get("https://www.themealdb.com/api/json/v1/1/categories.php")
        .then(response => {
        this.list = response.data.categories
      })
        .catch(err => {
        console.log(err)
      })
  }
}
</script>

刷新浏览器,正常情况下会像下面一样展示一组食物图片。

至此,BootstrapVue 的入门安装指南就结束了。要想深入了解 BootstrapVue 的用法和细节,请去查阅它的官方文档。

项目源代码我上传到了 GitLab 上,需要的请自取。

参考链接:
https://juejin.im/post/5cd2c1f06fb9a031f10ca447

Laravel 集合的高阶消息传递

Laravel 5.4 新增了对于集合的「高阶消息传递」(Higher Order Messages,简写 HOM)的支持。

什么是「高阶消息传递」呢?

计算用户的投票数总和:

$users = User::where('group', 'Development')-&gt;get()

// 传统写法
$users-&gt;sum('votes');

// HOM 写法
$users-&gt;sum-&gt;votes;

投票数大于 500 的用户标记成 VIP:

$users = User::where('votes', '&gt;', 500)-&gt;get();

// 传统写法
$users-&gt;each(function ($user) {
    $user-&gt;markAsVip();
});

// HOM 写法
$users-&gt;each-&gt;markAsVip();

高阶消息传递允许消息有其它的消息作为参数。Laravel 集合的高阶消息传递就是一种语法糖,提供了对集合执行常用操作的快捷方式。

「高阶消息传递」实现原理

Illuminate\Support\Collection 中有如下代码:

/**
* The methods that can be proxied.
*
* @var array
*/
protected static $proxies = [
    'average', 'avg', 'contains', 'each', 'every', 'filter', 'first', 'flatMap',
    'keyBy', 'map', 'partition', 'reject', 'sortBy', 'sortByDesc', 'sum', 'unique',
];

...

/**
* Dynamically access collection proxies.
*
* @param  string  $key
* @return mixed
*
* @throws \Exception
*/
public function __get($key)
{
    if (! in_array($key, static::$proxies)) {
        throw new Exception("Property [{$key}] does not exist on this collection instance.");
    }

    return new HigherOrderCollectionProxy($this, $key);
}

当对集合调用 'average', 'avg', 'contains', 'each', 'every', 'filter', 'first', 'flatMap', 'keyBy', 'map', 'partition', 'reject', 'sortBy', 'sortByDesc', 'sum', 'unique' 这些属性时,会返回一个 HigherOrderCollectionProxy 的实例。

Illuminate\Support\HigherOrderCollectionProxy 中的源码:

/**
* Proxy accessing an attribute onto the collection items.
*
* @param  string  $key
* @return mixed
*/
public function __get($key)
{
    return $this-&gt;collection-&gt;{$this-&gt;method}(function ($value) use ($key) {
        return is_array($value) ? $value[$key] : $value-&gt;{$key};
    });
}

/**
* Proxy a method call onto the collection items.
*
* @param  string  $method
* @param  array  $parameters
* @return mixed
*/
public function __call($method, $parameters)
{
    return $this-&gt;collection-&gt;{$this-&gt;method}(function ($value) use ($method, $parameters) {
        return $value-&gt;{$method}(...$parameters);
    });
}

HigherOrderCollectionProxy 实例调用不存在的属性时,会返回当前 HigherOrderCollectionProxy 实例代理的集合方法。该集合方法使用闭包作为参数,闭包返回集合中的成员的相应属性。

当调用不存在的方法时,也会返回代理的集合方法,也同样以闭包作为其参数。不同点只是闭包返回的是集合中的成员去调用相应的方法。

结合前面的例子应用到 HigherOrderCollectionProxy 源码中来理解:

// HOM 写法
$users-&gt;sum-&gt;votes;
// 将 $this-&gt;method 替换为 sum,$key 替换为 votes,HigherOrderCollectionProxy 中的 __get() 方法返回
$users-&gt;sum(function ($value) {
    return is_array($value) ? $value['votes'] : $value-&gt;{'votes'};
});

// HOM 写法
$users-&gt;each-&gt;markAsVip();
// 将 $this-&gt;method 替换为 each,$method 替换为 markAsVip,$parameters 替换成空数组,HigherOrderCollectionProxy 中的 __call() 方法返回
$this-&gt;collection-&gt;each(function ($value) {
    return $value-&gt;markAsVip([]);
});

「高阶消息传递」写法相比传统写法更加简单明了,对集合使用一些简单常用的操作时推荐使用。