Write the Code. Change the World.

9月 11

oss 为企业或个人提供了文件存储访问功能。将文件上传到 oss 就是最直接的问题。我们可以通过阿里云后台上传,也可以通过应用程序工具上传。但利用阿里云提供的 api 上传是最好的方式。因为这样方便数据的接入。阿里云官方文档提供了几个 demo 。

最佳实践

https://help.aliyun.com/document_detail/31925.html?spm=a2c4g.11186623.2.2.878c62121zD4re#concept_frd_4gy_5db

这个最大的缺点,是暴露了 accessid 和 accesskey 。

https://help.aliyun.com/document_detail/31926.html?spm=a2c4g.11186623.6.637.22202f0862W1am

这个服务端直接签名后再上传,避免了暴露。

阅读全文 >>

8月 31

Vue 用脚手架本地测试,项目都是指向根目录,当发布到外网环境,非根目录时,有人会遇到根本进不去 vue 路由的情况。

既然用了 vue ,遇到问题总的要解决。

网上一些有用的方法

https://segmentfault.com/a/1190000014561644

https://blog.csdn.net/lensgcx/article/details/78439514

其实主要还是得处理 nginx 的 location

处理 location 的规则即可。

location 可以添加很多个不同规则。

比如:

location /{

}

location /web{
    try_files $uri $uri/ /web/index.html;
} 
# vue 这里的二级目录是 web 

阅读全文 >>

8月 21

form 表单提交的数据需要验证时,通常会建一个 Request 来单独进行处理。这样干净,舒服,控制器只需要做业务逻辑就好。还有,如果字段验证不通过,还会重定向请求页面,并且会带上请求不通过的 error。 这种体验是不是很好。

仅仅 Request 里边就有很多细节和功能噢。我懒了。

https://laravel-china.org/docs/laravel/5.6/requests/1367

阅读全文 >>

7月 31

在 Laravel 中,事件有 普通事件,还有 模型事件。类似的有通知和广播。这里直接上用法。

来步骤走起

普通事件通常有事件,事件监听器,添加事件,分发这几步组成。

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

bootstrap4 相关

Bootstrap 4重大更新,亮点解读

知乎 Bootstrap4

E文文档

他人学习笔记

https://blog.csdn.net/bbdxf/article/details/79251934

漂亮的主题

https://www.creative-tim.com/product/material-kit

bootstrap4 自定义颜色

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

  1. 前期准备。

安装 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 插件

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

  1. atom-beautify
    用来对代码进行格式化,让杂乱无章的代码瞬间变得有条理,我自己平常用的最多的就是格式化 JSON 字符串了,注意在格式化的时候必须先选定语言。

  2. 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 编辑器也能达到重新加载所有样式规则的效果……

  3. file-icons
    这个比较好,让atom更加美丽,会在文件前面给一个小图标,针对不同格式的文件有着很好的支持,atom 的文件图标再也不会那么单调了。

  4. markdown-preview-enhanced
    这个号称最全markdown插件,可算是集成了所有用得到的和用不到的功能,强大的有些许过分,有时候会造成写markdown的时候卡顿,由于暂时没有找到能够同步滑动的插件,就暂时使用了这个。更多设置可以参考作者的中文文档:https://shd101wyy.github.io/markdown-preview-enhanced/#/zh-cn/

  5. markdown-table-editor
    markdown中编辑表格的神器,只需要打一个 | 然后通过 table 和回车键就可以完成表格的编辑,比起自己写效率高到不知道哪里去了。

  6. pdf-view
    让你可以在Atom中直接查看pdf。

  7. filetype-color
    在标签栏不同格式文件显示不同的颜色的标题。

  8. minimap
    用过 Sublime Text 的友友们都知道有一个很实用的功能,就是内部编辑那里有一个小小的代码图,
    这货就是补全 Atom 这个功能的,支持高亮代码,还可控,具体看内部设置。

  9. autocomplete-plus
    自动补全工具。

  10. emmet
    代码补全速写。可以取官网看看http://docs.emmet.io/cheat-sheet/

  11. color-picker
    颜色拾取器。

  12. docblockr
    方便代码注释。

  13. activate-power-mode
    代码跳动效果。

  14. quick-highlight
    代码高亮。

  15. autocomplete-paths
    路径提示功能。

阅读全文 >>

7月 16

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

阅读全文 >>