And*_*dre 7 javascript php laravel laravel-blade
我正在使用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
披萨/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
编辑：当我复制其中的pizza.js时，<script><script>它工作正常，但是我收到一个SyntaxError：import declarations may only appear at top level of a module。当我通过src导入脚本时，此SyntaxError消失了，就像您在我的代码示例中看到的那样。对我来说，这表明该脚本根本没有加载。
EDIT2和解决方案：我使用了@kerbholz解决方案。我添加@stack('scripts')到的底部body在app.blade.php和里面@section('content')的index.blade.php我知道@push('stack')了pizza.js文件。
现在，我又走了一步，但仍然收到EDIT中所述的SyntaxError。是否有解决方法，还是我只需要删除导入PizzaService.js并添加一个<scipt>-Tag为此文件？
EDIT3：好的，此问题无关。看来浏览器尚不支持ES6模块。
ker*_*olz 12
@section区块之外的任何内容均不会呈现。
您可以进行编辑，layouts/app.blade.php并在@stack('head')其中添加样式/ javascript的位置（最好在<head>HTML部分中）。
在@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
对于特定页面上的自定义脚本，
添加@yield('footer-scripts') 到layouts/app.blade.php
创建一个'scripts'在 views 文件夹中命名的文件夹
在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..'在控制台上看到了。