（7）輪播圖后臺修改 · Thinkphp5小白到初級實戰

這一章主要是輪播圖的功能實現，實現修改圖片功能。后臺修改輪播圖頁面代碼： ~~~ <!DOCTYPE html> <html class="x-admin-sm"> <head> <meta charset="UTF-8"> <title>歡迎頁面-X-admin2.2</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" /> <link rel="stylesheet" href="__ADMIN__/css/font.css"> <link rel="stylesheet" href="__ADMIN__/css/xadmin.css"> <script src="__ADMIN__/lib/layui/layui.js" charset="utf-8"></script> <script type="text/javascript" src="__ADMIN__/js/xadmin.js"></script>  </head> <body> <div class="x-nav"> <span class="layui-breadcrumb"> <a href="/">首頁</a> <a> <cite>輪播圖修改</cite></a> </span> <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新"> <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a> </div> <div class="layui-fluid"> <div class="layui-row layui-col-space15"> <div class="layui-col-md12"> <div class="layui-card">  <div class="layui-card-body "> <table class="layui-table layui-form"> <thead> <tr> <th> <input type="checkbox" name="" lay-skin="primary"> </th> <th>ID</th> <th>角色名</th> <th>擁有權限規則</th> <th>狀態</th> <th>操作</th> </thead> <tbody> <tr> <td> <input type="checkbox" name="" lay-skin="primary"> </td> <td>1</td> <td>輪播頁</td> <td>修改圖片</td> <form action="{:url('admin/playout/rotationc')}" method="post" enctype="multipart/form-data" class="layui-form layui-form-pane"> <td class="td-manage"> <span>上傳圖片（圖片尺寸為700*270像素，文件類型為jpg或png）： <input type="file" class="adfilel" name="adfilel" > </span> <input class="layui-btn" type="submit" value="提交上傳"></input> </td> </form> </tr> <tr> <td> <input type="checkbox" name="" lay-skin="primary"> </td> <td>2</td> <td>輪播頁</td> <td>修改圖片</td> <form action="{:url('admin/playout/rotationc')}" method="post" enctype="multipart/form-data" class="layui-form layui-form-pane"> <td class="td-manage"> <span>上傳圖片（圖片尺寸為700*270像素，文件類型為jpg或png）： <input type="file" class="adfilel" name="adfilel" > </span> <input class="layui-btn" type="submit" value="提交上傳"></input> </td> </form> </tr> <tr> <td> <input type="checkbox" name="" lay-skin="primary"> </td> <td>3</td> <td>輪播頁</td> <td>修改圖片</td> <form action="{:url('admin/playout/rotationc')}" method="post" enctype="multipart/form-data" class="layui-form layui-form-pane"> <td class="td-manage"> <span>上傳圖片（圖片尺寸為700*270像素，文件類型為jpg或png）： <input type="file" class="adfilel" name="adfilel" > </span> <input class="layui-btn" type="submit" value="提交上傳"></input> </td> </form> </tr> <tr> <td> <input type="checkbox" name="" lay-skin="primary"> </td> <td>4</td> <td>輪播頁</td> <td>修改圖片</td> <form action="{:url('admin/playout/rotationc')}" method="post" enctype="multipart/form-data" class="layui-form layui-form-pane"> <td class="td-manage"> <span>上傳圖片（圖片尺寸為700*270像素，文件類型為jpg或png）： <input type="file" class="adfilel" name="adfilel" > </span> <input class="layui-btn" type="submit" value="提交上傳"></input> </td> </form> </tr> <tr> <td> <input type="checkbox" name="" lay-skin="primary"> </td> <td>5</td> <td>輪播頁</td> <td>修改圖片</td> <form action="{:url('admin/playout/rotationb')}" method="post" enctype="multipart/form-data" class="layui-form layui-form-pane"> <td class="td-manage"> <span>上傳圖片（圖片尺寸為700*270像素，文件類型為jpg或png）： <input type="file" class="adfilel" name="adfilel" > </span> <input class="layui-btn" type="submit" value="提交上傳"></input> </td> </form> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> </body> <script> layui.use(['laydate','form'], function(){ var laydate = layui.laydate; var form = layui.form; //執行一個laydate實例 laydate.render({ elem: '#start' //指定元素 }); //執行一個laydate實例 laydate.render({ elem: '#end' //指定元素 }); }); /*用戶-停用*/ function member_stop(obj,id){ layer.confirm('確認要停用嗎？',function(index){ if($(obj).attr('title')=='啟用'){ //發異步把用戶狀態進行更改 $(obj).attr('title','停用') $(obj).find('i').html(''); $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('已停用'); layer.msg('已停用!',{icon: 5,time:1000}); }else{ $(obj).attr('title','啟用') $(obj).find('i').html(''); $(obj).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').html('已啟用'); layer.msg('已啟用!',{icon: 5,time:1000}); } }); } /*用戶-刪除*/ function member_del(obj,id){ layer.confirm('確認要刪除嗎？',function(index){ //發異步刪除數據 $(obj).parents("tr").remove(); layer.msg('已刪除!',{icon:1,time:1000}); }); } function delAll (argument) { var data = tableCheck.getData(); layer.confirm('確認要刪除嗎？'+data,function(index){ //捉到所有被選中的，發異步進行刪除 layer.msg('刪除成功', {icon: 1}); $(".layui-form-checked").not('.header').parents('tr').remove(); }); } </script> <script>var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://#/hm.js?b393d153aeb26b46e9431fabaf0f6190"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })();</script> </html> ~~~ 我設置修改4和5兩張圖片，其他的并沒有修改。模板變量輸出這個我中間也了解一下，有好幾種實現方法，可以直接輸出，也可以循環變量輸出使用volist標簽。但前提是輸出的模板要先渲染才能使用。后臺控制器admin/controller/playout.php代碼: ~~~ <?php /** * Created by PhpStorm. * User: Administrator * Date: 2017/6/2 * Time: 11:47 */ namespace app\admin\controller; use think\Controller; use think\Request; use think\Db; use app\admin\model\Rotation; class Playout extends Controller{ // 圖片文件上傳方法 public function rotation(){ $dbinfo = Db::name('rotation'); // $request = new Request; //獲取表單上傳文件 $adfilel = request()->file('adfilel'); if (empty($adfilel)){ $this->error('請選擇上傳文件'); } //使用validate驗證文件后綴；上傳文件移動到目錄public/uploads/rotation/目錄下 $info = $adfilel->validate(['ext'=>'jpg,png'])->move(ROOT_PATH . 'public' . DS . 'uploads' . DS . 'rotation'); // 獲取上傳目錄 $savename = $info->getSaveName(); $str = "/uploads/rotation/".$savename; //字符串替換函數，將路徑的\\替換成/ $strd = strtr($str,'\\','/'); return $strd; } /** * 保存1圖片路徑方法 */ public function rotationb(){ //調用rotation方法 $strb = $this->rotation(); $imag['imageurl'] = $strb; $imag['imanu'] = 1; $code = Db::name('rotation')->insert($imag); // $code = Db::name('rotation')->insert($tess); // $userId = $dbinfo->getLastInsID(); // $rtoa = $dbinfo->where('id','=',$userId)->value('imageurl'); // $this->view->replace([ // '__ADMINR__' => $rtoa, // ]); // $rtoa = new Rotation; // $rtoa = $rtoa-> getRotation(); // $ // $count['imageurs'] = $rtoa; // $this->assign('data',data($count)); // if ($info){ // return $this->success('上傳成功'); // }else{ // $this->error($adfilel->getError()); // } if ($code){ // $data['imageurs'] = $rtoa; // $this->assign('data',$data); // return $this->fetch('index'); return $this->success('上傳成功'); }else{ //獲取錯誤信息 $this->error($code->getError()); } } /** * 保存2圖片路徑方法 */ public function rotationc(){ $strc = $this->rotation(); $imag['imageurl'] = $strc; $imag['imanu'] = 2; $code = Db::name('rotation')->insert($imag); if ($code){ return $this->success('上傳成功'); }else{ //獲取錯誤信息 $this->error($code->getError()); } } /** * @return mixed獲取保存1的圖片url方法 */ public function rotationa() { $rotationa = input('post.rotationa'); $info = Db::name('rotation'); // if (isset($rotationa)) { $rotas = $info->where('imanu','=',1)->where('1=1')->order('id desc')->value('imageurl'); return $rotas; // } } /** * @return mixed獲取保存2的圖片url方法 */ public function rotationd() { $rotationa = input('post.rotationa'); $info = Db::name('rotation'); $rotad = $info->where('imanu','=',2)->where('1=1')->order('id desc')->value('imageurl'); return $rotad; } } ~~~ 在這里完成上傳圖片功能還要在前臺控制器里渲染模板才能完成修改和輸出： index/controller/index.php代碼： ~~~ public function index(){ // $rotationa = input('post.rotationa'); // $info = Db::name('rotation'); // $userId = $info->getLastInsID(); // if (isset($rotationa)) { // $rotas = $info->where('1=1')->order('id desc')->value('imageurl'); // 調用playout類得到圖片1地址 $rotaa = new Playout; $rotas = $rotaa->rotationa(); $data['imageurl'] = $rotas; // 模板變量賦值 // $this->assign('data', $data); $rotad = $rotaa->rotationd(); $data['imageurl2'] = $rotad; // 模板變量賦值 $this->assign('data', $data); return $this->fetch('index'); return view('index'); } ~~~ 最后在前端頁面里輸出變量就可以實現輪播圖修改功能了 index.html代碼： ![](https://box.kancloud.cn/6cafbcc9967ccb28b742d516508da7e5_919x512.png) ![](https://box.kancloud.cn/0e75beaae4d06475463ae6883002aa29_692x924.png)