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

hosition 发布于2019-07-01 14:20 / 2664人阅读

摘要：中使用及多图上传下篇快速生成前台文章创建路由快速生成文章控制器修改文章控制器创建视图文件列表页文章列表页文章列表什么都没有详情页详情页图

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)
                
                    
                        {{ $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 !!}
                创建时间: {!! $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

服务器托管云服务器多图上传 uploadify多图上传 jquery多图上传 js多图上传

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/31981.html

laravel中使用WangEditor及多图上传

摘要：多图上传修改里面的方法将封面修改为封面创建图片修改器修改器使用说明，请阅读相关说明文档在里增加和两个方法显示效果原文地址地址 laravel中使用WangEditor及多图上传 1. 创建项目及安装所需安装包 1.1 创建项目 composer create-project laravel/laravel=5.3 blog_wangeditor --prefer-dist 1.2 创建...

FingerLiu 2019-07-01 14:20 评论0 收藏0
laravel中使用WangEditor及多图上传

摘要：多图上传修改里面的方法将封面修改为封面创建图片修改器修改器使用说明，请阅读相关说明文档在里增加和两个方法显示效果原文地址地址 laravel中使用WangEditor及多图上传 1. 创建项目及安装所需安装包 1.1 创建项目 composer create-project laravel/laravel=5.3 blog_wangeditor --prefer-dist 1.2 创建...

qianfeng 2019-08-22 13:49 评论0 收藏0
laravel5.3 vue 实现收藏夹功能

摘要：要定义这种关系，请打开模型并添加一个注意模型的命名空间是所以注意要头部引入第二个参数是数据透视表收藏夹的名称。这将允许插入或更新行时，数据透视表上的时间戳和列将受到影响。 laravel5.3 vue 实现收藏夹功能本篇是接着laravel中使用WangEditor及多图上传(下篇) 所以我们这里不演示怎么新建项目了。 1. laravel项目安装下载之前的项目，完成安装。...

adie 2019-08-22 13:54 评论0 收藏0
laravel5.3 vue 实现收藏夹功能

摘要：要定义这种关系，请打开模型并添加一个注意模型的命名空间是所以注意要头部引入第二个参数是数据透视表收藏夹的名称。这将允许插入或更新行时，数据透视表上的时间戳和列将受到影响。 laravel5.3 vue 实现收藏夹功能本篇是接着laravel中使用WangEditor及多图上传(下篇) 所以我们这里不演示怎么新建项目了。 1. laravel项目安装下载之前的项目，完成安装。...

mumumu 2019-06-28 18:19 评论0 收藏0
yamecent-admin 基于laravel框架的rbac后台管理系统

摘要：示例列表批量操作按钮批量删除全选复选框列表复选框示例部分截图作者年月日欢迎使用yamecent-admin后台管理环境要求依赖说明 PHP PHP7+ 项目简介 yamecent-admin是一款基于laravel框架进行封装的后台管理系统,其中包含： rbac权限管理模块完整的ui组件(外部引入) 图片上传,网络请求等常用的js公共函数持续维护中... ...

Elle 2019-07-01 10:53 评论0 收藏0