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

内容简介：laravel中使用WangEditor及多图上传(下篇)

1.1 创建路由

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

1.2 快速生成文章控制器 ArticleController

php artisan make:controller ArticleController

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

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Post;

class ArticleController extends Controller
{
    public function index()
    {
        $data = Post::paginate(5);
        return view('home.article.index', compact('data'));
    }

    public function show($id)
    {
        $data = Post::find($id);
        return view('home.article.list', compact('data'));
    }
}

1.4 创建视图文件

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

@extends('layouts.app')

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

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="page-header">
                <h3>文章列表</h3>
            </div>
            @forelse ($data as $list)
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <a href="/article/{{ $list->id }}">{{ $list->title }}</a>
                    </div>
                    <div class="panel-body" style="max-height:300px;overflow:hidden;">
                        <img src="/uploads/{!! ($list->cover)[0] !!}" style="max-width:100%;overflow:hidden;" alt="">
                    </div>
                </div>
            @empty
                <p>什么都没有 :(</p>
            @endforelse

            {{ $data->links() }}
        </div>
    </div>
</div>
@endsection

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

@extends('layouts.app')

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

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="page-header">
                <h3>详情页</h3>
            </div>
            <div>
                <li><h3>{!! $data->title !!}</h3></li>
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                  <!-- Indicators -->
                  <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    @for($i=1;$i<count($data->cover);$i++)
                    <li data-target="#carousel-example-generic" data-slide-to="{{ $i }}"></li>
                    @endfor
                  </ol>
                  
                  <!-- Wrapper for slides -->
                  <div class="carousel-inner" style="max-height:350px;overflow:hidden;">
                    <div class="item active">
                      <img src="/uploads/{{ $data->cover[0] }}" alt="图1">
                      <div class="carousel-caption">
                        ...
                      </div>
                    </div>
                    @for($i=1;$i<count($data->cover);$i++)
                    <div class="item">
                      <img src="/uploads/{{ $data->cover[$i] }}" alt="图{{ $i }}">
                      <div class="carousel-caption">
                        ...
                      </div>
                    </div>
                    @endfor
                  </div>
                  <hr>
                  <!-- Controls -->
                  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                  </a>
                  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                  </a>
                </div>
                
                <li>{!! $data->content !!}</li>
                <li><span>创建时间: </span>{!! $data->created_at !!}</li>
                <li><span>更新时间: </span>{!! $data->updated_at !!}</li>
            </div>
         </div>
    </div>
</div>
@endsection

这里我们用到了 bootstrap 的导航栏 在 resource/layouts/app.php 引入 bootstrap.css

<!-- Styles -->
    <link href="/css/app.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        li {
            list-style: none;
        }
    </style>

效果图

2. 美化图片显示，加入lightbox

2.1 加入 lightbox.css 以及 lightbox.js

在头部加入

<!-- Styles -->
    <link href="/css/app.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/lightbox2/2.10.0/css/lightbox.min.css">
    <style>
        li {
            list-style: none;
        }
    </style>

加载 js 注意 lightbox.js 依赖 jquery.js 所以要先加载 jquery

<!-- Scripts -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/lightbox2/2.10.0/js/lightbox.js"></script>
    <script src="/js/app.js"></script>

在视图文件 list.blade.php 加入

加在 <li>{!! $data->content !!}</li> 上面

@foreach($data->cover as $cover)
                <span><a href="/uploads/{!! $cover !!}" data-lightbox="roadtrip" data-title="{!! $data->title !!}"><img src="/uploads/{!! $cover !!}" style="max-width:25%;" alt=""></a></span>
                @endforeach

最后效果图

原文链接 www.bear777.com/blog/larave…

github地址 github.com/pandoraxm/l…

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

• 威胁情报相关标准简介 (下篇)
• 【前端面试分享】- 寒冬求职下篇
• 【MyBatis源码分析】Configuration加载（下篇）
• 【MyBatis源码分析】Configuration加载（下篇）
• Golang经典笔试题及答案（下篇）
• 系统架构系列（四）：业务架构实战下篇

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。