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

环境

• 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 可以看到最新效果

本作品采用《CC 协议》，转载必须注明作者和本文链接