又一个漂亮的日志查看扩展包 arcanedev/log-viewer

logviewer

环境

  • laravel 5.5
  • php 7.1
  • yarn, npm ...

安装

github:

https://github.com/ARCANEDEV/LogViewer.git

官方文档:

https://github.com/ARCANEDEV/LogViewer/blob/master/_docs/1.Installation-and-Setup.md

安装:

composer require arcanedev/log-viewer -vvv
php artisan log-viewer:publish

必要的配置

配置文件: config/log-viewer.php

日志需要配置成按天分割

查看 config/app.php, 发现配置:

<?php
    ...
    'log' => env('APP_LOG', 'single'),
    ...

于是编辑 .env 文件,加入:

APP_LOG=daily

本地化

参考文档:https://github.com/ARCANEDEV/LogViewer/blob/master/_docs/2.Configuration.md

配置简体中文:config/log-viewer.php

<?php
    ...
    'locale' => 'zh'
    ...

前端页面使用到了 cloudfare CDN 和 google 字体,查看 resources/views/vendor/log-viewer/_template/master.blade.php

...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/css/bootstrap-datetimepicker.min.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700|Source+Sans+Pro:400,600' rel='stylesheet' type='text/css'>
...
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/js/bootstrap-datetimepicker.min.js"></script>
...

于是:

yarn add bootstrap --save
yarn add font-awesome --save
yarn add eonasdan-bootstrap-datetimepicker --save
yarn add chart.js --save
yarn add moment --save

由于 laravel 5.5 默认自带 >3.0 的 jquery,直接使用报兼容错误:

yarn add jquery-migrate --save

安装完成后,编辑 webpack.mix.js 加入:

.styles([
    'node_modules/bootstrap/dist/css/bootstrap.min.css',
    'node_modules/font-awesome/css/font-awesome.min.css',
    'node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css'
], 'public/css/log-viewer.css')
.scripts([
    'node_modules/jquery/dist/jquery.min.js',
    'node_modules/jquery-migrate/dist/jquery-migrate.min.js ',
    'node_modules/bootstrap/dist/js/bootstrap.min.js',
    'node_modules/moment/min/moment-with-locales.min.js',
    'node_modules/chart.js/dist/Chart.min.js',
    'node_modules/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js'
], 'public/js/log-viewer.js')
.copy('node_modules/font-awesome/fonts/*', 'public/fonts/')
.copy('node_modules/bootstrap/fonts/*', 'public/fonts/')

resources/views/vendor/log-viewer/_template/master.blade.php 分别替换 js 和 css:

...
<link rel="stylesheet" href="{{ mix('css/log-viewer.css') }}">
...
<script src="{{ mix('js/log-viewer.js') }}"></script>
...

编译前端资源:

npm run dev

大功告成,浏览器直接访问 http://APPHOST/log-viewer 可以看到最新效果