[Laravel] 06 - Project: from Usercase to View

時間 2019-11-16

標籤 laravel project usercase view 简体版

原文原文鏈接

故事背景

1、項目預覽

From: https://www.imooc.com/video/12518javascript

2、知識點

經過項目複習以前的重難點，在此列出並解決。php

/* implement */css

項目開始

1、佈局分析

經過純html文件給佈局打底稿

共同的頭部html

共同的側邊欄java

共同的尾部mysql

只是右側內容不一樣。 jquery

Move/add bootstrap and jquery under public/static/

2、打通 MVC

路由

Route::get('student/index', ['uses' => 'StudentController@index']);　　----> 控制器文件

控制器

[StudentController.php]laravel

class StudentController extends Controller
{
    // 學生列表頁
    public function index()
    {
　　 　　return view('student.index');　　----> 視圖文件
    }
}

視圖

[resources/views/student/index.blade.php]sql

只是一個blade模板佈局。能夠暫時隨便寫點什麼顯示出來打通MVC便可。bootstrap

模型

暫時不用

3、Usercase到視圖

視圖也就是usercase的直接對接物，因此從這裏開始。

靜態資源管理以及模板佈局

Ref: https://www.imooc.com/video/12519, 06:38 / 11:48

[views/common/layouts.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>
    <title>輕鬆學會Laravel - @yield('title')</title>
    # 佔位符    

    <!-- Bootstrap CSS 文件 -->
    <link rel="stylesheet" href="./static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{ asset('./static/bootstrap/css/bootstrap.min.css') }}">

    @section('style')
　　　　// Jeff: 難點一
    @show
</head>

---------------------------------------------------------------------------

<body>

<!-- 頭部 -->
<div class="jumbotron">
    <div class="container">
        <h2>輕鬆學會Laravel</h2>

        <p> - 玩轉Laravel表單</p>
    </div>
</div>

<!-- 中間內容區局 -->
<div class="container">
    <div class="row">
        --------------------------------------------------------------
        @section(...)
        <!-- 左側菜單區域   -->
        <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>
        @show         
        ---------------------------------------------------------------

        <!-- 右側內容區域 -->
        <div class="col-md-9">

            ---------------------------------------------------------------------------------
            單獨放在另外一個文件中，例如同級目錄下的message.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>
            ----------------------------------------------------------------------------------

            ##################################################################################
            如下就是內容區域，移動到index文件中，單獨處理。
            這裏使用佔位符：@yield('content')
　　　　　　　固然，這個index文件要繼承該模板，經過 @extends('common.layouts')
            ##################################################################################
            <!-- 自定義內容區域 -->
            <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 imooc</span>
    </div>
</div>

<!-- jQuery 文件 -->
<script src="./static/jquery/jquery.min.js"></script>
<!-- Bootstrap JavaScript 文件 -->
<script src="./static/bootstrap/js/bootstrap.min.js"></script>

@section('javascript')
　　// Jeff　留給js的一塊地皮
@show

</body>
</html>

使用模板

先繼承模板；
再填充content的內容：@yield('content')
提示內容經過調用子視圖搞定：@include

樣式調整

asset 究竟是什麼？

asset()方法用於引入 CSS/JavaScript/images 等文件，文件必須存放在public文件目錄下。

[1] <link rel="stylesheet" href="./static/bootstrap/css/bootstrap.min.css">

[2] <link rel="stylesheet" href="{{ asset('./static/bootstrap/css/bootstrap.min.css') }}">

難點一

Ref: Laravel5.4初試-@yield @section @show @stop @append標籤區別

Ref: 關於 @section...@show;@section....@endsection 的用法分析

/* implement */

難點二

保持結構，改變內容

@section...@show能夠改變內容

/* implement */

難點三

固定區域，內容靈活

/* implement */

4、分頁的實現

分頁上是網頁內容，也就是Student Info。

因此，須要定義模型。

"模型 --> 控制器 --> 分頁視圖"

視圖 - 模板

視圖 - php循環寫網頁

  <!-- 自定義內容區域 -->
    <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> #表體
            ------------------------------------------------------------------------------------------
                @foreach($students as $student)                 <tr>
                    <th scope="row">{{ $student->id }}</th>
                    <td>{{ $student->name }}</td>
                    <td>{{ $student->age }}</td>
                    <td>{{ $student->sex($student->sex) }}</td>
                    <td>{{ date('Y-m-d', $student->created_at) }}</td>
                    <td>
                        <a href="{{ url('student/detail', ['id' => $student->id]) }}">詳情</a>
                        <a href="{{ url('student/update', ['id' => $student->id]) }}">修改</a>
                        <a href="{{ url('student/delete', ['id' => $student->id]) }}"
                           onclick="if (confirm('肯定要刪除嗎？') == false) return false;">刪除</a>
                    </td>
                </tr>
                @endforeach
            ------------------------------------------------------------------------------------------
            </tbody>
        </table>
    </div>

$students 做爲參數是從哪裏來的？　---- "模型Student" 中定義

控制器爲視圖提供數據

<?php

namespace App\Http\Controllers;

use App\Student;
use Illuminate\Http\Request;

class StudentController extends Controller
{
    // 學生列表頁
    public function index()
    {
        $students = Student::paginate(5);　　<----  mysql
        return view('student.index', [
            'students' => $students,         -----> 爲'視圖'提供參數
        ]);
    }
｝

到此，佈局設計的套路就有了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。