🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# 第2节 Laravel-静态资源管理及模板布局 # 2.1 创建控制器 2.2 创建列表页 2.3 创建首页视图 2.4 静态资源管理 ## 2.1 创建控制器 ## 使用Artisan命令行工具创建 `StudentController`: php artisan make:controller StudentController 控制器路径 `app\Http\Controllers\StudentController.php` <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Http\Requests; class StudentController extends Controller { // } ## 2.2 创建列表页 ## 创建 `index()` 方法,输出字符串"Hello Laravel": **添加路由:** 在路由文件 `app\Http\routes.php` 中添加路由,访问 `index()` 方法 把默认的路由: Route::get('/', function () { return view('welcome'); }); 修改为: Route::get('/', ['uses' => 'StudentController@index']); **测试是否可以访问** ![](https://box.kancloud.cn/5b274e9ff00e319dfa5c6351a65bcf78_937x728.png) ## 2.3 创建首页视图 ## 创建文件 `resources\views\student\index.blade.php` 随便输入点内容。 **显示视图:** class StudentController extends Controller { public function index() { return view('student/index'); } } **效果如下:** ![](https://box.kancloud.cn/16da9ef3057b4802069d3ea7ce64646f_937x728.png) **下载静态模板文件** 静态模板文件: [下载地址](https://github.com/webjust/laravel_form_step/blob/master/doc/html.zip) 创建模板文件:`resources\views\layout\student.blade.php` 复制文件 `\html\form\layout-index.html` 内容到 `student.blade.php`: ~~~ <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>轻松学会Laravel</title> <!-- Bootstrap CSS 文件 --> <link rel="stylesheet" href="./static/bootstrap/css/bootstrap.min.css"> </head> <body> <!-- 头部 --> <div class="jumbotron"> <div class="container"> <h2>轻松学会Laravel</h2> <p> - 玩转Laravel表单</p> </div> </div> <!-- 中间内容区局 --> <div class="container"> <div class="row"> <!-- 左侧菜单区域 --> <div class="col-md-3"> <div class="list-group"> <a href="#" class="list-group-item active">学生列表</a> <a href="#" class="list-group-item">新增学生</a> </div> </div> <!-- 右侧内容区域 --> <div class="col-md-9"> <!-- 成功提示框 --> <div class="alert alert-success alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> <strong>成功!</strong> 操作成功提示! </div> <!-- 失败提示框 --> <div class="alert alert-danger alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> <strong>失败!</strong> 操作失败提示! </div> <!-- 自定义内容区域 --> <div class="panel panel-default"> <div class="panel-heading">学生列表</div> <table class="table table-striped table-hover table-responsive"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>添加时间</th> <th width="120">操作</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>18</td> <td>男</td> <td>2016-01-01</td> <td> <a href="">详情</a> <a href="">修改</a> <a href="">删除</a> </td> </tr> <tr> <th scope="row">1</th> <td>Mark</td> <td>18</td> <td>男</td> <td>2016-01-01</td> <td> <a href="">详情</a> <a href="">修改</a> <a href="">删除</a> </td> </tr> <tr> <th scope="row">1</th> <td>Mark</td> <td>18</td> <td>男</td> <td>2016-01-01</td> <td> <a href="">详情</a> <a href="">修改</a> <a href="">删除</a> </td> </tr> </tbody> </table> </div> <!-- 分页 --> <div> <ul class="pagination pull-right"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">&laquo;</span> </a> </li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span> </a> </li> </ul> </div> </div> </div> </div> <!-- 尾部 --> <div class="jumbotron" style="margin:0;"> <div class="container"> <span> @2016 webjust</span> </div> </div> <!-- jQuery 文件 --> <script src="./static/jquery/jquery.min.js"></script> <!-- Bootstrap JavaScript 文件 --> <script src="./static/bootstrap/js/bootstrap.min.js"></script> </body> </html> ~~~ **使用模板继承:** 在 `resources\views\student\index.blade.php` 文件内容中输入: @extends('layout/student') 现在刷新 `http://example.com/` 效果如图: ![](https://box.kancloud.cn/5ffe892bacdb665d04e68e6bbd1c19fe_937x728.png) 接下来,修改主模板文件 `layout/student`: ~~~ <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>@yield('title', '用户列表页面') - 轻松学会Laravel</title> <!-- Bootstrap CSS 文件 --> <link rel="stylesheet" href="./static/bootstrap/css/bootstrap.min.css"> </head> <body> @section('header') <!-- 头部 --> <div class="jumbotron"> <div class="container"> <h2>轻松学会Laravel</h2> <p> - 玩转Laravel表单</p> </div> </div> @show <!-- 中间内容区局 --> <div class="container"> <div class="row"> <!-- 左侧菜单区域 --> @include('shared/siderbar') <!-- 右侧内容区域 --> <div class="col-md-9"> @yield('content') </div> </div> </div> @section('footer') <!-- 尾部 --> <div class="jumbotron" style="margin:0;"> <div class="container"> <span> @2016 webjust</span> </div> </div> @show <!-- jQuery 文件 --> <script src="./static/jquery/jquery.min.js"></script> <!-- Bootstrap JavaScript 文件 --> <script src="./static/bootstrap/js/bootstrap.min.js"></script> @section('javascript') @show </body> </html> ~~~ 创建文件:`resources\views\shared\siderbar.blade.php` 把左边导航的内容分离出来 ~~~ <div class="col-md-3"> <div class="list-group"> <a href="#" class="list-group-item active">学生列表</a> <a href="#" class="list-group-item">新增学生</a> </div> </div> ~~~ 同理,内容主体部分复制到 `resources\views\student\index.blade.php` ~~~ @extends('layout/student') @section('content') <!-- 成功提示框 --> <div class="alert alert-success alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> <strong>成功!</strong> 操作成功提示! </div> <!-- 失败提示框 --> <div class="alert alert-danger alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> <strong>失败!</strong> 操作失败提示! </div> <!-- 自定义内容区域 --> <div class="panel panel-default"> <div class="panel-heading">学生列表</div> <table class="table table-striped table-hover table-responsive"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>添加时间</th> <th width="120">操作</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>18</td> <td>男</td> <td>2016-01-01</td> <td> <a href="">详情</a> <a href="">修改</a> <a href="">删除</a> </td> </tr> <tr> <th scope="row">1</th> <td>Mark</td> <td>18</td> <td>男</td> <td>2016-01-01</td> <td> <a href="">详情</a> <a href="">修改</a> <a href="">删除</a> </td> </tr> <tr> <th scope="row">1</th> <td>Mark</td> <td>18</td> <td>男</td> <td>2016-01-01</td> <td> <a href="">详情</a> <a href="">修改</a> <a href="">删除</a> </td> </tr> </tbody> </table> </div> <!-- 分页 --> <div> <ul class="pagination pull-right"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">&laquo;</span> </a> </li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span> </a> </li> </ul> </div> @endsection ~~~ ## 2.4 静态资源管理 ## 将 `\html\form\static` 文件夹复制到 `public` 目录下。 显示静态资源则需要修改主模板文件中的 css, js 的路径即可。 ~~~ <link rel="stylesheet" href="./static/bootstrap/css/bootstrap.min.css"> ~~~ 修改为 ~~~ <link rel="stylesheet" href="{{ asset('static/bootstrap/css/bootstrap.min.css') }}"> ~~~ 同理: ~~~ <!-- jQuery 文件 --> <script src="./static/jquery/jquery.min.js"></script> <!-- Bootstrap JavaScript 文件 --> <script src="./static/bootstrap/js/bootstrap.min.js"></script> ~~~ 修改为 ~~~ <!-- jQuery 文件 --> <script src="{{ asset('static/jquery/jquery.min.js') }}"></script> <!-- Bootstrap JavaScript 文件 --> <script src="{{ asset('static/bootstrap/js/bootstrap.min.js') }}"></script> ~~~ 现在的首页显示效果: ![](https://box.kancloud.cn/c32c6b6be27d30cfec7b693b2458c6e3_1046x728.png) 先别急!我们继续修改模板文件。 我们把消息提示的内容也提取到公共的模板文件中。 **成功提示框的内容复制到: `resources\views\shared\success.blade.php`** ~~~ <div class="alert alert-success alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> <strong>成功!</strong> 操作成功提示! </div> <div class="alert alert-danger alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> <strong>失败!</strong> 操作失败提示! </div> ~~~ 目前,首页的视图文件内容引入这些公共模板文件,视图文件为: ~~~ @extends('layout/student') @section('content') <!-- 自定义内容区域 --> <div class="panel panel-default"> <div class="panel-heading">学生列表</div> <table class="table table-striped table-hover table-responsive"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>添加时间</th> <th width="120">操作</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>18</td> <td>男</td> <td>2016-01-01</td> <td> <a href="">详情</a> <a href="">修改</a> <a href="">删除</a> </td> </tr> <tr> <th scope="row">1</th> <td>Mark</td> <td>18</td> <td>男</td> <td>2016-01-01</td> <td> <a href="">详情</a> <a href="">修改</a> <a href="">删除</a> </td> </tr> <tr> <th scope="row">1</th> <td>Mark</td> <td>18</td> <td>男</td> <td>2016-01-01</td> <td> <a href="">详情</a> <a href="">修改</a> <a href="">删除</a> </td> </tr> </tbody> </table> </div> <!-- 分页 --> <div> <ul class="pagination pull-right"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">&laquo;</span> </a> </li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span> </a> </li> </ul> </div> @endsection ~~~ 主视图中引入消息内公共视图文件,则修改一下: ~~~ ... <!-- 中间内容区局 --> <div class="container"> <div class="row"> <!-- 左侧菜单区域 --> @include('shared/siderbar') <!-- 右侧内容区域 --> <div class="col-md-9"> <!-- 成功提示框 --> @include('shared/success') @yield('content') </div> </div> </div> ... ~~~