Laravel，将javascript导入Blade Templates的正确方法

php javascript laravel laravel-blade

2022-08-30 13:56:26

我使用的是 Laravel 5.6。这个页面对我不起作用。

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

比萨饼/桌子.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中导入比萨饼.js.php

<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的脚本中使用函数addPizza（）时，它也可以工作.php。

另外，如果您需要任何进一步的代码审查，请在GitHub上找到该存储库：https://github.com/andrelandgraf/laravel-docker

编辑：当我复制比萨饼时.js里面工作正常，但我收到一个语法错误：。当我通过 src 导入脚本时，此语法错误会消失，就像您在我的代码示例中看到的那样。对我来说，这表明脚本根本没有加载。<script><script>import declarations may only appear at top level of a module

EDIT2和解决方案：我用@kerbholz解决方案。我添加到底部的里面和里面我知道的文件。@stack('scripts')bodyapp.blade.php@section('content')index.blade.php@push('stack')pizza.js

我现在更进一步，但我仍然收到EDIT中陈述的语法错误。是否有解决方法，或者我只需要删除导入并为此文件添加一个？PizzaService.js<scipt>-Tag

编辑3：好的，这个问题不相关。看起来浏览器还不支持ES6模块。

答案 1

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

你可以编辑你的，并添加一个你想要你的样式/javascript出现的地方（最好在你的HTML部分）。layouts/app.blade.php@stack('head')<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

答案 2

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

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

内部文件夹创建一个文件''，并在内部添加js文件内容views/scriptspizza-script.blade.php

<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..'