PHP Laravel模板示例

时间:2015-12-28 11:24:01

标签: php laravel rendering

我的反对意见是从Laravel Toolbox Kit中创建一个完整的示例。 我想建立一个Controller的页面集,当调用正确路由的地址时,将数据传递给刀片站点。

这是我的代码:

routes.php文件
Route::get('/game/start', function () { return view('start'); });

GameController.php

class GameController extends BaseController
{
    use AuthorizesRequests, DispatchesJobs, ValidatesRequests;

    public function Start()    
    {
        $file = fopen("levels.dat", "r");

        if($file == false)
            return view('start', ['levels' => "Couldn't open file"];

        $filesize = filesize($file);
        $filetext = fread($file, $filesize);

        $fclose($file);

        $levels = str_getcsv($filetext,",");

        return view('start', ['levels' => $levels,
                          'levelsLength' => count($levels)]);
    }
}  

一个game.blade.php。这里的JS引用也在流行。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Conway's Game Of Life - Game</title>

        <!-- CSS And JavaScript -->
        <script type="text/javascript" src="/../../vendor/twitter/bootstrap/dist/js/bootstrap.min.js">
        </script>
        <script type="text/javascript" src="/../../vendor/components/jquery/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="/../../vendor/twitter/bootstrap/dist/css/bootstrap.min.css" />
    </head>

    <body>
        <div class="container">
            <nav class="navbar navbar-default">
                <!-- Navbar Contents -->

            </nav>
        </div>

        @yield('content')
    </body>
</html>

然后start.blade.php

@extends('layouts.game')

@section('content')
<h2>@yield('Title')</h2>
<h3>@yield('Message')</h3>

<div id="first-col">
    Please select the layout you want to play with.
    <form id="layout-selector" method="POST">
        <!-- Watch if this dropdownSelectList works -->
        <label for="selectorDropDown"> Please select the layout you want to play with. </label>
        <select name="dropDownList">
            <!-- This {{$level}} is a string of the Name of the Level -->
            @for($i = 0; $i < $levelsLength; $i++)
                <option value="{{$levels[$i]}}">{{$levels[$i]}}</option>
            @endfor
        </select>
        <input type="submit" action="public/game/level"/>
    </form>
</div>

<div id="second-col">
    <img id="lightUp" style="display:none" src="../img/lightUp30.png"/>
    <img id="putOut" style="display:none"  src="../img/putOut30.png" />

    <canvas id="createCanvas" style="">
        Sorry, your browser doesn't support Canvas! Try it in another type!
    </canvas>

    <script type="text/javascript" src="../js/startGameScript.js"></script>
</div>
@endsection

所以我希望有一个工作网站,因为现在它没有渲染。感谢您的赞赏时间和帮助。对请求的任何进一步解释!

2 个答案:

答案 0 :(得分:0)

你只能在@yield

@section

替换此行

<h2>@yield('Title')</h2>
<h3>@yield('Message')</h3>

用这个

<h2>{{ $Title }}</h2>
<h3>{{ $Message }}</h3>

假设您有$Title&amp;您的刀片模板中的$Message

现在您还可以扩展模板

<!-- Stored in resources/views/layouts/master.blade.php -->

<html>
    <head>
        <title>App Name - @yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            This is the master sidebar.
        @show

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

<!-- Stored in resources/views/child.blade.php -->

@extends('layouts.master')

@section('title', 'Page Title')

@section('sidebar')
    @parent

    <p>This is appended to the master sidebar.</p>
@endsection

@section('content')
    <p>This is my body content.</p>
@endsection

在此示例中,侧边栏部分正在使用@parent指令将附加(而不是覆盖)内容添加到布局的侧边栏中。在呈现视图时,@parent指令将被布局的内容替换。

更多细节可以在https://laravel.com/docs/5.1/blade#template-inheritance

找到

答案 1 :(得分:0)

首先必须修复此块:

  <script type="text/javascript" src="/../../vendor/twitter/bootstrap/dist/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="/../../vendor/components/jquery/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="/../../vendor/twitter/bootstrap/dist/css/bootstrap.min.css" />

无法从刀片服务器引用laravel的供应商文件夹中的文件。

链接到托管库:

<强>自举

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<强>的jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

最新版本:

https://www.bootstrapcdn.com/

https://developers.google.com/speed/libraries/