laravel中使用WangEditor及多图上传(下篇)

laravel中使用WangEditor及多图上传(下篇)

1. 快速生成前台文章

1.1 创建路由

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

1.2 快速生成文章控制器ArticleController

php artisan make:controller ArticleController

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

1.4 创建视图文件

列表页
resource/view/home/article/index.blade.php

extends('layouts.app')

@section('title', '文章列表页')

@section('content')
@forelse ($data as $list) @empty

什么都没有 :(

@endforelse {{ $data->links() }}
@endsection

详情页
resource/view/home/article/list.blade.php

@extends('layouts.app')

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

@section('content')
  • {!! $data->title !!}

  • {!! $data->content !!}
  • 创建时间: {!! $data->created_at !!}
  • 更新时间: {!! $data->updated_at !!}
  • @endsection

    这里我们用到了bootstrap的导航栏
    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

    你可能感兴趣的:(多图上传,lightbox,editor,php,laravel)