Blade 模板
參考資料 Blade 模板文件
現成的元件模板 MagicBox
連結地址 藍鯨MagicBox
這裡提供了眾多的後臺管理介面元件的封裝並且可以直接使用，而我們只需要將他們拿過來結合我們的資料做一些繫結就可以正常使用了
這裡主要介紹一些細節
由於時間關係就不一一介紹了
在 resources\views 資料夾下新建 homework2 資料夾用來儲存作業相關檢視，新建 layouts 資料夾用來儲存佈局相關檢視, 新建 shared 資料夾用於儲存公共檢視
錯誤提示
當驗證錯誤需要新增錯誤提示，這裡使用藍鯨提供的錯誤提示檢視參考連結
在layouts 資料夾下新建 _message.balde.php
<link href="https://magicbox.bk.tencent.com/static_api/v3/assets/fontawesome/css/font-awesome.css" rel="stylesheet">
<link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css/bk.css" rel="stylesheet">
@if (Session::has('message'))
<div class="king-notice2 king-notice-info notice-borders">
<i class="fa fa-info-circle"></i>
<div class="notice-text">
<p>{{ Session::get('message') }}</p>
</div>
</div>
@endif
@if (Session::has('success'))
<div class="king-notice2 king-notice-success notice-borders">
<i class="fa fa-check-circle"></i>
<div class="notice-text">
<p>{{ Session::get('success') }}</p>
</div>
</div>
@endif
@if (Session::has('danger'))
<div class="king-notice2 king-notice-danger notice-borders">
<i class="fa fa-exclamation-triangle"></i>
<div class="notice-text">
<p>{{ Session::get('danger') }}</p>
</div>
</div>
@endif新增與修改表的複用
判斷是否有ID屬性來指定路由
@if(isset($id))
<form method="POST" action="{{route('product.update',$id)}}" accept-charset="UTF-8">
<input type="hidden" name="_method" value="PUT">
@else
<form method="POST" action="{{route('product.store')}}" accept-charset="UTF-8">
@endif資料保持
通過 !empty(old('name')) 來確保是否存在舊資料，這裡 old() 函式是框架內用來返回舊資料的函式，原理是快閃記憶體的 Session，由於新增時還要判斷 isset() 不然會由於新增沒有傳參而報錯，這裡可以通過新增時後臺傳參解決，這裡選擇加一個判斷解決這個問題，如果覺得麻煩也可以採用其他辦法。
<div class="form-group">
<label for="inputCount3">產品名稱：</label>
<input type="text" class="form-control" name="pname"
value="{{ !empty(old('pname')) ? old('pname') : (isset($pname) ? $pname : '') }}"
placeholder="輸入產品姓名">
</div>嵌入選擇框
由於有些涉及關聯選擇的選項如果沒有去查詢其他的表而直接提供輸入框會造成誤輸入而且很麻煩，所以提供一個選擇框去選擇可以進行更加友好的互動，但是這對於前端知識薄弱的學生來說並不簡單，所以這裡使用一種考慮不周全的方法將選項動態渲染為靜態介面來實現。真時情況下應該提供帶搜尋的介面，前端動態訪問這些介面從後臺獲取搜尋結果資料再進行選擇，但是由於作業涉及資料不多就取巧了。
<div class="form-group">
<label for="inputPassword3">供應商：</label>
<p></p>
<div>
<div class="king-block-content clearfix">
<div class="plugin3_demo" id="supplier_selector" style="display:inline-block;">
<select class="select2_box" style="width:300px;" name="sid">
<option value=""></option>
@foreach($list as $item)
<option value="{{$item['id']}}"
{{(empty(old('sid')) ?
(isset($sid) ?
($sid == $item['id'] ? ' selected="selected' : '')
: '')
: (old('sid') == $item['id'] ? ' selected="selected' : ''))
}}>
{{$item['text']}}
</option>
@endforeach
</select>
</div>
</div>
</div>
</div>
<link href="https://magicbox.bk.tencent.com/static_api/v3/assets/select2-3.5.2/select2.css" rel="stylesheet">
<script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
<script src="https://magicbox.bk.tencent.com/static_api/v3/assets/select2-3.5.2/select2.js"></script>
<script type="text/javascript">
$("#supplier_selector .select2_box").select2({
placeholder: '請選擇供應商'
});
</script>使用模板複用
由於展示表基本一樣，所以通過資料控制就能很好地重用，這裡應該做分頁，但因為資料不多所以偷偷懶啦
@extends('layouts.base',['array' => ['menu_3' => '1']])
@section('content')
{{--<link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css" rel="stylesheet">--}}
{{--<link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css/bk.css" rel="stylesheet">--}}
<script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
<div class="king-layout2-main mt15" style="width:960px;">
<div class="king-instruction king-instruction-info ">
<h5>提示說明</h5>
這裡是資料表下的列表
<ol>
<li>點選新增可以新增記錄</li>
<li>點選編輯可以編輯相應選項</li>
<li>點選刪除可以刪除相應記錄</li>
</ol>
<b>注意：刪除僅在沒有級聯刪除條件下完成，刪除不成功請檢查相關表內容</b>
</div>
<p></p>
@include('layouts._message')
<p></p>
<div class="panel panel-default pannel-overflow panel-tables table7_demo">
<div class="panel-heading"> {{$title}}</div>
<div class="panel-body panel-search-body">
<a href="{{route('hw2')}}" class="king-btn king-radius king-default" title="新增變數">返回</a>
<a href="{{route($create)}}" class="king-btn king-radius king-primary" title="新增變數">新增資料</a>
</div>
<div class="panel-body">
<table class="table" id="table_demo2">
<thead>
<tr>
<th style="width: 7%">序號</th>
@foreach($columns as $column)
<th>{{$column}}</th>
@endforeach
<th>操作</th>
</tr>
</thead>
<tbody>
@foreach($data as $item)
<tr>
@foreach($item as $key => $value)
<td>{{$value}}</td>
@endforeach
<td>
<a href="{{route($edit, $item['id'])}}">
<button class="btn btn-xs btn-primary" title="編輯">
<i class="glyphicon glyphicon-edit"></i>
</button>
</a>
<a>
<button class="btn btn-xs btn-danger" title="刪除" onclick="delete_item('{{route($delete, $item['id'])}}')">
<i class="glyphicon glyphicon-remove" id="{{'button_'.$item['id']}}"></i>
</button>
</a>
</td>
</tr>
@endforeach
</tbody>
</table>
<!-- 設定皮膚End -->
</div>
</div>
<script type="text/javascript">
function delete_item(url) {
if (confirm('確定要刪除？')) {
$.post(url,{_method:'DELETE'}, function (result) {
$(document).find("html").html(result)
})
}
}
</script>
</div>
@stop
渲染時需要傳入對應的屬性，這裡使用一個刪除確認複用的方法，因為前端不太會出此下冊，希望更強的朋友能幫我做一些改進吧。
其他面頁參考github，接下來我們完成控制器