laravel中使用WangEditor及多圖上傳(下篇)

hosition 發(fā)布于2019-07-01 14:20 / 3223人閱讀

摘要：中使用及多圖上傳下篇快速生成前臺文章創(chuàng)建路由快速生成文章控制器修改文章控制器創(chuàng)建視圖文件列表頁文章列表頁文章列表什么都沒有詳情頁詳情頁圖

laravel中使用WangEditor及多圖上傳(下篇) 1. 快速生成前臺文章

1.1 創(chuàng)建路由

Route::resource("/article", "ArticleController");

1.2 快速生成文章控制器ArticleController

php artisan make:controller ArticleController

1.3 修改文章控制器app/Http/ArticleController.php


1.4 創(chuàng)建視圖文件
列表頁
resource/view/home/article/index.blade.php
extends("layouts.app")

@section("title", "文章列表頁")

@section("content")

    
        
            
                文章列表
            
            @forelse ($data as $list)
                
                    
                        {{ $list->title }}
                    
                    
                        
                    
                
            @empty
                什么都沒有 :(
            @endforelse

            {{ $data->links() }}
        
    

@endsection
詳情頁
resource/view/home/article/list.blade.php
@extends("layouts.app")

@section("title", "$data->title")

@section("content")

    
        
            
                詳情頁
            
            
                {!! $data->title !!}
                
                  
                  
                    
                    @for($i=1;$icover);$i++)
                    
                    @endfor
                  
                  
                  
                  
                    
                      
                      
                        ...
                      
                    
                    @for($i=1;$icover);$i++)
                    
                      
                      
                        ...
                      
                    
                    @endfor
                  
                  
                  
                  
                    
                    Previous
                  
                  
                    
                    Next
                  
                
                
                {!! $data->content !!}
                創(chuàng)建時(shí)間: {!! $data->created_at !!}
                更新時(shí)間: {!! $data->updated_at !!}
            
         
    

@endsection
這里我們用到了bootstrap的導(dǎo)航欄
在resource/layouts/app.php
引入bootstrap.css
    
    
    
    
效果圖

2. 美化圖片顯示，加入lightbox
2.1 加入lightbox.css以及lightbox.js
在頭部加入
    
    
    
    
    
加載js 注意lightbox.js依賴jquery.js
所以要先加載jquery
    
    
    
    
在視圖文件list.blade.php加入
加在{!! $data->content !!}上面
                @foreach($data->cover as $cover)
                
                @endforeach
最后效果圖

原文鏈接 https://www.bear777.com/blog/laravel-wangeditor-1
github地址 https://github.com/pandoraxm/laravel-admin-wangeditor