非你网

laravel 中 laravel-permission 对角色权限管理很好用。这里，就用这个玩意吧。突然想到一个额外的问题。项目中使用的是 Laravel Sanctum 来做认证。这样，仅仅是它自己可以使用了。如果想将 node.js 等和这个配合起来认证，就不好搞了。如果是用 jwt 来做，就不会出现这个问题。jwt 的实现都是一样的，各个语言都可以通用。岔开了，这里还是 laravel-permission 吧。

操作一波

文档：

https://spatie.be/docs/laravel-permission/v3/introduction

https://github.com/spatie/laravel-permission#installation

composer require spatie/laravel-permission

# 生成配置文件和迁移文件
php artisan vendor:publish --provider="Spatie\Permission\PermissionServiceProvider"

# 如果之前做过缓存，需要这样处理下
php artisan config:clear

# 生成数据库表
php artisan migrate

继续阅读

操作一波

php artisan ui vue

yarn --no-bin-links

js/components/ 下会生一个 ExampleComponent.vue 文件。

js/app.js 中也引入了这个。

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

然后再 blade 模板中使用
继续阅读

先看一个漂亮的 点击看漂亮的

UI

操作一波

编辑 resources/sass/_variables.scss,增加下边的定义

// 定义主题颜色
$primary:       #9c27b0 !default;
$success:       #4caf50 !default;
$info:          #00bcd4 !default;
$warning:       #ff9800 !default;
$danger:        #f44336 !default;

// 修改点击按钮的时候，按钮周围的边框，好难看，强迫症要干掉。这样会把input的边框也干掉了，不好。
$input-btn-focus-width:       0 !default;
$input-btn-focus-box-shadow:  none !default;

然后，执行编译打包。

yarn run dev

打包好后，刷新登录页面，是不是发现 input框，按钮都变了呀。

下一步

主题颜色也变了，那么下一步去搞搞在 blade 中使用 vue 组件的问题。虽然大多时候不需要 vue，要不就用纯 vue 了。可偶尔某些组件用 vue 还是蛮好的。

在某些场景下，socket 是必须要使用的。vue element admin 中，自己所做的后台中，就想使用这玩意。那么，就 websocket。

websocket 的客户端创建使用是很简单，有些问题却必须要面对。

1. 怎么做断线重连。（socket.io 自身就实现了，可这里不用它）
2. 怎么解决在整个项目中的数据来回。
3. 在什么时候创建 websocket 连接。

断线重连是自己手动去建立一个心跳的方式来实现。socket.io 中叫 ping pong。这里就自定义的搞一搞。数据来回，使用全局事件的方式来处理。无论哪种语言，事件这种方式从来都不会缺失。在什么时候创建连接呢，因为这里针对的是登录后的一些功能，所以最好在登录成功后只调用创建一次。我们可以在 permission.js 中引入并创建。
继续阅读

在常规情况下，去定义组件的时候，只需要用到父子组件通讯即可。这样比较好实现。有时候，也会用到任意组件间的通讯，这个时候自定义组件的方式就有用了。不弄那么多，只弄一个。

先看常见父子通讯

# 使用组件的地方
<sky @changeColor="changeColor" />

methods: {
    changeColor(value) {

    }
}
# 组件内部，仅此而已。子组件中的数据，就可以被父组件收到了
this.$emit('changeColor', 'blue')

继续阅读

在诸多 Vue.js 应用中, Lodash, Moment, Axios, Async等都是一些非常有用的 JavaScript 库. 但随着项目越来越复杂, 可能会采取组件化和模块化的方式来组织代码, 还可能要使应用支持不同环境下的服务端渲染. 除非你找到了一个简单而又健壮的方式来引入这些库供不同的组件和模块使用, 不然, 这些第三方库的管理会给你带来一些麻烦.

本文将介绍一些在 Vue.js 中使用第三方库的方式.

全局变量

在项目中添加第三方库的最简单方式是讲其作为一个全局变量, 挂载到 window 对象上:

entry.js

window._ = require('lodash');

MyComponent.vue

export default {
  created() {
    console.log(_.isEmpty() ? 'Lodash everywhere!' : 'Uh oh..');
  }
}

继续阅读

啥都不说，操作一波

先看路由，我们会看到在 routes/web.php 中增加了 Auth::routes(); 这个和以前不一样了。以前在 vendor/laravel/framework/src/Illuminate/Routing/Router.php 中，现在却在 vendor/laravel/ui/src/AuthRouteMethods.php 中，如下：
继续阅读

操作一波

composer require laravel/ui

# 生成基本脚手架
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

# 生成 登录/注册 脚手架
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

这里，我们使用 php artisan ui bootstrap --auth 生成登录注册脚手架，后边根据需要改

# 安装依赖包
yarn --no-bin-links

# 跑
yarn run dev

继续阅读

安装 vue element admin 的时候，默认带入了很多路由，模板，mock，api 等。如果从 0 开始，就需要去掉这些多余的东西。

操作一波

src/api 删除下边的文件，只留下 role.js 和 user.js
.
├── role.js
└── user.js

src/components 组件暂不做处理，随着项目发展，某些组件还是很有用的。

src/router/modules/ 全删掉（如果需要，可后边对比补充）

src/router/index.js 修改成如下（其实就是去掉那些不想要的）
继续阅读

1
如果说，两个人在一起的际遇有很多种，那不在一起的理由里“性格不合”一定排在首位。

曾看过街头随机采访情侣分手的视频，百分之九十的回答都是：

“还是性格原因吧。我们不合适。”
“他太大男子主义了，我受不了。”
“她脾气不好，要求太多，我太累了。”

或许，在我们的感情经历里，多多少少都遇到类似的经历。

本来各方面条件都还不错的对象，因为性格，最终还是因无法长久和谐的相处而分手;再多的怦然心动，也抗衡不了性格不合的互相消耗和折磨。

那是不是我们每个人在遇到性格合适的人之前，都会面临争吵、冷战、over的结局呢?

还是说这个世界上真的存在俩人一开始就十分合拍，惺惺相惜的人呢?

用我的亲身经历来回答，是有的。
继续阅读