在 Laravel 中使用 MDBootstrap？答案

【问题标题】：Using MDBootstrap with Laravel?在 Laravel 中使用 MDBootstrap？
【发布时间】：2020-07-04 13:30:36
【问题描述】：

几天来，我一直在尝试在我的 Laravel 项目中使用 MDBootstrap。我特别想创建 MDBootstrap 数据表。我已经使用 npm 和 yarn 成功安装了 MDB，但是当我尝试访问 index.blade.html 页面时，在我的 Web 浏览器控制台中的 $(document) 处出现 jquery 错误 ReferenceError: $。此索引页面是从 app.blade.html 扩展而来的，其中包括 Bootstrap's webpage over MDB Data Tables 所需的脚本。我直接下载了 MBD 并测试了他们的数据表，并且 index.html 运行良好。我对 Laravel（和 PHP）还是很陌生，所以任何建议都将不胜感激。

app.blade.html

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{{asset('css/app.css')}}">
    <!-- MDB icon -->
    <link rel="icon" href="{{asset('node_modules/img/mdb-favicon.ico')}}" type="image/x-icon">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
    <!-- Google Fonts Roboto -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="{{asset('node_modules/css/bootstrap.min.css')}}">
    <!-- Material Design Bootstrap -->
    <link rel="stylesheet" href="{{asset('node_modules/css/mdb.min.css')}}">
    <!-- Your custom styles (optional) -->
    <link rel="stylesheet" href="{{asset('node_modules/css/style.css')}}">
    <!-- MDBootstrap Datatables  -->
    <link href="{{asset('node_modules/css/addons/datatables2.min.css')}}" rel="stylesheet">
    <title>Laravel Project</title>

</head>
<body>
    <div class="container">
    @yield('content')
    </div>

    <!-- jQuery -->
    <script type="text/javascript" src="{{asset('node_modules/js/jquery.min.js')}}"></script>
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="{{asset('node_modules/js/popper.min.js')}}"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="{{asset('node_modules/js/bootstrap.min.js')}}"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="{{asset('node_modules/js/mdb.min.js')}}"></script>
    <!-- Your custom scripts (optional) -->
    <script type="text/javascript"></script>
    <!-- MDBootstrap Datatables  -->
    <script type="text/javascript" src="{{asset('node_modules/js/addons/datatables2.min.js')}}"></script>

    <script>
        // Material Design example
        $(document).ready(function () {
            $('#dtMaterialDesignExample').DataTable();
            $('#dtMaterialDesignExample_wrapper').find('label').each(function () {
                $(this).parent().append($(this).children());
            });
            $('#dtMaterialDesignExample_wrapper .dataTables_filter').find('input').each(function () {
                const $this = $(this);
                $this.attr("placeholder", "Search");
                $this.removeClass('form-control-sm');
            });
            $('#dtMaterialDesignExample_wrapper .dataTables_length').addClass('d-flex flex-row');
            $('#dtMaterialDesignExample_wrapper .dataTables_filter').addClass('md-form');
            $('#dtMaterialDesignExample_wrapper select').removeClass('custom-select custom-select-sm form-control form-control-sm');
            $('#dtMaterialDesignExample_wrapper select').addClass('mdb-select');
            $('#dtMaterialDesignExample_wrapper .mdb-select').materialSelect();
            $('#dtMaterialDesignExample_wrapper .dataTables_filter').find('label').remove();
        });
    </script>

</body>
</html>

index.blade.html

@extends('layouts.app')

@section('content')
    <h1>User Table</h1>

    @if(count($users) > 0)
        <table id="dtMaterialDesignExample" class="table" cellspacing="0" width="100%">
            <thead>
            <tr>
                <th class="th-sm">ID
                </th>
                <th class="th-sm">Name
                </th>
                <th class="th-sm">Occupation
                </th>
                <th class="th-sm">Location
                </th>
                <th class="th-sm">Salary
                </th>
            </tr>
            </thead>
            <tbody>
            @foreach($users as $user)
                <tr>
                    <td>{{$user->id}}</td>
                    <td>{{$user->name}}</td>
                    <td>{{$user->occupation}}</td>
                    <td>{{$user->location}}</td>
                    <td>{{$user->salary}}</td>
                </tr>
            @endforeach
            </tbody>
        </table>
    @endif
@endsection

UsersController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;

class UsersController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $users = User::orderBy('id', 'asc')->paginate(10);
        return view('users.index',['users'=>$users);
    }

【问题讨论】：

标签： php jquery laravel

【解决方案1】：

如果您使用 npm 安装它们，那么您需要先运行编译所有资产

npm install

然后

npm run dev

之后，您将需要包含您的文件

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{{asset('css/app.css')}}">

    <link href="{{asset('css/app.css')}}" rel="stylesheet">
    <title>Laravel Project</title>

</head>
<body>
    <div class="container">
    @yield('content')
    </div>
    <script src="{{asset('js/app.js')}}"></script>
    <script>
        // Material Design example
        $(document).ready(function () {
            $('#dtMaterialDesignExample').DataTable();
            $('#dtMaterialDesignExample_wrapper').find('label').each(function () {
                $(this).parent().append($(this).children());
            });
            $('#dtMaterialDesignExample_wrapper .dataTables_filter').find('input').each(function () {
                const $this = $(this);
                $this.attr("placeholder", "Search");
                $this.removeClass('form-control-sm');
            });
            $('#dtMaterialDesignExample_wrapper .dataTables_length').addClass('d-flex flex-row');
            $('#dtMaterialDesignExample_wrapper .dataTables_filter').addClass('md-form');
            $('#dtMaterialDesignExample_wrapper select').removeClass('custom-select custom-select-sm form-control form-control-sm');
            $('#dtMaterialDesignExample_wrapper select').addClass('mdb-select');
            $('#dtMaterialDesignExample_wrapper .mdb-select').materialSelect();
            $('#dtMaterialDesignExample_wrapper .dataTables_filter').find('label').remove();
        });
    </script>

</body>
</html>

还要检查您的控制器是否有此行的拼写错误

 return view('users.index',['users'=>$users);

应该是

 return view('users.index',['users'=>$users]);

除了上述之外，转到 resources/bootstrap.php 并包含以下内容

try{
window.$ = window.jQuery = require('jquery');
require('bootstrap')
//to get the exact name for the bootstrap, go to package.json and copy out the //name for mdbootstrap exactly


require('name_for_mdboostrap')
    }catch(e){}

然后再次运行 npm run dev 重新编译

【讨论】：

好的，我执行了第一个命令并包含了 js/app.js。我是否还需要包含 Bootstrap 说他们的数据表需要的其他脚本？根据您的建议，我在 Web 浏览器的控制台中收到来自 app.js 的“TypeError：“exports”是只读的”错误。
npm install 将完成所有这些包含，npm run dev 将为您编译它，您不需要任何其他包含的文件
你能分辨出哪个包含的文件有错误吗？
导致错误的特定行位于模块 bsCustomFileInput v1.3.2 的正下方。
让我们continue this discussion in chat.

【解决方案2】：

正如我痛苦地发现的那样，有时将 MDBootstrap 与 Laravel 一起使用可能有点挑剔，但在我能够正确引用所需的 js 文件（使用 Laravel Mix）后，我的数据表可以正常运行并具有正确的样式。使用样式时，我忽略了使用 app.sass，因为当时我不知道它的功能。但是，在包含其他脚本之后，有时 mdb.min.js 仍然会抛出“TypeError：“exports”是只读的”错误，我通过从公共文件夹中删除 js 文件并重新编译来解决该错误。

【讨论】：