ycgambo/laravel-vue-templates

一个用于在Blade中使用Vue标签的Laravel后台模板

维护者

详细信息

github.com/ycgambo/laravel-vue-templates

源代码

问题

安装: 372

依赖者: 0

建议者: 0

安全性: 0

星标: 10

关注者: 1

分支: 2

开放问题: 1

语言：Blade

v2.5.0 2020-02-28 10:50 UTC

Requires

MIT 935a67e7854c1f864b94d119f87e5dd7aaaaa712

  • ycgambo <ycgambo.woop@gmail.com>

adminlaravelbladevue

This package is auto-updated.

Last update: 2024-09-24 13:19:13 UTC

README

Laravel Vue Templates

一个用于在Blade中生成动态Vue标签的Laravel后台模板。专注于数据，而非渲染。

中文文档

为什么

虽然Laravel Blade和Vue都很有用，但我们不能同时使用它们（除非我们将Vue作为库使用）。

这让我们有两个选择来开发一个管理网站

  1. 使用Laravel作为API服务器并部署另一个Vue应用程序
  2. 使用Laravel Blade引擎与jQuery结合，并摆脱Vue

如果你是一个全栈开发者或者项目本身是可扩展的，选择1是最好的选择。对于复杂的后台页面，选择2会非常痛苦。

所以，感谢vue-admin项目，我将其修改以适应后端开发者的习惯。

它处理这些痛苦的问题

  1. 菜单（生成菜单树，检测当前菜单）
  2. 异步页面加载（将新的Blade加载到页面内容中而不进行重定向）
  3. Vue插件（在Blade中编写Vue标签）

安装

安装包

composer require ycgambo/laravel-vue-templates

将此行添加到您的 config/app.php 中的提供者（对于Laravel 5.8+无需此操作）

Yb\LVT\ThemeServiceProvider::class,

释放资源

php artisan vendor:publish --provider='Yb\LVT\ThemeServiceProvider'

访问 hostname/lvt/VueAdmin/example/dashboard 以查看页面。

查看我部署在服务器上的这个在线 演示。

此外，还有一个名为 resources/laravel-vue-templates 的目录，它包含从该包中复制出的示例引用。

如果您不想使用这些示例路由，请取消注释此行

Yb\LVT\ThemeServiceProvider::class,

用法

注册到Blade组件

VueAdmin::create($namespace, 'example')->with('menus', $menus)->boot();

然后在Blade中使用

@example

@php
    $rules = [
        'name' => 'required|min:3',
        'email' => 'required|email',
    ];
@endphp

<fm-form action="/lvt/VueAdmin/example/submit" method="post" size="small" rules='@json($rules)'>
    {{ csrf_field() }}
    <fm-input label="Name" name="name"></fm-input>
    <fm-input label="Email" name="email"></fm-input>
    
    <el-form-item>
        <el-button class="pull-right" type="primary" native-type="submit">Check It Out</el-button>
    </el-form-item>
</fm-form>

@endexample

menus 是一个如下的数组，请看如何生成它

$menus = [
//  ['id' => 'menu id', 'name' => 'menu name', 'icon' => 'menu icon'，'url' => 'which url to redirect', 'sub' => 'for sub menus', ],

    ['id' => 'home', 'name' => 'Home', 'icon' => 'fa-tachometer'，'url' => '/home', ],
    ['id' => 'layout', 'name' => 'Layouts', 'icon' => 'fa-tachometer', 'sub' => [
        ['id' => 'vue-admin', 'name' => 'Vue Admin', 'icon' => 'fa-tachometer'，'url' => '/layout/vue-admin', ],
    ]],
];

如果您想扩展布局

VueAdmin::create($namespace, 'example')->inject('admin.base')->with('menus', $menus)->boot();

您可以通过在admin.base blade中使用 _example 来注入它

@_example

    @section('header')
        {{-- page css are not dynamic loaded, because there's no way to clean it up once loaded, and it will affect other pages --}}
        {{-- commonly used css --}}
    @endsection
    
    {{-- custom header icon slots --}}
    @section('header-lr')
    @endsection
    @section('header-rl')
        <a class="header-item" href="#">
            <i class="fa fa-weixin" aria-hidden="true"></i>
        </a>
    @endsection
    @section('header-rr')
        <a class="header-item" href="/admin/logout">
            <i class="fa fa-sign-out" aria-hidden="true"></i>
        </a>
    @endsection

    @section('title')
        @yield('title') {{-- expose title for subpages --}}
    @endsection

    {{ $slot }}

    @section('import')
        {{-- commonly used js --}}
    @endsection

    @section('js')
        {{-- these section will be dynamic loaded, and you can use __destructor to clean things up before load another page --}}
        @if ($errors->any())
            <script>
                @foreach ($errors->all() as $error)
                    __notify("{{$error}}", 'Error', 'warning')
                @endforeach
            </script>
        @endif
    @endsection
@end_example

然后使用注入的Blade

@example

@php
    $rules = [
        'name' => 'required|min:3',
        'email' => 'required|email',
    ];

    $data = [
        'CMCC' => [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122],
        'C0CC' => [220, 182, 125, 145, 122, 191, 34, 50, 120, 110, 165, 122],
        'CUCC' => [220, 182, 125, 15, 122, 191, 134, 150, 120, 110, 165, 122],
    ];
    $data['ref'] = ["13:00", "13:05", "13:10", "13:15", "13:20", "13:25", "13:30", "13:35", "13:40", "13:45", "13:50", "13:55"];
@endphp

@section('title')
    Page No 1
@endsection

<fm-form action="/lvt/VueAdmin/example/submit" method="post" size="small" rules='@json($rules)'>
    {{ csrf_field() }}
    <fm-input label="Name" name="name"></fm-input>
    <fm-input label="Email" name="email"></fm-input>
    <fm-date label="Birth" name="birth" type="datetime"></fm-date>
    <fm-select label="Hometown" name="hometown">
        <el-option value="Washington" label="Washington">Washington</el-option>
        <el-option value="Chicago" label="Chicago">Chicago</el-option>
    </fm-select>
    <fm-checkbox label="Hobbies">
        <el-checkbox name="code" label="Code" border checked>Code</el-checkbox>
        <el-checkbox name="eat" label="Eat" border>Eat</el-checkbox>
    </fm-checkbox>
    <fm-switch label="Remember Me" name="remember" on active-color="#13ce66" inactive-color="#ff4949"
               active-text="Yes"
               inactive-text="No"></fm-switch>
    <el-form-item label="Describe Yourself">
        <text-editor name="describe" upload_url="/lvt/VueAdmin/example/img_upload">{!! $editor ?? '' !!}</text-editor>
    </el-form-item>
    <el-form-item>
        <el-button class="pull-right" type="primary" native-type="submit">Check It Out</el-button>
    </el-form-item>
</fm-form>

<chart-line height="400px" smooth="false" x-name="xAxis" y-name="yAxis">@json($data)</chart-line>

@section('js')
    @parent
    <script>
        !(function () {
            var i = setInterval(() => {
                console.log(123)
            }, 500)
            __destructor = () => {
                clearInterval(i)
            }
        })()
    </script>
@endsection

@endexample

路由示例

注册管理路由：（app/Providers/RouteServiceProvider.php）

    public function map()
    {
        $this->mapApiRoutes();
        $this->mapWebRoutes();
        $this->mapAdminRoutes();
    }

    protected function mapAdminRoutes()
    {
        Route::prefix('admin')
            // ->middleware('admin')
            ->namespace("{$this->namespace}\Admin")
            ->group(base_path('routes/admin.php'));
        \Yb\LVT\Themes\VueAdmin\VueAdmin::create('admin', 'admin')
            ->inject('admin.base')
            ->with('menus', $this->getAdminMenus())
            ->paginate()
            ->boot();
    }

    protected function getAdminMenus()
    {
        $sort = [
            'index',
            'consumerMessage.manual',
        ];
        $icons = [
            'index' => 'fa-tachometer',
            'consumerMessage' => 'fa-commenting-o',
        ];
        $names = [
            'consumerMessage' => '客服消息',
            'consumerMessage.manual' => '手动发送',
            'consumerMessage.reply' => '消息回复',
        ];
        $ignores = [
            'base',
            'consumerMessage.manual_edit',
            'consumerMessage.reply_edit',
        ];
        
        return \Yb\LVT\Menu::in(resource_path('views/admin'))
            ->prefix('/admin')
            ->icons($icons)
            ->names($names)
            ->ignores($ignores)
            ->get($sort);
    }

视图目录树

resources/views/admin
├── base.blade.php
├── consumerMessage
│   ├── manual.blade.php
│   ├── manual_edit.blade.php
│   ├── reply.blade.php
│   ├── reply_edit.blade.php
└── index.blade.php