简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >laravel实战-通用后台管理系统-基础设置/文章分类/文章分页列表/图片上传和嵌入富文本编辑器

laravel实战-通用后台管理系统-基础设置/文章分类/文章分页列表/图片上传和嵌入富文本编辑器

岂几岂几
岂几岂几原创
2020年06月27日 00:25:371099浏览

laravel实战-通用后台管理系统-基础设置/文章分类/文章分页列表/图片上传和嵌入富文本编辑器

学习心得

  • laravel的分页查询功能, 搭配layui的分页组件, 可以简便的实现分页功能.

  • laravel的文件上传, 文件存放的根目录在/storage/app/public中, 而laravel对外开放的目录是/public, 要把已上传的文件暴露给前端, 需要在/public创建一个指向/storage/app/public目录的短连接.

  • 页面中嵌入富文本编辑器, 跟其他前端组件一样, 先引入必要的js, css文件, 再通过js创建相关组件对象, 然后传入字面量对象进行初始化.

1. 基础设置/文章分类

  • 这两个功能实现没有新的知识点, 仿管理员管理实现即可.

2. 文章分页列表

  • 使用laravel提供的分页查询功能获取分页数据

    • 使用 DB::pagenate(每页显示记录数, 查询字段, "当前页"参数名, 当前页码) 查询分页数据.

      • 该方法会自己从 $request 对象中获取当前页码, 获取当前页码的参数名由第三个参数指定.
      • 也可以自己指定要查询的页码, 直接通过第四个参数指定页码即可.
      • DB::pagenate() 方法返回的是对象数组, 一条记录是一个对象.

    • 使用laravel提供的”宏扩展”功能扩展数据库访问类方法, 添加返回二维数组格式的结果集方法 pages() . “宏扩展”介绍点这里.

  1. /**
  2.   * 扩展laravel的DB类，把查询分页的结果由对象数组改为二维数组
  3.   * $perPage: 每页行数
  4.   * $columns: 查询的列
  5.   * $pageName: 请求参数中指定当前页的参数名
  6.   * $page: 当前页
  7.   */
  8. QueryBuilder::macro('pages', function($perPage = 15, $columns = ['*'], $pageName = 'page', $page = null) {
  9.     /* 查询分页对象 */
  10.     $paginateObj = $this->paginate($perPage, $columns, $pageName, $page);
  11.     /* 查询结果对象数组 */
  12.     $items = $paginateObj->items();
  13.     $rtn = [];
  14.     // 遍历对象数组，把对象强转成数组，后作为$rtn的元素
  15.     foreach($items as $item) {
  16.         $rtn[] = (array) $item;
  17.     }
  19.     return ['page_data' => $rtn, 'total' => $paginateObj->total()];
  20. });

  • layui提供的分页组件 laypage 渲染分页条.

    • 在布局中给要布局分页条的地方添加一个容器, 并给个id值: <div id="paginate"></div>

    • 在 layui.use() 方法的参数回调中, 渲染分页条.

  1. <script>
  2.     layui.use(['layer', 'laypage'], function() {
  3.         layer = layui.layer;
  4.         laypage = layui.laypage;
  6.         laypage.render({
  7.             elem: 'paginate', // 注意，这里的 test1 是 ID，不用加 # 号
  8.             count: {
  9.                 {
  10.                     $total
  11.                 }
  12.             }, // 查询到的记录总数，从数据库中获取
  13.             limit: {
  14.                 {
  15.                     $limit
  16.                 }
  17.             }, // 每页容纳的记录数
  18.             curr: {
  19.                 {
  20.                     $currPage
  21.                 }
  22.             }, // 当前页
  23.             layout: ['prev', 'page', 'next', 'count', 'limit', 'refresh', 'skip'], // 要显示的分页条各部分, 分别是: ['上一页', '页码表', '下一页', '总页数', '每页显示记录数下拉列表', '刷新当前页', '页定位表单'], 可根据需要增删数组成员.
  24.             limits: [1, 5, 10, 15, 20], // 每页显示记录数下拉列表项
  25.             jump: function(obj, first) { // 获取指定页码数据的回调
  26.                 //obj包含了当前分页的所有参数，比如：
  27.                 console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
  28.                 console.log(obj.limit); //得到每页显示的条数
  29.                 console.log(obj);
  31.                 //首次不执行
  32.                 if (!first) {
  33.                     window.location.href = "?limit=" + obj.limit + "&page=" + obj.curr;
  34.                 }
  35.             }
  36.         });
  37.     });
  38. </script>

2. 文章配图上传

  • 使用layui提供的上传组件 upload 处理前端显示和数据提交.

    • 在页面布局中加入一个button, 给button设置id值
  1. <div class="layui-form-item">
  2.     <label for="thumb" class="layui-form-label">缩略图</label>
  3.     <div class="layui-input-block">
  4.         /* 上传按钮 */
  5.         <button type="button" class="layui-btn" id="btn_upload">
  6.             <i class="layui-icon">&#xe67c;</i>上传图片
  7.         </button>
  8.         /* 上传成功后显示上传图片的缩略图 */
  9.         <img id="preview_img" src="" alt="" style="height: 36px;" onclick="big_img(this)">/* 点击显示大图 */
  10.     </div>
  11. </div>
  • 在 layui.use() 方法的参数回调中, 渲染文件上传组件.
  1. <script>
  2. layui.use(['form', 'layer', 'upload'], function() {
  3.     layer = layui.layer;
  4.     form = layui.form;
  5.     upload = layui.upload;
  6.     $ = layui.jquery;
  8.     // 执行实例
  9.     var uploadInst = upload.render({
  10.         elem: '#btn_upload', // 绑定元素
  11.         url: '/admin/upload/pic_upload', // 上传接口
  12.         data: {
  13.             _token: $('input[name="_token"]').val()
  14.         }, // 额外需要上传的参数
  15.         done: function(res) {
  16.             // 上传完毕回调
  17.             $('#preview_img').attr('src', res.data.src);
  18.             // 点击缩略图看大图中的大图
  19.             $('#tong > img').attr('src', res.data.src);
  20.         },
  21.         error: function() {
  22.             // 请求异常回调
  23.         }
  24.     });
  25. }
  26. </script>

  • 后端使用laravel提供的 $request 对象处理上传.

    • 通过chrome的开发者工具中查看layui的 upload 插件提交的数据, 存放文件的参数名叫 file .

    • 在控制器方法中, 执行 $path = $request->file('file')->store(相对/storage/app/路径的子目录); 语句就能完成PHP原生上传的N大步骤. file() 方法的参数, 就是上面提到的参数名 file .

  1. public function picUpload(Request $request) {
  2.     // file(请求中的文件参数名), store(文件存放子路径). 文件存放目录: ../storage/app/[store指定的子目录], 
  3.     // 为能使用软连接访问上传的图片, 强烈建议子目录以public目录开始. 建议在public中分目录, 以年份, 或者年份月份, 
  4.     // 或者年月日为public子目录来存放文件, 这样更方便查找. 也可以分得更细, 如: 精确到小时, 分钟等.
  5.     /* 此时返回的是.../public/avatars/2020/06/18/xxxxxx.png, 实际并不能以该路径来访问 */
  6.     $path = $request->file('file')->store('public/avatars/' . date('Y/m/d'));
  7.     // 获取前端能访问到的真实的url地址
  8.     $url = Storage::url($path);
  10.     // layui的上传组件要求返回的json数据的格式
  11.     $res = ['code' => 0, 'msg' => '', 'data' => ['src' => $url]];
  12.     return json_encode($res);
  13. }

  • 在 /public 目录中生成指向``目录的快捷方式/软连接.

    • laravel文件上传的存放根目录是: /storage/app/public , 而lavaral项目的实际执行根目录是 /public 目录, 所以要从网络上访问上传的文件, 需要在 /public 目录中创建一个指向 /storage/app/public 子目录的”快捷方式”, 即, 软连接.

    • 生成软连接的方法: 在laravel项目根目录(artisan文件所在目录), 执行 php artisan storage:link 命令, 该命令会在 /public/ 目录生成一个名叫 storage , 指向 /storage/app/public 目录的快捷方式/软连接.

  • 使用 Storage::url() 方法, 传入上传文件时返回的 $path 路径, 生成可访问上传文件的真是url地址.

  • 自己加料: 点击上传成功的缩略图, 显示大图

    • 给显示缩略图的 <img> 元素加上点击事件的处理方法: <img id="preview_img" src="" alt="" style="height: 36px;" onclick="big_img(this)">/* 点击显示大图 */

    • 在页面布局中放入一个显示大图用的 <img> 元素, 默认不显示

  1. <div id="tong" class="hide">
  2.     <img src="" style="max-width: 100%; max-height: 100%">
  3. </div>
  • 点击缩略图显示大图的js处理脚本(弹出显示大图, 使用 layui.open() 方法, type属性值为1, 就表示弹出显示的元素是HTML元素容器)
  1. function big_img(img) {
  2.     // 缩略图的src属性没有值时, 不处理
  3.     if (img.src == undefined || img.src == "") {
  4.         return;
  5.     }
  7.     //页面层-图片
  8.     layer.open({
  9.         type: 1,
  10.         title: false,
  11.         closeBtn: 0,
  12.         area: ['auto'],
  13.         skin: 'layui-layer-nobg', //没有背景色
  14.         shadeClose: true,
  15.         content: $('#tong')
  16.     });
  17. }

3. 嵌入富文本编辑器

  • 百度的 Ueditor 是比较流行的富文本编辑器. 官网地址点这里. 在官网下载合适的 Ueditor 文件包.

  • 下载下来的 Ueditor 文件包, 放到 /public 目录中, 一般来说, 放在 /public/static/plugin/ 下较好.

  • 前端页面加载 Ueditor :

  1. <!-- ueditor-start -->
  2. <!-- 配置文件 -->
  3. <script type="text/javascript" src="/static/plugin/ueditor/ueditor.config.js"></script>
  4. <!-- 编辑器源码文件 -->
  5. <script type="text/javascript" src="/static/plugin/ueditor/ueditor.all.js"></script>
  6. <!-- ueditor-end -->
  • 在需要嵌入 Ueditor 的地方, 放一个加载编辑器的容器: 
  1. <!-- 实际生成的是div. 给div添加contenteditable="true", 这个div就能编辑 -->
  2. <script id="container" name="content" type="text/plain">这里写你的初始化内容</script>
  • js代码实例化编辑器
  1. // 实例化编辑器
  2. // 第一个参数是容器的id值
  3. /* 第二个参数是配置属性对象 */
  4. /* 不要写var, 把ue声明为全局变量, 因为其他地方也用到ue对象 */
  5. /* var */
  6. ue = UE.getEditor('container', {
  7.     initialFrameWidth: '100%', //初始化编辑器宽度,默认1000
  8.     initialFrameHeight: '500' //初始化编辑器高度,默认320
  9. });

  • 经过上面几步骤, 就可以把 Ueditor 嵌入到网页中了.

  • js获取 Ueditor 中的内容, 使用 ue.getContent() 方法. 而设置 Ueditor 中的内容, 一般来说, 都是使用HTML标签和css来设置格式的, 所以用 {!!$content!!} 往 Ueditor 中设置内容.

4. 代码清单

4.1 基础设置

  • 1-基础设置视图
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>站点设置</title>
  7.     <link rel="stylesheet" href="/static/plugin/layui/css/layui.css">
  8.     <script src="/static/plugin/layui/layui.js"></script>
  9.     <style>
  10.         body {
  11.             padding: 10px;
  12.         }
  14.         /* grid实现label固定宽度, 输入框充满剩下的宽度 */
  15.         .site-name {
  16.             display: grid;
  17.             grid-template-columns: 110px auto;
  18.         }
  20.         .site-name > .layui-input-inline {
  21.             margin: 0;
  22.             width: 100%;
  23.             /* box-sizing: border-box;
  24.             padding-right: 10px; */
  25.         }
  27.         .site-name > .layui-input-inline > input{
  28.             margin-right: 10px;
  29.         }
  31.         /* 用定位方式实现label固定宽度, 输入框充满剩下的宽度 */
  32.         .site-keywords {
  33.             position: relative;
  34.         }
  36.         .site-keywords > label {
  37.             width: 110px;
  38.             box-sizing: border-box;
  39.         }
  41.         .site-keywords > .layui-input-inline {
  42.             position: absolute;
  43.             width: unset;
  44.             left: 110px;
  45.             right: 0;
  46.             margin: 0;
  47.         }
  49.         /* .site-keywords > .layui-input-inline input {
  50.             width: 100%;
  51.         } */
  53.         /* 用flex布局实现 */
  54.         .site-desc {
  55.             display: flex;
  56.             flex-flow: row nowrap;
  57.         }
  59.         .site-desc > .layui-form-label {
  60.             width: 124px;
  61.             box-sizing: border-box;
  62.         }
  64.         .site-desc > .layui-input-inline {
  65.             width: 100%;
  66.             margin: 0;
  67.         }
  69.         .site-desc > .layui-input-inline >textarea {
  70.             box-sizing: border-box;
  71.             /* border: 0; */
  72.             margin: 0;
  73.         }
  74.     </style>
  75. </head>
  76. <body>
  77.     <div class="layui-row">
  78.         <div class="layui-col-lg6 layui-col-md8 layui-col-sm10 layui-col-xs12">
  79.             <div class="layui-form site-form">
  80.             @csrf
  81.             <div class="layui-form-item site-name">
  82.                 <label for="title" class="layui-form-label">站点名称</label>
  83.                 <div class="layui-input-inline">
  84.                     <input type="text" name="title" id="title" class="layui-input" value="{{$site['title']}}">
  85.                 </div>
  86.             </div>
  87.             <div class="layui-form-item site-keywords">
  88.                 <label for="keywords" class="layui-form-label">关键字</label>
  89.                 <div class="layui-input-inline">
  90.                     <input type="text" name="keywords" id="keywords" class="layui-input" value="{{$site['keywords']}}">
  91.                 </div>
  92.             </div>
  93.             <div class="layui-form-item site-desc">
  94.                 <label for="descs" class="layui-form-label">描述</label>
  95.                 <div class="layui-input-inline">
  96.                     <textarea name="descs" id="descs" placeholder="请输入内容" class="layui-textarea">{{$site['descs']}}</textarea>
  97.                 </div>
  98.             </div>
  99.             <div class="layui-form-item">
  100.                 <label for="status" class="layui-form-label">站点状态</label>
  101.                 <div class="layui-input-inline">
  102.                     <input type="checkbox" name="status" id="status" lay-skin="switch" lay-text="启用|停用" {{$site['status'] ? '' : 'checked'}}>
  103.                 </div>
  104.             </div>
  105.             <div class="layui-form-item">
  106.                 <div class="layui-input-block">
  107.                     <button:button class="layui-btn layui-btn-success" onclick="save()">保存</button:button>
  108.                 </div>
  109.             </div>
  110.         </div>
  111.         </div>
  112.     </div>
  114. </body>
  115. <script>
  116.     layui.use(['form', 'layer'], function() {
  117.         var form = layui.form;
  118.         var layer = layui.layer;
  119.         $ = layui.jquery;
  120.     });
  122.     function save() {
  123.         var data = {
  124.             _token : $('input[name="_token"]').val(),
  125.             title : $.trim($('#title').val()),
  126.             keywords : $.trim($('#keywords').val()),
  127.             descs : $.trim($('#descs').val()),
  128.             status : Boolean($('#status').prop('checked')) ? 0 : 1
  129.         };
  131.         var checkRes = checkData(data);
  132.         if(checkRes.status == 1) {
  133.             return layer.alert(checkRes.message);
  134.         }
  136.         $.post(
  137.             '/admin/setting/save',
  138.             data,
  139.             function(res) {
  140.                 if(res.status != undefined && res.status == '0') {
  141.                     return layer.msg(res.message, {icon: 1});
  142.                 } else if(res.status != undefined) {
  143.                     return layer.alert(res.message, {icon: 2});
  144.                 } else {
  145.                     return layer.alert('保存失败');
  146.                 }
  147.             },
  148.             'json'
  149.         );
  150.     }
  152.     function checkData(data) {
  153.         $res = {
  154.             status: 1
  155.         };
  156.         if(data.title == undefined || data.title == "") {
  157.             $res.message = "站点名称不能为空";
  158.             return $res;
  159.         }
  160.         if(data.keywords == undefined || data.keywords == "") {
  161.             $res.message = "关键字不能为空";
  162.             return $res;
  163.         }
  164.         if(data.descs == undefined || data.descs == "") {
  165.             $res.message = "站点描述不能为空";
  166.             return $res;
  167.         }
  169.         if($res.message == undefined) {
  170.             $res.status = 0;
  171.         }
  173.         return $res;
  174.     }
  175. </script>
  176. </html>
  • 2- 基础设置控制器
  1. <?php
  2. namespace App\Http\Controllers\admins;
  4. use App\Http\Controllers\Controller;
  5. use Illuminate\Support\Facades\DB;
  6. use Illuminate\Http\Request;
  8. class Setting extends Controller {
  9.     public function index() {
  10.         $res = DB::table('setting')->where('names', 'site')->getFirst();
  11.         if($res) {
  12.             $data['site'] = json_decode($res['vals'], true);
  13.         } else {
  14.             $data['site'] = ['title' => '', 'keywords' => '', 'descs' => '', 'status' => 1];
  15.         }
  17.         return view('admins/setting/index', $data);
  18.     }
  20.     public function save(Request $req) {
  21.         $data = $req->all();
  22.         unset($data['_token']);
  23.         $data['status'] = (int) $data['status'];
  25.         $checkRes = $this->checkData($data);
  26.         if($checkRes['status'] > 0) {
  27.             return json_encode($checkRes);
  28.         }
  29.         $site['vals'] = json_encode($data);
  31.         $siteSetting = DB::table('setting')->where('names', 'site')->getFirst();
  32.         if($siteSetting) {
  33.             $res = DB::table('setting')->where('names', 'site')->update($site);
  34.         } else {
  35.             $site['names'] = 'site';
  36.             $res = DB::table('setting')->insert($site);
  37.         }
  39.         if($res) {
  40.             return json_encode(['status' => 0, 'message' => '保存成功']);
  41.         } else {
  42.             return json_encode(['status' => 1, 'message' => '保存失败']);
  43.         }
  44.     }
  46.     protected function checkData($data) {
  47.         $res['status'] = 1;
  48.         if($data['title'] == null || $data['title'] == '') {
  49.             $res['message'] = '站点名称不能为空';
  50.             return $res;
  51.         }
  52.         if($data['keywords'] == null || $data['keywords'] == '') {
  53.             $res['message'] = '关键字不能为空';
  54.             return $res;
  55.         }
  56.         if($data['descs'] == null || $data['keywords'] == '') {
  57.             $res['message'] = '站点描述不能为空';
  58.             return $res;
  59.         }
  61.         return ['status' => 0];
  62.     }
  63. }

4.2 文章分类代码

  • 1-文章分类视图

    • 文章分类列表视图
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>文章分类列表</title>
  7.     <link rel="stylesheet" href="/static/plugin/layui/css/layui.css">
  8.     <script src="/static/plugin/layui/layui.js"></script>
  9.     <style>
  10.         body {
  11.             padding: 10px;
  12.         }
  14.         .opera-area {
  15.             text-align: right;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <div class="opera-area">
  21.         <span class="layui-btn layui-btn-success">添加</span>
  22.     </div>
  23.     <table class="layui-table">
  24.         <thead>
  25.             <tr>
  26.                 <td>ID</td>
  27.                 <td>分类名称</td>
  28.                 <td>操作</td>
  29.             </tr>
  30.         </thead>
  31.         <tbody>
  32.             @if(!empty($cates))
  33.             @foreach($cates as $cate)
  34.             <tr>
  35.                 <td>{{$cate['id']}}</td>
  36.                 <td>{{$cate['title']}}</td>
  37.                 <td style="width: 150px;">
  38.                     <span class="layui-btn layui-btn-warm layui-btn-xs">修改</span>
  39.                 </td>
  40.             </tr>
  41.             @endforeach
  42.             @else
  43.             <tr>
  44.                 <td colspan="3">啥也没查到....</td>
  45.             </tr>
  46.             @endif
  47.         </tbody>
  48.     </table>
  49. </body>
  50. <script>
  51.     layui.use(['layer'], function() {
  52.         layer = layui.layer;
  53.         $ = layui.jquery;
  55.         $(".opera-area span").on('click', add)
  56.     });
  58.     function add(e) {
  59.         layer.open({
  60.             type: 2,
  61.             title: '添加文章分类',
  62.             shadeClose: false,
  63.             shade: 0.8,
  64.             area: ['400px', '200px'],
  65.             content: '/admin/article/add_cate'
  66.         });
  67.     }
  68. </script>
  69. </html>
  • 添加文章分类视图
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>添加分类</title>
  7.     <link rel="stylesheet" href="/static/plugin/layui/css/layui.css">
  8.     <script src="/static/plugin/layui/layui.js"></script>
  9.     <style>
  10.         body {
  11.             padding: 10px;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div class="layui-form">
  17.         @csrf
  18.         <div class="layui-form-item">
  19.             <label for="title" class="layui-form-label">分类名称</label>
  20.             <div class="layui-input-inline">
  21.                 <input type="text" name="title" id="title" class="layui-input" placeholder="请输入分类名称">
  22.             </div>
  23.         </div>
  24.         <div class="layui-form-item">
  25.             <div class="layui-input-block">
  26.                 <span class="layui-btn layui-btn-success" onclick="save()">保存</span>
  27.             </div>
  28.         </div>
  29.     </div>
  30. </body>
  31. <script>
  32.     layui.use(['layer'], function() {
  33.         layer = layui.layer;
  34.         $ = layui.jquery;
  35.     });
  37.     function save() {
  38.         var title = $.trim($('#title').val());
  39.         if(title == undefined || title == '') {
  40.             return layer.alert('分类名称不能为空', {icon: 2});
  41.         }
  43.         $.post(
  44.             '/admin/article/save_cate',
  45.             {
  46.                 _token: $('input[name="_token"]').val(),
  47.                 title: title
  48.             },
  49.             function(res) {
  50.                 if(res.status != undefined && res.status == "0") {
  51.                     layer.msg(res.message, {icon: 1});
  52.                     setTimeout(() => {
  53.                         parent.window.location.reload();
  54.                     }, 1000); 
  55.                 } else if(res.status != undefined) {
  56.                     layer.alert(res.message, {icon: 2});
  57.                 } else {
  58.                     layer.alert('操作失败', {icon: 2});
  59.                 }
  60.             },
  61.             'json'
  62.         );
  63.     }
  64. </script>
  65. </html>
  • 2- 文章分类控制器跟文章控制器共用, 见4.3

4.3 文章管理代码

  • 文章管理视图

    • 1- 文章列表视图
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>文章列表</title>
  7.     <link rel="stylesheet" href="/static/plugin/layui/css/layui.css">
  8.     <script src="/static/plugin/layui/layui.js"></script>
  9. </head>
  10. <body style="padding: 10px;">
  11.     <div style="text-align: center; color: #666;">
  12.         <h2>管理员列表</h2>
  13.     </div>
  14.     <div style="text-align: right;">
  15.         <span class="layui-btn layui-btn-success" onclick="add()">新增</span>
  16.     </div>
  17.     <table class="layui-table">
  18.         <thead>
  19.             <tr>
  20.                 <td>ID</td>
  21.                 <td>文章分类</td>
  22.                 <td>缩略图</td>
  23.                 <td>文章标题</td>
  24.                 <td>文章作者</td>
  25.                 <td>浏览量</td>
  26.                 <td>添加时间</td>
  27.                 <td>状态</td>
  28.                 <td>操作</td>
  29.             </tr>
  30.         </thead>
  31.         <tbody>
  32.             @if(!empty($articles))
  33.             @foreach($articles as $article)
  34.             <tr>
  35.                 <td>{{$article['id']}}</td>
  36.                 <td>{{$cates[$article['cid']]}}</td>
  37.                 <td><img src="{{$article['thumb']}}"></td>
  38.                 <td>{{$article['title']}}</td>
  39.                 <td>{{$user[$article['auth_id']]}}</td>
  40.                 <td>{{$article['pv']}}</td>
  41.                 <td>{{date('Y-m-d H:i:s', $article['add_time'])}}</td>
  42.                 <td>{{$article['status'] ? '已发布' : '草稿'}}</td>
  43.                 <td>
  44.                     <span class="layui-btn layui-btn-warm layui-btn-xs" onclick="edit({{$article['id']}})">修改</span>
  45.                     <span class="layui-btn layui-btn-danger layui-btn-xs">删除</span>
  46.                 </td>
  47.             </tr>
  48.             @endforeach
  49.             @endif
  50.         </tbody>
  51.     </table>
  53.     <div id="paginate"></div>
  54. </body>
  55. <script>
  56.     layui.use(['layer', 'laypage'], function() {
  57.         layer = layui.layer;
  58.         laypage = layui.laypage;
  60.         laypage.render({
  61.             elem: 'paginate', // 注意，这里的 test1 是 ID，不用加 # 号
  62.             count: {{$total}}, // 查询到的记录总数，从数据库中获取
  63.             limit: {{$limit}}, // 每页容纳的记录数
  64.             curr: {{$currPage}}, // 当前页
  65.             first: '首页',
  66.             last: '尾页',
  67.             layout: ['first', 'prev', 'page', 'next', 'last', 'count', 'limit', 'refresh', 'skip'],
  68.             limits: [1, 5, 10, 15, 20],
  69.             jump: function(obj, first){
  70.                 //obj包含了当前分页的所有参数，比如：
  71.                 console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
  72.                 console.log(obj.limit); //得到每页显示的条数
  73.                 console.log(obj);
  75.                 //首次不执行
  76.                 if(!first){
  77.                     window.location.href = "?limit=" + obj.limit + "&page=" + obj.curr;
  78.                 }
  79.             }
  80.         });
  81.     });
  83.     function add() {
  84.         layer.open({
  85.             type: 2,
  86.             title: '新增文章',
  87.             shadeClose: false,
  88.             shade: 0.8,
  89.             area: ['100%', '100%'],
  90.             content: '/admin/article/add_article',
  91.             btn: ['保存'],
  92.             yes: function(index, layero) {
  93.                 var body = layer.getChildFrame('body', index);
  94.                 // 得到iframe页的窗口对象
  95.                 var iframeWin = window[layero.find('iframe')[0]['name']];
  96.                 // 执行iframe页的方法: iframeWin.要调用的方法名();
  97.                 iframeWin.save();
  98.             }
  99.         });
  100.     }
  102.     function edit(id) {
  103.         layer.open({
  104.             type: 2,
  105.             title: '修改文章',
  106.             shadeClose: false,
  107.             shade: 0.8,
  108.             area: ['100%', '100%'],
  109.             content: '/admin/article/edit_article?id=' + id,
  110.             btn: ['保存'],
  111.             yes: function(index, layero) {
  112.                 var body = layer.getChildFrame('body', index);
  113.                 // 得到iframe页的窗口对象
  114.                 var iframeWin = window[layero.find('iframe')[0]['name']];
  115.                 // 执行iframe页的方法: iframeWin.要调用的方法名();
  116.                 iframeWin.save();
  117.             }
  118.         });
  119.     }
  120. </script>
  121. </html>
  • 2- 添加文章视图
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>新增文章</title>
  8.     <link rel="stylesheet" href="/static/plugin/layui/css/layui.css">
  9.     <script src="/static/plugin/layui/layui.js"></script>
  10.     <!-- ueditor-start -->
  11.     <!-- 配置文件 -->
  12.     <script type="text/javascript" src="/static/plugin/ueditor/ueditor.config.js"></script>
  13.     <!-- 编辑器源码文件 -->
  14.     <script type="text/javascript" src="/static/plugin/ueditor/ueditor.all.js"></script>
  15.     <!-- ueditor-end -->
  16.     <style>
  17.         body {
  18.             padding: 10px;
  19.         }
  21.         .hide {
  22.             display: none;
  23.         }
  24.     </style>
  25. </head>
  27. <body>
  28.     <div class="layui-form">
  29.         @csrf
  30.         <div class="layui-form-item">
  31.             <label for="title" class="layui-form-label">标题</label>
  32.             <div class="layui-input-block">
  33.                 <input type="text" class="layui-input" name="title" id="title">
  34.             </div>
  35.         </div>
  36.         <div class="layui-form-item">
  37.             <label for="subtitle" class="layui-form-label">副标题</label>
  38.             <div class="layui-input-block">
  39.                 <input type="text" name="subtitle" id="subtitle" class="layui-input">
  40.             </div>
  41.         </div>
  42.         <div class="layui-form-item">
  43.             <label for="cid" class="layui-form-label">文章分类</label>
  44.             <div class="layui-input-block">
  45.                 <select name="cid" id="cid" class="layui-input">
  46.                     <option value=""></option>
  47.                     @if(!empty($cates))
  48.                     @foreach($cates as $key => $val)
  49.                     <option value="{{$key}}">{{$val}}</option>
  50.                     @endforeach
  51.                     @endif
  52.                 </select>
  53.             </div>
  54.         </div>
  55.         <div class="layui-form-item">
  56.             <label for="thumb" class="layui-form-label">缩略图</label>
  57.             <div class="layui-input-block">
  58.                 <button type="button" class="layui-btn" id="btn_upload">
  59.                     <i class="layui-icon">&#xe67c;</i>上传图片
  60.                 </button>
  61.                 <img id="preview_img" src="" alt="" style="height: 36px;" onclick="big_img(this)">
  62.             </div>
  63.         </div>
  64.         <div class="layui-form-item">
  65.             <label for="keywords" class="layui-form-label">关键字</label>
  66.             <div class="layui-input-block">
  67.                 <input type="text" name="keywords" id="keywords" class="layui-input">
  68.             </div>
  69.         </div>
  70.         <div class="layui-form-item">
  71.             <label for="descs" class="layui-form-label">文章描述</label>
  72.             <div class="layui-input-block">
  73.                 <textarea name="descs" id="descs" class="layui-textarea"></textarea>
  74.             </div>
  75.         </div>
  76.         <div class="layui-form-item">
  77.             <label for="status" class="layui-form-label">文章状态</label>
  78.             <div class="layui-input-block">
  79.                 <input type="radio" name="status" id="status_0" value="0" title="草稿">
  80.                 <input type="radio" name="status" id="status_1" value="1" title="发布" checked>
  81.             </div>
  82.         </div>
  83.         <div class="layui-form-item">
  84.             <label for="content" class="layui-form-label">文章正文</label>
  85.             <div class="layui-input-block">
  86.                 <!-- 加载编辑器的容器 -->
  87.                 <!-- 实际生成的是div. 给div添加contenteditable="true", 这个div就能编辑 -->
  88.                 <script id="container" name="content" type="text/plain">这里写你的初始化内容</script>
  89.             </div>
  90.         </div>
  91.     </div>
  92.     <div id="tong" class="hide" >
  93.         <img src="" style="max-width: 100%; max-height: 100%">
  94.     </div>
  95. </body>
  96. <script>
  97.     layui.use(['form', 'layer', 'upload'], function() {
  98.         layer = layui.layer;
  99.         form = layui.form;
  100.         upload = layui.upload;
  101.         $ = layui.jquery;
  103.         // 执行实例
  104.         var uploadInst = upload.render({
  105.             elem: '#btn_upload', // 绑定元素
  106.             url: '/admin/upload/pic_upload', // 上传接口
  107.             data: {
  108.                 _token: $('input[name="_token"]').val()
  109.             },
  110.             done: function(res) {
  111.                 // 上传完毕回调
  112.                 $('#preview_img').attr('src', res.data.src);
  113.                 $('#tong > img').attr('src', res.data.src);
  114.             },
  115.             error: function() {
  116.                 // 请求异常回调
  117.             }
  118.         });
  120.         // 实例化编辑器
  121.         /* 第二个参数是配置属性对象 */
  122.         /* 不要写var, 把ue声明为全局变量, 因为其他地方也用到ue对象 */
  123.         /* var */
  124.         ue = UE.getEditor('container', {
  125.             initialFrameWidth: '100%', //初始化编辑器宽度,默认1000
  126.             initialFrameHeight: '500' //初始化编辑器高度,默认320
  127.         });
  128.     });
  130.     function big_img(img) {
  131.         if (img.src == undefined || img.src == "") {
  132.             return;
  133.         }
  135.         //页面层-图片
  136.         layer.open({
  137.             type: 1,
  138.             title: false,
  139.             closeBtn: 0,
  140.             area: ['auto'],
  141.             skin: 'layui-layer-nobg', //没有背景色
  142.             shadeClose: true,
  143.             content: $('#tong')
  144.         });
  145.     }
  147.     function save() {
  148.         var data = {};
  149.         data._token = $('input[name="_token"]').val();
  150.         data.title = $.trim($('#title').val());
  151.         data.subtitle = $.trim($('#subtitle').val());
  152.         data.cid = parseInt($('#cid').val());
  153.         data.thumb = $.trim($('#preview_img').attr('src'));
  154.         data.status = $('input[name="status"]:checked').val();
  155.         data.descs = $.trim($('#descs').val());
  156.         data.keywords = $.trim($('#keywords').val());
  157.         data.content = ue.getContent();
  159.         if(data.title == '') {
  160.             return layer.alert('请填写文章标题', {icon: 2});
  161.         }
  162.         if(data.content == '') {
  163.             return layer.alert('请输入文章内容', {icon: 2});
  164.         }
  165.         if(isNaN(data.cid) || data.cid < 1) {
  166.             return layer.alert('请选择文章分类', {icon: 2});
  167.         }
  169.         $.ajax({
  170.             url: '/admin/article/save_article',
  171.             data: data,
  172.             type: 'POST',
  173.             async: true,
  174.             dataType: 'json',
  175.             success: function(res) {
  176.                 if(res.status != undefined && res.status == '0') {
  177.                     layer.msg(res.message, {icon: 1});
  178.                     setTimeout(() => {
  179.                         window.parent.location.reload();
  180.                     }, 1000);
  181.                 } else if(res.status != undefined) {
  182.                     return layer.alert(res.message, {icon: 2});
  183.                 } else {
  184.                     return layer.alert('文章提交失败', {icon: 2});
  185.                 }
  186.             }
  187.         });
  188.     }
  189. </script>
  191. </html>
  • 3- 文章编辑视图
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>修改文章</title>
  8.     <link rel="stylesheet" href="/static/plugin/layui/css/layui.css">
  9.     <script src="/static/plugin/layui/layui.js"></script>
  10.     <!-- ueditor-start -->
  11.     <!-- 配置文件 -->
  12.     <script type="text/javascript" src="/static/plugin/ueditor/ueditor.config.js"></script>
  13.     <!-- 编辑器源码文件 -->
  14.     <script type="text/javascript" src="/static/plugin/ueditor/ueditor.all.js"></script>
  15.     <!-- ueditor-end -->
  16.     <style>
  17.         body {
  18.             padding: 10px;
  19.         }
  21.         .hide {
  22.             display: none;
  23.         }
  24.     </style>
  25. </head>
  27. <body>
  28.     <div class="layui-form">
  29.         @csrf
  30.         <input type="hidden" name="id" value="{{$article['id']}}">
  31.         <div class="layui-form-item">
  32.             <label for="title" class="layui-form-label">标题</label>
  33.             <div class="layui-input-block">
  34.                 <input type="text" class="layui-input" name="title" id="title" value="{{$article['title']}}">
  35.             </div>
  36.         </div>
  37.         <div class="layui-form-item">
  38.             <label for="subtitle" class="layui-form-label">副标题</label>
  39.             <div class="layui-input-block">
  40.                 <input type="text" name="subtitle" id="subtitle" class="layui-input" value="{{$article['subtitle']}}">
  41.             </div>
  42.         </div>
  43.         <div class="layui-form-item">
  44.             <label for="cid" class="layui-form-label">文章分类</label>
  45.             <div class="layui-input-block">
  46.                 <select name="cid" id="cid" class="layui-input" value="{{$article['cid']}}">
  47.                     <option value=""></option>
  48.                     @if(!empty($cates))
  49.                     @foreach($cates as $key => $val)
  50.                     <option value="{{$key}}" {{$article['cid'] == $key ? 'selected' : ''}}>{{$val}}</option>
  51.                     @endforeach
  52.                     @endif
  53.                 </select>
  54.             </div>
  55.         </div>
  56.         <div class="layui-form-item">
  57.             <label for="thumb" class="layui-form-label">缩略图</label>
  58.             <div class="layui-input-block">
  59.                 <button type="button" class="layui-btn" id="btn_upload">
  60.                     <i class="layui-icon">&#xe67c;</i>上传图片
  61.                 </button>
  62.                 <img id="preview_img" src="{{$article['thumb']}}" alt="" style="height: 36px;" onclick="big_img(this)">
  63.             </div>
  64.         </div>
  65.         <div class="layui-form-item">
  66.             <label for="keywords" class="layui-form-label">关键字</label>
  67.             <div class="layui-input-block">
  68.                 <input type="text" name="keywords" id="keywords" class="layui-input" value="{{$article['keywords']}}">
  69.             </div>
  70.         </div>
  71.         <div class="layui-form-item">
  72.             <label for="descs" class="layui-form-label">文章描述</label>
  73.             <div class="layui-input-block">
  74.                 <textarea name="descs" id="descs" class="layui-textarea">{{$article['descs']}}</textarea>
  75.             </div>
  76.         </div>
  77.         <div class="layui-form-item">
  78.             <label for="status" class="layui-form-label">文章状态</label>
  79.             <div class="layui-input-block">
  80.                 <input type="radio" name="status" id="status_0" value="0" title="草稿" {{$article['status'] == 0 ? 'checked' : ''}}>
  81.                 <input type="radio" name="status" id="status_1" value="1" title="发布" {{$article['status'] == 1 ? 'checked' : ''}}>
  82.             </div>
  83.         </div>
  84.         <div class="layui-form-item">
  85.             <label for="content" class="layui-form-label">文章正文</label>
  86.             <div class="layui-input-block">
  87.                 <!-- 加载编辑器的容器 -->
  88.                 <!-- 实际生成的是div. 给div添加contenteditable="true", 这个div就能编辑 -->
  89.                 <script id="container" name="content" type="text/plain">{!!$content!!}</script>
  90.             </div>
  91.         </div>
  92.     </div>
  93.     <div id="tong" class="hide" >
  94.         <img src="{{$article['thumb']}}" style="max-width: 100%; max-height: 100%">
  95.     </div>
  96. </body>
  97. <script>
  98.     layui.use(['form', 'layer', 'upload'], function() {
  99.         layer = layui.layer;
  100.         form = layui.form;
  101.         upload = layui.upload;
  102.         $ = layui.jquery;
  104.         // 执行实例
  105.         var uploadInst = upload.render({
  106.             elem: '#btn_upload', // 绑定元素
  107.             url: '/admin/upload/pic_upload', // 上传接口
  108.             data: {
  109.                 _token: $('input[name="_token"]').val()
  110.             },
  111.             done: function(res) {
  112.                 // 上传完毕回调
  113.                 $('#preview_img').attr('src', res.data.src);
  114.                 $('#tong > img').attr('src', res.data.src);
  115.             },
  116.             error: function() {
  117.                 // 请求异常回调
  118.             }
  119.         });
  121.         // 实例化编辑器
  122.         /* 第二个参数是配置属性对象 */
  123.         /* 不要写var, 把ue声明为全局变量, 因为其他地方也用到ue对象 */
  124.         /* var */
  125.         ue = UE.getEditor('container', {
  126.             initialFrameWidth: '100%', //初始化编辑器宽度,默认1000
  127.             initialFrameHeight: '500' //初始化编辑器高度,默认320
  128.         });
  129.     });
  131.     // 点击上传的缩略图, 显示大图
  132.     function big_img(img) {
  133.         if (img.src == undefined || img.src == "") {
  134.             return;
  135.         }
  137.         //页面层-图片
  138.         layer.open({
  139.             type: 1,
  140.             title: false,
  141.             closeBtn: 0,
  142.             area: ['auto'],
  143.             skin: 'layui-layer-nobg', //没有背景色
  144.             shadeClose: true,
  145.             content: $('#tong')
  146.         });
  147.     }
  149.     function save() {
  150.         var data = {};
  151.         data._token = $('input[name="_token"]').val();
  152.         data.id = parseInt($('input[name="id"]').val());
  153.         data.title = $.trim($('#title').val());
  154.         data.subtitle = $.trim($('#subtitle').val());
  155.         data.cid = parseInt($('#cid').val());
  156.         data.thumb = $.trim($('#preview_img').attr('src'));
  157.         data.status = $('input[name="status"]:checked').val();
  158.         data.descs = $.trim($('#descs').val());
  159.         data.keywords = $.trim($('#keywords').val());
  160.         data.content = ue.getContent();
  162.         if(data.title == '') {
  163.             return layer.alert('请填写文章标题', {icon: 2});
  164.         }
  165.         if(data.content == '') {
  166.             return layer.alert('请输入文章内容', {icon: 2});
  167.         }
  168.         if(isNaN(data.cid) || data.cid < 1) {
  169.             return layer.alert('请选择文章分类', {icon: 2});
  170.         }
  171.         if(isNaN(data.id) || data.id < 1) {
  172.             return layer.alert('文章id不能为空', {icon: 2});
  173.         }
  175.         $.ajax({
  176.             url: '/admin/article/update_article',
  177.             data: data,
  178.             type: 'POST',
  179.             async: true,
  180.             dataType: 'json',
  181.             success: function(res) {
  182.                 if(res.status != undefined && res.status == '0') {
  183.                     layer.msg(res.message, {icon: 1});
  184.                     setTimeout(() => {
  185.                         window.parent.location.reload();
  186.                     }, 1000);
  187.                 } else if(res.status != undefined) {
  188.                     return layer.alert(res.message, {icon: 2});
  189.                 } else {
  190.                     return layer.alert('文章更新失败', {icon: 2});
  191.                 }
  192.             }
  193.         });
  194.     }
  195. </script>
  197. </html>
  • 文章/文章分类控制器
  1. <?php
  2. namespace App\Http\Controllers\admins;
  4. use App\Http\Controllers\Controller;
  5. use Illuminate\Http\Request;
  6. use Illuminate\Support\Facades\DB;
  8. class Article extends Controller {
  9.     /**
  10.      * 文章列表
  11.      */
  12.     public function index(Request $req) {
  13.         // 一页可容纳的记录数
  14.         $pageSize = empty($req->limit) ? 1 : $req->limit;
  15.         // 当前页
  16.         $currPage = empty($req->page) ? 1 : $req->page;
  17.         // dump($pageSize);dump($currPage);die;
  19.         $data['cates'] = DB::table('article_cate')->keyval('id', 'title');
  20.         $data['user'] = DB::table('admin')->keyval('id', 'real_name');
  21.         // $data['articles'] = DB::table('article')->lists();
  22.         /* 换成分页的方式（返回对象数组） */
  23.         // $data['articles'] = DB::table('article')->paginate(2);
  24.         /* 换成自己扩展的分页方式（返回二维数组） */
  25.         $pageData = DB::table('article')->orderby('id' , 'desc')->pages($pageSize);
  26.         // dump($pageData);die;
  28.         $data['articles'] = $pageData['page_data'];
  29.         $data['total'] = $pageData['total'];
  30.         $data['limit'] = $pageSize;
  31.         $data['currPage'] = $currPage;
  32.         return view('/admins/article/index', $data);
  33.     }
  35.     /**
  36.      * 跳转到新增文章界面
  37.      */
  38.     public function addArticle() {
  39.         $data['cates'] = DB::table('article_cate')->keyval('id', 'title');
  41.         return view('admins/article/add_article', $data);
  42.     }
  44.     public function editArticle(Request $req) {
  45.         $data['cates'] = DB::table('article_cate')->keyval('id', 'title');
  46.         $id = (int) $req->id;
  47.         $data['article'] = DB::table('article')->where('id', $id)->getFirst();
  48.         if(!$data['article']) {
  49.             return json_encode(['status' => 1, 'message' => '无效的文章ID']);
  50.         }
  52.         $data['content'] = (DB::table('article_detail')->select('contents')->where('aid', $id)->getFirst())['contents'];
  54.         return view('/admins/article/edit_article', $data);
  56.     }
  58.     public function saveArticle(Request $req) {
  59.         $data['title'] = trim($req->title);
  60.         $data['subtitle'] = trim($req->subtitle);
  61.         $data['cid'] = (int) ($req->cid);
  62.         $data['thumb'] = trim($req->thumb);
  63.         $data['status'] = (int) $req->status;
  64.         $data['descs'] = trim($req->descs);
  65.         $data['keywords'] = trim($req->keywords);
  66.         $data['auth_id'] = $req->loginInfo->id;
  67.         $data['add_time'] = time();
  69.         $content = trim($req->content);
  71.         $id = DB::table('article')->insertGetId($data);
  72.         if($id) {
  73.             DB::table('article_detail')->insert(['aid' => $id, 'contents' => $content]);
  75.             return json_encode(['status' => 0, 'message' => '文章保存成功']);
  76.         }
  77.         return json_encode(['status' => 1, 'message' => '文章保存失败']);
  78.     }
  80.     public function updateArticle(Request $req) {
  81.         $data['id'] = (int) $req->id;
  82.         $data['title'] = trim($req->title);
  83.         $data['subtitle'] = trim($req->subtitle);
  84.         $data['cid'] = (int) ($req->cid);
  85.         $data['thumb'] = trim($req->thumb);
  86.         $data['status'] = (int) $req->status;
  87.         $data['descs'] = trim($req->descs);
  88.         $data['keywords'] = trim($req->keywords);
  89.         $data['auth_id'] = $req->loginInfo->id;
  90.         $data['add_time'] = time();
  92.         $content = trim($req->content);
  94.         $id = DB::table('article')->where('id', $data['id'])->update($data);
  95.         if($id) {
  96.             DB::table('article_detail')->where('aid', $data['id'])->update(['contents' => $content]);
  98.             return json_encode(['status' => 0, 'message' => '文章修改成功']);
  99.         }
  100.         return json_encode(['status' => 1, 'message' => '文章修改失败']);
  101.     }
  104.     /**
  105.      * 文章分类列表
  106.      */
  107.     public function cates() {
  108.         // 查询所有分类
  109.         $data['cates'] = DB::table('article_cate')->lists();
  111.         return view('/admins/article/cates', $data);
  112.     }
  114.     /**
  115.      * 添加文章分类
  116.      */
  117.     public function addCate(Request $req) {
  118.         return view('/admins/article/add_cate');
  119.     }
  121.     public function saveCate(Request $req) {
  122.         $title = $req->title;
  124.         $cate = DB::table('article_cate')->where('title', $title)->getFirst();
  125.         if($cate) {
  126.             return json_encode(['status' => 1, 'message' => '已存在同名分类, 请另命名分类后再重试']);
  127.         }
  129.         $res = DB::table('article_cate')->insertGetId(['title' => $title]);
  130.         if($res) {
  131.             return json_encode(['status' => 0, 'message' => '添加成功']);
  132.         }
  134.         return json_encode(['status' => 1, 'message' => '添加失败']);
  135.     }
  136. }
  • 处理文件上传的控制器
  1. <?php
  2. namespace App\Http\Controllers\admins;
  4. use App\Http\Controllers\Controller;
  5. use Illuminate\Http\Request;
  6. use Illuminate\Support\Facades\Storage;
  8. class Upload extends Controller {
  9.     public function picUpload(Request $request) {
  10.         // file(请求中的文件参数名), store(文件存放子路径). 文件存放目录: ../storage/app/[store指定的子目录], 
  11.         // 为能使用软连接访问上传的图片, 强烈建议子目录以public目录开始. 建议在public中分目录, 以年份, 或者年份月份, 
  12.         // 或者年月日为public子目录来存放文件, 这样更方便查找. 也可以分得更细, 如: 精确到小时, 分钟等.
  13.         /* 此时返回的是.../public/avatars/2020/06/18/xxxxxx.png, 实际并不能以该路径来访问 */
  14.         $path = $request->file('file')->store('public/avatars/' . date('Y/m/d'));
  15.         // 获取前端能访问到的真实的url地址
  16.         $url = Storage::url($path);
  18.         // layui的上传组件要求返回的json数据的格式
  19.         $res = ['code' => 0, 'msg' => '', 'data' => ['src' => $url]];
  20.         return json_encode($res);
  21.     }
  22. }
上一条：仿PHP中文网布局实战下一条：盒模型常用属性、元素的重新计算及元素的垂直对齐技术（前端第六课）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多