Question

我正在使用Laravel 5.6。 This page对我不起作用。

pizza / index.blade.php看起来像这样：

@extends('layouts.app')


@section('content')
    <!-- Styles -->
    <link href="{{ asset('css/pizza.css') }}" rel="stylesheet">
    <!-- Scripts -->
    <script src="{{ asset('js/components/pizza.js')}}"></script>
    <div class="container">
        <div class="row justify-content-center">
            <div class="card">
                <div class="card-header">Pizza</div>
                <div class="card-body">
                    <form action="/pizzas" method="post">
                        @if ($errors->any())
                            <div class="alert alert-danger" role="alert">
                                Please fix the following errors
                            </div>
                        @endif
                        @include('pizza.table')
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

pizza / table.blade.php：

<div class="pizza-selection">
    <b>Thanks god its pizza day! Select your pizza of the day!</b>
    <table id="pizzas" class="md-box">
        <tr>
            ...
        </tr>
        @foreach ($pizzas as $pizza)
            ...
        @endforeach
        <tr>
            ...
            <input type="button" class="md-box btn btn-default" 
             id="add_new_pizza" onClick="addPizza()" value="Add Pizza!">
            </td>
        </tr>
    </table>
    ...

当我单击“ add_new_pizza”按钮时，出现参考错误，onClick =“ addPizza（）”，未定义addPizza（）。但是，我尝试在index.blade.php

中导入pizza.js

<script src="{{ asset('js/components/pizza.js')}}"></script>

打印出资产（'js / components / pizza.js'）会返回http://localhost:8080/js/components/pizza.js，它对我来说很合适。

public / js / components / pizza.js如下所示：

import PizzaService from '../services/PizzaService.js';

async function addPizza(){
    // some functionality
}

当我在.blade.php的脚本中拥有函数addPizza（）时，它也起作用。

此外，如果需要任何其他代码审查，请在GitHub上找到存储库： https://github.com/andrelandgraf/laravel-docker

编辑：当我在<script><script>内复制pizza.js时，它可以正常工作，但收到SyntaxError：import declarations may only appear at top level of a module。当我通过src导入脚本时，此SyntaxError消失了，就像您在我的代码示例中看到的那样。对我来说，这表明该脚本根本没有加载。

EDIT2和解决方案：我使用了@kerbholz解决方案。我在@stack('scripts')的{{1}}的底部和body的{{1}}内部添加了app.blade.php，我知道@section('content') index.blade.php文件。

我现在又走了一步，但我仍然收到EDIT中所述的SyntaxError。是否有解决方法？还是我只需要删除导入的@push('stack')并为此文件添加一个pizza.js？

EDIT3：好的，此问题无关。看来浏览器尚不支持ES6模块。

Answer 1

@section块之外的任何内容都不会呈现。

您可以编辑layouts/app.blade.php并在要显示样式/ javascript的位置添加@stack('head')（最好在HTML的<head>部分中）。

然后在@extends('layouts.app')的任何刀片文件中都可以使用

@push('head')
<!-- Styles -->
<link href="{{ asset('css/pizza.css') }}" rel="stylesheet">
<!-- Scripts -->
<script src="{{ asset('js/components/pizza.js')}}"></script>
@endpush

将内容推送到该堆栈中。

有关更多信息，请访问https://laravel.com/docs/5.6/blade#stacks

Answer 2

尝试移动 index.blade.php

底部的pizza.js

    @section('extra-script')

    {{Html::script('js/components/pizza.js')}}

    @endsection

希望有帮助。

Answer 3

对于特定页面上的自定义脚本，

将@yield('footer-scripts'）添加到layouts/app.blade.php
在视图文件夹中创建一个名为'scripts'的文件夹

在views/scripts文件夹内创建文件“ pizza-script.blade.php”并在其中添加js文件内容

<script src="/path/to/pizza.js" />   <!-- it might not work if path isn't clear -->

<script type="text/javascript">
    console.log('executing js here..')
   js file contents....

  #if jquery needed add it like, 

  $(document).ready(function(){
    ...
  }
</script>

最后在index.blade.php（或您希望脚本执行的页面）中，在@endsection
之后添加脚本
```
  @section('footer-scripts')
      @include('scripts.pizza-script')
  @endsection
```

现在刷新页面，您可以在控制台上看到'executing js here..'。

Laravel，将JavaScript导入Blade模板的正确方法

3 个答案: