Laravel小项目之第2节 Laravel-静态资源管理及模板布局

最新推荐文章于 2022-12-06 17:10:54 发布

放肆青春的博客

最新推荐文章于 2022-12-06 17:10:54 发布

阅读量3k

点赞数 2

分类专栏： Laravel框架

Laravel框架专栏收录该内容

16 篇文章 1 订阅

订阅专栏

第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');
    }
}

效果如下：

下载静态模板文件

静态模板文件: 下载地址

创建模板文件：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/ 效果如图：

接下来，修改主模板文件 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>

现在的首页显示效果：

先别急！我们继续修改模板文件。

我们把消息提示的内容也提取到公共的模板文件中。

成功提示框的内容复制到： 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>

	...

放肆青春的博客

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Laravel小项目之第2节 Laravel-静态资源管理及模板布局

第2节 Laravel-静态资源管理及模板布局2.1 创建控制器2.2 创建列表页2.3 创建首页视图2.4 静态资源管理2.1 创建控制器使用Artisan命令行工具创建 StudentController:php artisan make:controller StudentController控制器路径 app\Http\Controllers\StudentC
复制链接

扫一扫