laravel基础--9.0 表格demo-静态页面

最新推荐文章于 2024-05-18 09:48:44 发布

zmlucky

最新推荐文章于 2024-05-18 09:48:44 发布

阅读量231

点赞数

分类专栏： laravel PHP

本文链接：https://blog.csdn.net/weixin_44506318/article/details/102963680

版权

PHP 同时被 2 个专栏收录

50 篇文章 0 订阅

订阅专栏

laravel

33 篇文章 0 订阅

订阅专栏

导入静态资源

public目录下

创建控制器

/*
 * 表格demo
 *
 */

public function index(){

    return view('student.index');
}

创建视图

创建路由

 Route::get('student/index',['uses'=>'StudentController@index']);

创建公共模板

公共父模板

<!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-@yield('title','表格demo')</title>
    <!-- Bootstrap CSS 文件 -->
    <link rel="stylesheet" href="{{ asset('static/bootstrap/css/bootstrap.min.css') }}">
@section('style')

@show
</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">

        <!-- 左侧菜单区域   -->
        <div class="col-md-3">
            @section('left_menu')
                <div class="list-group">
                    <a href="#" class="list-group-item active">学生列表</a>
                    <a href="#" class="list-group-item">新增学生</a>
                </div>
            @show
        </div>

        <!-- 右侧内容区域 -->
        <div class="col-md-9">
            @yield('content')
        </div>
    </div>
</div>

@section('footer')
    <!-- 尾部 -->
    <div class="jumbotron" style="margin:0;">
        <div class="container">
            <span>  @2016 imooc</span>
        </div>
    </div>
@show

@section('script')
<!-- jQuery 文件 -->
<script src="{{ asset('static/jquery/jquery-3.4.1.min.js')}}"></script>
<!-- Bootstrap JavaScript 文件 -->
<script src="{{ asset('static/bootstrap/js/bootstrap.min.js')}}"></script>
@show

</body>
</html>

注意：静态资源使用 asset('') 导入

公共消息模板

<!-- 成功提示框 -->
<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('common.layouts')

@section('content')

    @include('common.message')
<!-- 自定义内容区域 -->
<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>
@stop