非你网 - 挥泪别痴心，只怨情长天未怜。盼君忆我千百世，真爱永不悔。

php artisan make:event WahahaEvent 
# 生成事件

php artisan make:listener WahahaListener
# 生成监听器

# 在 App\Providers\EventServiceProvider 的 listener 中添加监听
# 事件对监听器 ，是一对多的关系。想做出多种监听，可以放在一起。比如事件是早晨上班打卡，监听有打卡时间，打卡位置。通过一个打卡事件，分发（后边有）到两个监听这里，两个监听就可以做相应的处理。这里只是打个比方，事件和监听器的一对多关系。

    protected $listen = [
        WahahaEvent::class => [
            WahahaListener::class,
        ],
    ];

# 分发（事件，监听器，事件添加都好了，只剩下分发这一步，整过过程就走完了）

event(new WahahaEvent()); 
# 仅此一句 分发就完成了。event是分发函数，全局的。

上边是最基本，最简单的事件模型。通常，我们会在分发的时候，带一些数据过去。比如对应的模型

# App\Models\Wahaha
# 假如模型就是 Wahaha
$model = Wahaha::where('id', 1)->first();
event(new WahahaEvent($model));

分发带来了数据，事件的构造函数会接受到。事件是这样的。

# App\Events\WahahaEvent
public $wahaha；

public function __construct(Wahaha $wahaha)
{
    $this->wahaha = $wahaha;
}

事件只是个媒介，过程，真正处理逻辑在监听器里。所以监听器会用到刚才过来的数据。

# App\Listeners\WahahaListener
// 当事件被触发时，对应该事件的监听器的 handle() 方法就会被调用
public function handle(WahahaEvent $event)
{
    // 获取到刚刚注册的用户
    $wahaha = $event->wahaha;
    // 下边就是你的业务逻辑的地方
}

在想，何必整得这么麻烦，直接在分发那里写逻辑不就好了吗。这样做，可以起到一个解耦的作用，还有代码的干净，以及复用等。

再来看模型事件

模型事件相对于普通事件，要简单很多。它只需要建立监听，并添加到服务即可。其实，模型事件也有普通事件的整个流程。可以了解下这个类 Illuminate\Database\Eloquent\Model(模型的父类)

建立监听

php artisan make:observer WahahaObserver

<?php

namespace App\Observers;

use App\Models\Wahaha;

class WahahaObserver
{
    public function creating(Wahaha $wahaha)
    {
        // 处理逻辑
    }
}

添加服务到 App\Providers\AppServiceProvider 中

public function boot()
{
    \App\Models\Wahaha::observe(\App\Observers\WahahaObserver::class);
}

这样，流程就走完了。是不是很短暂。当模型 Wahaha 调用 create 方法后，就会自动触发监听。但是这里监听的只能是下边的几种操作。

// creating, created, updating, updated, saving,
// saved,  deleting, deleted, restoring, restored

参考

7月 20

发表于 2018年7月20日 • 39 views • 没有评论!

前端

bootstrap4 自定义颜色

默认的按钮，input等颜色比较难看，某些设置也不人性化，这些都是通过编译bootstrap的源码来自己来定义的。主要分以下几个步骤。

前期准备。

安装 npm 并使用淘宝镜像。http://npm.taobao.org/
git 工具

2，下载原文件包。
https://github.com/twbs/bootstrap
在 scss 目录下，就可以看到它的源码。
找到_variables.scss，并修改里边的颜色值，再编译就可以了。比如：

# 有颜色值的是我修改的
$primary:       #9c27b0 !default;
$secondary:     $gray-600 !default;
$success:       #4caf50 !default;
$info:          #00bcd4 !default;
$warning:       #ff9800 !default;
$danger:        #f44336 !default;
$light:         $gray-100 !default;
$dark:          $gray-800 !default;

sudo cnpm run dist 
# 编译打包就可以了

# 修改点击按钮的时候，按钮周围的边框，好难看，强迫症要干掉。这样会把input的边框也干掉了，不好。
$input-btn-focus-width:       0 !default;
$input-btn-focus-color:       rgba($component-active-bg, .25) !default;
$input-btn-focus-box-shadow:  none !default;

阅读全文 >>

7月 17

atom插件

发表于 2018年7月17日 • 36 views • 没有评论!

工具

Atom 插件

快捷键可以通过 cmd+shift+p 搜索得到。

atom-beautify
用来对代码进行格式化，让杂乱无章的代码瞬间变得有条理，我自己平常用的最多的就是格式化 JSON 字符串了，注意在格式化的时候必须先选定语言。
atom-html-preview
可以在 atom 里面预览HTML。快捷键
默认快捷键： CTRL + P 调用，会和内置核心插件冲突(切换文件那个)
修改版快捷键： CTRL + F12 (感觉方便使用且没有冲突的快捷键)
修改自定义键盘映射文件：
实时浏览器调用快捷键
‘atom-text-editor’:
‘ctrl-F12′:’atom-html-preview:toggle’
atom 内置了 Dev Live Reload 这个插件；
这个插件的作用就是重新加载所有样式和规则，
有点类似 linux 的 source xx.sh 一样..即时生效。
调用快捷键是 CTRL + SHIFT + ALT +R
当然，关闭 atom 再开 atom 编辑器也能达到重新加载所有样式规则的效果……
file-icons
这个比较好，让atom更加美丽，会在文件前面给一个小图标，针对不同格式的文件有着很好的支持，atom 的文件图标再也不会那么单调了。
markdown-preview-enhanced
这个号称最全markdown插件，可算是集成了所有用得到的和用不到的功能，强大的有些许过分，有时候会造成写markdown的时候卡顿，由于暂时没有找到能够同步滑动的插件，就暂时使用了这个。更多设置可以参考作者的中文文档：https://shd101wyy.github.io/markdown-preview-enhanced/#/zh-cn/
markdown-table-editor
markdown中编辑表格的神器，只需要打一个 | 然后通过 table 和回车键就可以完成表格的编辑，比起自己写效率高到不知道哪里去了。
pdf-view
让你可以在Atom中直接查看pdf。
filetype-color
在标签栏不同格式文件显示不同的颜色的标题。
minimap
用过 Sublime Text 的友友们都知道有一个很实用的功能，就是内部编辑那里有一个小小的代码图,
这货就是补全 Atom 这个功能的,支持高亮代码,还可控，具体看内部设置。
autocomplete-plus
自动补全工具。
emmet
代码补全速写。可以取官网看看http://docs.emmet.io/cheat-sheet/
color-picker
颜色拾取器。
docblockr
方便代码注释。
activate-power-mode
代码跳动效果。
quick-highlight
代码高亮。
autocomplete-paths
路径提示功能。

阅读全文 >>

7月 16

可以借鉴的站点

发表于 2018年7月16日 • 34 views • 没有评论!

前端

链接

https://isux.tencent.com/articles/nice-places-shenzhen.html

http://cdc.tencent.com/

http://www.ui.cn/

https://ycg.qq.com/

阅读全文 >>

7月 16

configure: error: Cannot find OpenSSL’s libraries

发表于 2018年7月16日 • 29 views • 没有评论!

linux,php

unbuntu 安装 php mongo 扩展的时候，遇到了 configure: error: Cannot find OpenSSL’s libraries 这个错误。

怎么解决了，冥冥已经安装了呀。

sudo apt-get install openssl

可以找找看。

sudo find / -name libssl.so
# 你会发现存在 /usr/lib/x86_64-linux-gnu/libssl.so
# 初步判断它可能只会在 /usr/lib/ 下寻找 libssl.so 文件
sudo ln -s /usr/lib/x86_64-linux-gnu/libssl.so /usr/lib 
# 重新编译过

其他方法

https://stackoverflow.com/questions/40359817/litespeed-web-server-and-error-cannot-find-openssls-libraries

阅读全文 >>

7月 14

Laravel 小点滴

发表于 2018年7月14日 • 23 views • 没有评论!

php

Laravel 小点滴

{{ csrf_field() }} 可以使用 @csrf 来代替。

阅读全文 >>

7月 09

windows下安装使用Homestead box 环境

发表于 2018年7月9日 • 68 views • 没有评论!

php,工具

使用 Laravel 开发框架，官方推荐使用 Homestead 环境。那么，Homestead 环境怎么构成呢。至少有下边四个部分。

virtualBox 虚拟机盒子（容器）。当然，你可以使用 VMWare, Parallels, Hyper-V。
vagrant 虚拟机管理工具。通过命令，就可以操控管理你的虚拟机。
Homestead box。虚拟机实体，也就是环境。
Homestead yaml。虚拟机实体配置文件。

下载安装

VirtualBox

VirtualBox 是 Oracle 公司的开源虚拟机软件。VirtualBox号称是最强的免费虚拟机软件，它不仅功能齐全，而且性能也很优异！VirtualBox 支持大部分流行的系统，如：Mac, Windows, Linux 等。

根据对应系统下载，一步一步默认安装即可。

官网： https://www.virtualbox.org/wiki/Downloads

vagrant

Vagrant 是用来管理虚拟机的工具，支持当前主流的虚拟机系统如 VirtualBox、VMware、AWS 等。Vagrant的主要作用是提供一个可配置、可移植和复用的软件环境。Vagrant 让你通过编写一个 Vagrantfile文件来控制虚拟机的启动、虚拟机网络环境的配置、虚拟机与主机间的文件共享，以及启动后自动执行一些配置脚本，如自动执行一个 Shell Script来安装一些必备的开发工具，如安装配置MySQL、PHP，甚至是自动配置 Nginx 站点。这意味着，在一个多人开发的项目中，你只需要同步 Vagrantfile 文件，就可以保证参与项目的每个人各自的机器上拥有一致的开发环境。

根据对应系统下载，一步一步默认安装即可。

官网：https://www.vagrantup.com/downloads.html

Homestead box

homestead.box 虚拟机盒子是提前打包好的 Vagrant Box 虚拟机盒子，里面预装了 Nginx Web 服务器、PHP 7.0、MySQL、Postgres、Redis、Memcached、Node，以及所有你在使用 Laravel 开发时所需要用到的各种软件。

Box的历史版本：https://app.vagrantup.com/laravel/boxes/homestead

通常有两种安装方式。第一种，使用vagrant命令(先安装好 gitbash工具)。

vagrant box add laravel/homestead 
### 然后，提示选择 虚拟机容器。如果使用的是 VirtualBox 就选择 VirtualBox前边对应的序号，回车。就开始进入安装中了。

由于，文件放在国外，内地访问比较慢，以免中断的情况放生。建议用迅雷先将box下载到本地。这个就是第二种方式了。第一种方式中，选择虚拟机容器，回车后，会显示下载的 Homestead box地址，将地址复制出来，用迅雷下载到本地就好了。

这里的地址是： https://vagrantcloud.com/laravel/boxes/homestead/versions/6.1.0/providers/virtualbox.box

下载好 box后，放在系统的磁盘下，待用。比如放在 D:\WebServer\homesteadbox\

Homestead

Homestead 利用 Vagrantfile 提供的便利，定制了一整套的可配置、可移植和复用的 Laravel 开发环境。Homestead 虚拟机里面包含了 Nginx Web 服务器、PHP、MySQL、Postgres、Redis、Memcached、Node，以及所有你在使用 Laravel 开发时需要用到的各种软件。

Homestead 包含了两个东西：Homestead 管理脚本、Homestead Box 虚拟机盒子。
虚拟机盒子上一步骤已经下载好了。这里下载管理脚本。

git clone https://github.com/laravel/homestead.git ~/Homestead

运行 init.bat ，生成 Homestead.yaml 配置文件。

安装盒子

在 Homestead 目录下，创建 metadata.json 文件。内容如下：

{
    "name": "lc/homestead",
    "versions": 
    [
        {
            "version": "6.1.0",
            "providers": [
                {
                  "name": "virtualbox",
                  "url": "D:/WebServer/homesteadbox/virtualbox.box"
                }
            ]
        }
    ]
}

开始安装：

vagrant box add metadata.json

等待安装完成。安装完成，会有 success 提示的。

编辑 Homestead.yaml

Homestead.yaml 文件，是配置虚拟机的相关映射设置，以及和本地电脑系统的映射。默认，就有该文件，稍微修改成自己所需的就可以了。如下：

---
ip: "192.168.10.10"
memory: 2048
cpus: 1
provider: virtualbox

authorize: ~/.ssh/id_rsa.pub

keys:
    - ~/.ssh/id_rsa

folders:
    - map: ~/Code
      to: /home/vagrant/Code
    - map: ~/Study
      to: /home/vagrant/Study

sites:
    - map: weapp.com
      to: /home/vagrant/Code/weapp/public
    - map: wechat.com
      to: /home/vagrant/Study/wechat/public
databases:
    - wechat
    - weapp

variables:
    - key: APP_ENV
      value: local

# blackfire:
#     - id: foo
#       token: bar
#       client-id: foo
#       client-token: bar

# ports:
#     - send: 50000
#       to: 5000
#     - send: 7777
#       to: 777
#       protocol: udp

至于，改配置的详解，可以百度。

启动

cd ~/Homestead
vagrant up
vagrant provision
vagrant reload
vagrant ssh

如果有以下错误，可以先升级 powershell

The version of powershell currently installed on this host is less than
the required minimum version. Please upgrade the installed version of
powershell to the minimum required version and run the command again.

Installed version: 2

Minimum required version: 3

补救

看到提示 homestead-7: Box ‘laravel/homestead’ could not be found. Attempting to find and install 了吗。烦啊，版本不匹配，配置没写对，总之，就是不让你好。

box 名字不对，可以修改 metadata.json 中的 name。用 vagrant box remove xxx 移除之前的，再 vagrant box add 一次 box。最后， vagrant up再启动看看。这一切启动，都在从 https://github.com/laravel/homestead 这里 clone 下的目录中进行。目录位置最好存在 ~/Homestead 。如果还有错误，卸载了看流程重装吧。累。

下载参考：

windows7 执行vagrant up 提示powershell版本过低的解决方法

https://www.jb51.net/softs/580141.html

就算之前没有安装 Homestead box，执行 vagrant up的时候，也会去安装的。

参考

https://laravel.com/docs/5.6/homestead

https://laravel-china.org/docs/laravel-development-environment/5.5/development-environment-windows/938

阅读全文 >>

7月 06

启动VirtualBox失败处理

发表于 2018年7月6日 • 53 views • 没有评论!

工具

现象

使用 vagrant 启动 VirtualBox 失败，提示:

Bringing machine 'homestead-7' up with 'virtualbox' provider...
There was an error while executing `VBoxManage`, a CLI used by Vagrant
for controlling VirtualBox. The command and stderr is shown below.

Command: ["list", "hostonlyifs"]

Stderr: VBoxManage.exe: error: Failed to create the VirtualBox object!
VBoxManage.exe: error: Failed to instantiate CLSID_VirtualBox w/ IVirtualBox, CLSID_VirtualBox w/ IUnknown works.
VBoxManage.exe: error: PSDispatch looks broken by some installer featuring the broken oleaut32.msm module as a component.

VBoxManage.exe: error: See also https://support.microsoft.com/en-us/kb/316911
VBoxManage.exe: error: Details: code E_NOINTERFACE (0x80004002), component VirtualBoxClientWrap, interface IVirtualBoxClient

或手动启动 VirtualBox 提示：

引起的原因

使用 vagrant 启动 VirtualBox，没有使用 vagrant halt 关闭服务时，可能会引起上述的错误。

解决方法

修改注册表法：

win + r 打开运行输入界面。输入 regedit 回车，弹出注册表面板。
找到下图这里，并进行修改。再启动就会好了。

修改注册表的如下两项：
HKEY_CLASSES_ROOT\CLSID{00020420-0000-0000-C000-000000000046}\InprocServer32
HKEY_CLASSES_ROOT\CLSID{00020424-0000-0000-C000-000000000046}\InprocServer32

将它们的默认值都改成：
C:\Windows\system32\oleaut32.dll

阅读全文 >>

5月 24

优化 html 标签

发表于 2018年5月24日 • 77 views • 没有评论!

前端

请看这里

https://mp.weixin.qq.com/s/boimZ_wK5afEAN0RkbRMyw

阅读全文 >>

5月 24

利用好input的特性，可以少写很多js

发表于 2018年5月24日 • 68 views • 没有评论!

前端

仅仅看表象，以为是 js 实现的效果，却是 css 实现的。这里有一个例子，利用 radio 的单选特性，实现单选效果。

步骤

创建 input标签，邻居创建 span标签。
父容器相对定位，input绝对定位，left，top为0，opacity为0。看不见看不见。
利用 + ，~ 处理邻居 div。
利用 checked 实现变化。

让 input 透明掉，其实就是让你去美化 span，不再需要 radio 那难看的容颜。是不是有点不道德啊。

请看 code：

<div class="box">

  <div class="tags-select">
    <label class="tag-select">
        <input type="radio" name="bye-type" value="1" checked>
        <span class="name">官方标配</span>
    </label>

    <label class="tag-select">
        <input type="radio" name="bye-type" value="2">
        <span class="name">官方标配 + 蓝牙耳机</span>
    </label>

    <label class="tag-select">
        <input type="radio" name="bye-type" value="3" disabled>
        <span class="name">官方标配 + 充电宝</span>
    </label>
  </div>

</div>

<!-- 利用radio唯一性，实现了不用js也能实现的效果。右边是 scss -->

.tags-select{
  font-size: 0;

  > .tag-select{
      position:relative;
      display:inline-block;
      font-size: 14px;
      margin: 5px;
      color: #fff;


     .name{
         display: block;
         line-height: 20px;
         padding: 8px 10px;
         border-radius: 5px;
         background-color: #FE7D91;
         cursor:pointer;
     }

     .name:hover{
         background-color: #FE3591;
     }

     input[type="radio"]{
         position:absolute;
         z-index: -1;
         opacity: 0;

         //选中
         &:checked +.name{
             background-color: #FE3591;
         }

         //禁用
         &:disabled +.name{
           background: #eee;
           color: #999;
           cursor: not-allowed;
         }
     }
  }
}

.box{
    display:flex;
    width:100%;
    height:100px;
    justify-content:center;
    align-items:center;
}

记得，上边使用了 scss。

效果

https://jsfiddle.net/vini123/ad30qpyb/

阅读全文 >>

一	二	三	四	五	六	日
« 7月
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

Write the Code. Change the World.

来步骤走起

再来看模型事件

参考

bootstrap4 相关

他人学习笔记

漂亮的主题

bootstrap4 自定义颜色

Atom 插件

链接

其他方法

Laravel 小点滴

下载安装

VirtualBox

vagrant

Homestead box

Homestead

安装盒子

编辑 Homestead.yaml

启动

补救

参考

现象

引起的原因

解决方法

请看这里

步骤

效果