# 第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']);
**测试是否可以访问**
## 2.3 创建首页视图 ##
创建文件 `resources\views\student\index.blade.php` 随便输入点内容。
**显示视图：**
class StudentController extends Controller
{
public function index()
{
return view('student/index');
}
}
**效果如下：**
**下载静态模板文件**
静态模板文件: [下载地址](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">×</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">×</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">«</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">»</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/` 效果如图：
接下来，修改主模板文件 `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">×</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">×</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">«</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">»</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>
~~~
现在的首页显示效果：
先别急！我们继续修改模板文件。
我们把消息提示的内容也提取到公共的模板文件中。
**成功提示框的内容复制到： `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">×</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">×</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">«</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">»</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>
...
~~~
