如果你聽說過laravel並且使用過laravel,那么對於laravel-admin這款為它量身定做的后台框架一定不會陌生。強大的功能,高效,便捷的操作絕對是建站量產的佳選。但是也由於它整合了特別多的插件工具,似乎並不能被新手很好地拓展使用。在實際使用中,我們肯定會用到增刪改查之外的功能,比如說自定義刪除關聯性不太強的其它數據;比如說在視圖中添加工具按鈕,實現跳轉功能;比如隱藏某些本身未設置自定義的按鈕;再比如更加靈活的實現聯動。除了這些還有很多很多,如果要去拓展這些功能。我們就要了解它的邏輯走向,一層一層尋找控制方法,很傷腦筋。本人近一個月都在用這個框架做項目,一開始確實被它的便捷性折服。但隨着領導和客戶需求的升級,發現要實現某種功能效果變得越來越吃力。經過重重險阻才取得真經。今天我就把在項目中遇到的一些問題和自定義的功能分享給大家。
安裝laravel的步驟就不細說了,自行百度吧。本人在這里只提供兩個地址,A、
http://z-song.github.io/laravel-admin/#/zh/installation,開發文檔,里面已經詳細記錄了安裝步驟和使用方法。B、https://github.com/z-song/laravel-admin laravel-admin的github庫地址。有了這兩個地址,安裝和基本使用就不成問題了。接下來咱們就要面對第一個問題,如何訪問。
假設用wamp搭建環境,站點目錄是laravel2,那么我們想當然的會這樣去訪問http://localhost/laravel2/public/admin/,結果也會如期所至
但是當我們用輸入用戶名,密碼之后,就不會盡如心意了
解決方案其實很簡單,只要配置一個重寫向就可以了。(具體細節自行百度),現在重新訪問登錄就OK了。
進入后台框架,咱們就要解決問題了。第一點問題說一說上傳圖片的問題。像文檔里所說的配置路徑在這里就不講了。我主要講真正遇到的bug,比如上傳圖片時這一個報錯
一, NotSupportedException in AbstractEncoder.php line 151: Encodingformat (tmp) is not supported.
造成這個bug的原因是上傳的過程中,系統識別到的圖片拓展名為tmp,所以找不到合適的方法來存儲圖片就報錯了。但是據說這種現象只在windows系統中出現,linux中就不存在。這個解答也是我在國外論壇中臆測的,雖然也提供了相應的方案,只是我認為保證本地測試正常就可以了沒必要上綱上線,就找到一個很投機的方法,就是把tmp也歸入到jpg或者bmp的圖片處理方法中就可避免報錯。具體做法是更改vendor\intervention\image\src\Intervention\Image\AbstractEncoder.php這個文件,找到
case 'jpg':
case 'jpeg':
case 'image/jpg':
case 'image/jpeg':
case 'image/pjpeg':
緊接着添加一行case 'tmp':就可以了。只是這樣處理的后果是本地環境上傳的圖片都是一種拓展名格式了。介意的話再行研究。
解決完了這個bug,咱們就要開辟新大陸了。
看到這個table有沒有覺得很別扭,本來最左邊正常顯示序號的地方卻顯示了數據表的id字段,不僅體驗感差也很不安全。但是搞不懂這 個框架為什么不提供默認序號顯示。沒辦法我們只好自己動手了。
二, 給表單視圖加上排列序號。
因為加序號的邏輯很簡單,所以我們主要是從視圖着手。但是考慮到要在控制里靈活自定義序號是否顯示,就需要在核心層里作一些改動。首先進入vendor\encore\laravel-admin\src\Grid.php,在類里面定義一個公共屬性,並賦值字符串none,public $shownum = 'none';然后再加入兩個方法,一個作為控制器賦值,一個作為視圖判斷。
public function shownum()
{
return $this->shownum;
}
public function shownum_able()
{
$this->shownum= 'block';
}
接下來就是主角登場,在后台視圖層vendor\encore\laravel-admin\views\grid\table.blade.php(默認路徑)里加入顯示序號。
<table class="tabletable-hover">
<tr>
@foreach($grid->columns() as$key=>$column)
<?php
if($key==1)
{
echo '<th>序號</th>';
}
?>
<th>{{$column->getLabel()}}{!! $column->sorter()!!}</th>
@endforeach
</tr>
<?php
$per = $grid->perPage;
$now =@$_GET['page']?$_GET['page']:1;
$i= $per*$now-$per;
?>
@foreach($grid->rows() as $key=>$row)
<?php
$i++;
?>
<tr {!! $row->getHtmlAttributes() !!}>
@foreach($grid->columnNamesas $key=>$name)
<?php
if($key==1)
{
echo '<td>'.$i.'</td>';
}
?>
<td>{!!$row->column($name) !!}</td>
@endforeach
</tr>
@endforeach
</table>
完成這兩步后,只要在相應控制器里的grid方法里加入$grid->shownum_able();就可完美顯示序號列了。
完成了序號顯示,再進入跳轉按鈕的操作。例如禁顯編輯,刪除,新增,導出等操作文檔都有講解。但是如要要實現出現下圖的效果就要自已動手了。
三, 右上角添加跳轉指定頁面按鈕
為了實現自定義設置,仍然要在vendor\encore\laravel-admin\src\Grid.php頁面添加一個屬性protected $preg_url =['url'=>'','title'=>'','flag'=>false];然后再添加一個控制器可以傳參的方法和一個視圖層獲取內容的方法
/**
*設置跳轉地址及標題*
*@param $url 跳轉地址
*@param $title 標題
*/
public function define_preg($url,$title)
{
$this->preg_url['url'] = $url;
$this->preg_url['title'] = $title;
$this->preg_url['flag'] = true;
}
/**
*顯示跳轉按鈕的html *
*/
public function show_define_preg()
{
$title = $this->preg_url['title'];
$url =$this->preg_url['url'];
if($this->preg_url['flag']){
return "<div class=\"btn-group pull-right\"style=\"margin-right: 10px\">
<a class=\"btn btn-smbtn-default form-history-back\" href=\"{$url}\"><iclass=\"fa fa-arrow-left\"></i> {$title}</a>
</div>";
}
}
再一步就是在視圖層調用了,在{!! $grid->renderHeaderTools() !!}之后加入
{!!$grid->show_define_preg() !!}就ok了,
最后一步就是在相應的控制器里加入一行傳參代碼
$grid->define_preg(url('admin/menu'), '返回菜單');
再下一個拓展就會更加實際了,在視圖層的table里經常有縮略圖出現,如果想要看清這些縮略圖要么需要打開編輯狀態,要么進入這個圖片的地址。體驗效果都會很差。這個時候我們就需要一個類似放大器的工具,點擊圖片顯示大圖並且可直接關閉放大視圖。
四, 單擊列表圖片實現放大效果
為了實現單個頁面自定義效果,同樣要在vendor\encore\laravel-admin\src\Grid.php頁面添加一個公共屬性,不過這一次我們可給他默認為真,表示默認有放大圖片效果,public $show_imgzoom= 1;另外再給他一個可以禁用放大效果的方法
public function imgzoom_disable()
{
$this->show_imgzoom = 0;
}
最后一步就是在視圖層添加效果了,本人熱衷原生所以用Jquery寫的放大效果,並支持上翻下翻。找到views\admin\form.blade.php,並在最開頭添加如下代碼
<?php
if($grid->show_imgzoom>0){
?>
<scripttype="text/javascript">
$(function() {
$('.tableimg').click(function(){
$('.turn_right_1').hide();
$('.turn_left_1').hide();
$('.turn_left').show();
$('.turn_right').show();
varsrc = $(this).attr('src');
vari = $('.table img').index(this);
varlen = $('.table img').length;
if(i<=0){
$('.turn_left').hide();
//$('.turn_left_1').show();
}
if(i>=(len-1)){
$('.turn_right').hide();
//$('.turn_right_1').show();
};
$('#imgbox-img').attr('src',src);
$('#imgbox-img').attr('show_flag',i);
$('#imgbox-wrap-6').show();
});
$(".turn_right,.turn_left").mouseover(function(){
$(this).css('color','#C0C0C0');
});
$(".turn_right,.turn_left").mouseout(function(){
$(this).css('color','#777777');
});
});
functionimg_box_hidden(){
$('#imgbox-wrap-6').hide();
}
functionimg_box_preg(op){
$('.turn_right_1').hide();
$('.turn_left_1').hide();
$('.turn_left').show();
$('.turn_right').show();
vari = $('#imgbox-img').attr('show_flag');
if(op>0){
varj = parseInt(i)+1;
}else{
varj = parseInt(i)-1;
}
varlen = $('.table img').length;
if(j<0){
j=0;
$('.turn_left').hide();
$('.turn_left_1').show();
}
if(j>=len){
j=len;
$('.turn_right').hide();
$('.turn_right_1').show();
};
varsrc = $('.table img').eq(j).attr('src');
$('#imgbox-img').attr('src',src);
$('#imgbox-img').attr('show_flag',j);
}
<?php
}
?>
</script>
<div id="imgbox-wrap-6"class="imgbox-wrap" ><i></i><imgclass="imgbox-img" id="imgbox-img" src=""alt="" ><a class="glyphiconglyphicon-remove" onclick=img_box_hidden()></a><aclass="turn_left glyphicon glyphicon-chevron-left" onclick=img_box_preg(0)></a><aclass="turn_right glyphicon glyphicon-chevron-right" onclick=img_box_preg(1)></a><aclass="turn_right_1" >到底了</a><a class="turn_left_1" >到頭了</a>
</div>
最終效果如圖
如果不想在某頁面使用放大效果可以在grid方法里添加$grid->imgzoom_disable()來禁用。如果想調整顯示背景色或效果也可在上述視圖層代碼中修改。
說到圖片顯示了,再說一說多圖片上傳的問題。如果用最新的laravel5.4版本下載最新的admin程序,可以使用image()->multiple()實現多圖上傳,但是會造成不能單個刪除,且重新上傳全覆蓋的現象。而使用文檔中所說的mltipleImage()方法卻不顯示圖片。究竟怎么解決呢。
五, 多圖片上傳,單圖異步刪除
看似復雜,實則簡單。造成這種現象的原因按本人觀點是由於新版本未開發完全,有些功能還沒有完全具備,可以通過升級來修復,但是恐怕短期還是會有些小bug。所以更建議使用上一代或上上一代已經非常穩定的版本來安裝。比如laravel5.3。選擇多圖后如下圖
,這個時候問題又來了,點擊提交之后沒有任何報錯,卻不跳轉。於是通過火狐瀏覽器的firbug工具查找原因,發現以下線索
,也就是說實際上表單提交了,但是由於什么原因又返回了編輯頁面。關於問題原因和解決方法就等到明天再寫了。