简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > laravel实战-通用后台管理系统-基础设置/文章分类/文章分页列表/图片上传和嵌入富文本编辑器
Blogger Information
Blog 57
fans 3
comment 0
visits 60350
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
laravel实战-通用后台管理系统-基础设置/文章分类/文章分页列表/图片上传和嵌入富文本编辑器
岂几岂几
Original
1100 people have browsed it

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. }
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：还在认真写作业的不多了, 希望你能坚持 到最后
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！