laravel 包中创建新 view 并使用 vue-route

前言

自行开发的laravel扩展包少不了UI的显示。

官方又没有写明,于是就踩了不少的坑。

填坑方法如下。

js 设置文件

package.json

复制laravel最初的设置就好

webpack.mix.js

注意copy到对应的laravel项目路径

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const mix = require('laravel-mix');
const webpack = require('webpack');


mix.setPublicPath('public')
.js('resources/js/app.js', 'public')
.sass('resources/sass/app.scss', 'public')
.copy('public', '../../../web/public/vendor/logsservice')
.webpackConfig({
resolve: {
symlinks: false,
alias: {
'@': path.resolve(__dirname, 'resources/js/'),
},
},
plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)],
});

resources 文件夹

app.js

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
32
33
34
35
36
37
38
39
40
41
import Vue from 'vue';
import axios from 'axios';
import Routes from './routes';
import VueRouter from 'vue-router';
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue';
import moment from 'moment-timezone';

require('./socket');

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
}

Vue.use(VueRouter);
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);

moment.tz.setDefault(LogsService.timezone);

window.LogsService.basePath = '/' + window.LogsService.path;

let routerBasePath = window.LogsService.basePath + '/';

if (window.LogsService.path === '' || window.LogsService.path === '/') {
routerBasePath = '/';
window.LogsService.basePath = '';
}

const router = new VueRouter({
routes: Routes,
mode: 'history',
base: routerBasePath,
});

new Vue({
router,
el: '#logs',
})

routes.js

1
2
3
4
5
6
7
8
export default [
{ path: '/' , redirect: '/home' },
{
path: '/home' ,
name: 'home',
component: require('./screens/home/index').default,
},
];

其他vue组件

正常写法,没什么需要注意的

laravel

路由

有使用vue-router,不按照下面的写会404哦。

1
Route::get('/{view?}' , 'LogServiceController@getHome')->where('view', '(.*)' )->name('home');

控制器

传递logsServicePath到页面。

1
return view('logsservice::layout' , [ 'logsServicePath' => [ 'path' => 'logs' ] ]);

blade

注意$logsServicePath有控制器传递了。注意根据需要修改。

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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">

<title>logs {{ config('app.name') ? ' - ' . config('app.name') : '' }}</title>

<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link href="{{ asset( 'vendor/logsservice/app.css') }}" rel="stylesheet" type="text/css">

</head>
<body>
<div id="logs">
<router-view></router-view>
</div>
</body>
<script>
window.LogsService = @json($logsServicePath);
</script>
<script src="{{ asset( 'vendor/logsservice/app.js') }}"></script>
</html>

以上

前言

移动网络天生带墙

v2ray 使用不能

尝试trojan,不能使用 cloudflare ,不能使用nginx反正代理

放弃。

Clashx

macv2rayX经常崩溃。换到ClashX

设置全部在config.yml中不复杂

Clash用在windows

ClashX用在mac

设置方向相同

文档使用Clash

为laravel logs添加自定义格式与处理方法

Monolog\Formatter\LineFormatter 用来定义log内容。

Monolog\Processor\IntrospectionProcessor 用来获取控制器、方法、行数。

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
32
33
34
35
36
37
38
39
40
41
42
43
<?php

namespace App\Logging;

use Monolog\Logger;
use Monolog\Formatter\LineFormatter;
use Monolog\Processor\IntrospectionProcessor;

// 接收log
class TestLogging
{
private $logFormat = "";
private $dateFormat = 'Y/m/d H:i:s';

public function __construct()
{
// 设置行内容
$cols = [
"%datetime%",
"[%channel%.%level_name%]",
"%extra.class%@%extra.function%(%extra.line%)",
"%message%",
"%context%",
];

// 成表格
$this->logFormat = implode("\t", $cols) . PHP_EOL;
}

public function __invoke($monolog)
{
// 定义新的日记样式
$formatter = new LineFormatter($this->logFormat, $this->dateFormat, true, true);

// 控制器 内容追加
$ip = new IntrospectionProcessor(Logger::DEBUG, [] , 4);

foreach ($monolog->getHandlers() as $handler) {
$handler->setFormatter($formatter);
$handler->pushProcessor($ip);
}
}
}

设置logging.php

1
2
3
4
5
6
7
'daily' => [
'driver' => 'daily',
'tap' => [App\Logging\TestLogging::class],
'path' => storage_path('logs/laravel.log'),
'level' => 'debug',
'days' => 14,
],

参考1
参考2

2020 新年快乐

希望今年大多数关心事情都有一个好的结果!

健身环

健身环还是有用的,真的会瘦哦~

划分功能

对功能进行划分。

服务器端监听socket有点浪费资源就先不想了。

多服务器控制划分让人一吵都一点烦。

奇怪的梦

太过美好的梦,以至于不愿意醒来……

laravel echo 设置

laravel echo用于提供socket服务,现代网络服务必备。

于是使用laravel-echo-server

注意laravel-echo-server是兼容pusher的。

所以直接安装pusher包 + 设置config/broadcasting.php就可以快速上手。

网络上没人将详细的设置方法写出来不知道是为什么。

需要的包

1
2
composer require pusher/pusher-php-server
npm install --save laravel-echo socket.io-client

设置

.env

1
2
3
BROADCAST_DRIVER=pusher
WEBSOCKET_APPID=your_ID
WEBSOCKET_KEY=your_key

config/broadcasting.php

1
2
3
4
5
6
7
8
9
10
11
'pusher' => [
'driver' => 'pusher',
'key' => env('WEBSOCKET_KEY'),
'app_id' => env('WEBSOCKET_APPID'),
'secret' => null,
'options' => [
'host' => 'localhost',
'port' => 6001,
'scheme' => 'http'
],
],

启动echo-server

laravel-echo-server

官方写的非常清楚了。

注意:非本地使用的情况下建议开启https

1
2
3
laravel-echo-server init
laravel-echo-server client:add APP_ID
laravel-echo-server start

到这里,laravel有可以使用php向频道中推送信息了。

vue前端设置

bootstrap.js中进行设置

注意地址的对应。如果需要laravel-echo-server完全可以拆分为独立服务器。也可以使用docker包。

1
2
3
4
5
6
7
8
9
10
import Echo from "laravel-echo"

window.io = require('socket.io-client');

window.Echo = new Echo({
broadcaster: 'socket.io',
host: 'http://localhost:6001',
key: 'your_key',
// forceTLS: true
});

使用echo

laravel

新建一个事件,laravel中的推送要使用的到队列。

类要implements ShouldBroadcast

__construct的消息为要推送信息。

broadcastOn()用来指定频道。

broadcastAs()用来指定频道名称。

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
32
33
34
35
36
37
38
39
40
41
42
43
44
<?php

namespace KThree\Test\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class TestWebSocket implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;

/**
* Create a new event instance.
*
* @return void
*/
public $message;

public function __construct($message)
{
$this->message = $message;
}
/**
* Get the channels the event should broadcast on.
*
* @return \Illuminate\Broadcasting\Channel|array
*/
public function broadcastOn()
{
// return new PrivateChannel('test');
return ['your_channel'];
}

public function broadcastAs()
{
return 'your_broadcast_name';
}
}

vue组件中

注意listen名字前的.

1
2
3
4
var channel = Echo.channel('your_channel');
channel.listen('.your_broadcast_name', function(data) {
alert(JSON.stringify(data));
});

gantt
   dateFormat  YYYY-MM-DD-HH
   section 2019-12-13
   整理  : a1, 2019-12-13-10 , 2h
   早课 :  crit , after a1 , 2h
   程序 :     a2 , after a1 , 4h
   健身环 :   a3 , after a2 , 3h
   晚课 :  crit  , 2019-12-13-19  , 2h
   工作     :  a4 , after a3 , 4h
   休息 : a5 , after a4 , 1h
工作2     : a6 , after a5 , 3h
   整理工作记录 : 2019-12-14-03 , 1h

重新分配服务

重新分配服务,分割功能,创建新的功能包。

laravel horizon 使用vue 对UI进行构建,使文件在不导入的情况下可以使用

方法可以学习,不过无法使用 2FA 验证 与 用户登录。除非使用vuex

测试 mermaid

mermaid 文档

graph LR
A --> |test| B

gantt
dateFormat  YYYY-MM-DD-HH
section 2019-12-12
整理文档      : done, a1, 2019-12-12-12 , 4h
健身环 :active, a2 , 2019-12-12-16 , 3h
晚课 :crit , a3 , after a2  , 2h
建立对应包     : 2019-12-12-19 , 6h
心理测量者3 : a4 , 2019-12-13-01 , 2h
整理工作记录 : 2019-12-13-03 , 1h

健身环真好玩

效果还是有的,时间长了效果更明显。

switch 入手

没错因为健身环大冒险才入手……

感觉到这几个月体力下降的超明显,也不知道是怎么了

其他

天朝的基础教育虽好

却无法启发天才

老师讲的东西他们自己都不懂

还要教人也是……

简单的就算了

有点难度的就是忽悠人了

积分不讲原理,只知道背公式……

之后的30年是一个重大的变革期

各种意义都是,不过与天朝无关。

就算勉强有关系也要多年之后了……

再一次,在路口走错了。

这次的代价比上次要大的多的多……

日常是无聊的

没有什么要说的

证明还活着~

域名快到期了~

并不想换

0%