轮播图模块添加以及删除

原创 2018-12-07 15:20:47 5
摘要:/**********************  Slide.php 轮播图控制器  **********************/<?phpnamespace app\admin\controller;use app\admin\model\SlideModel;use think\facade\Session;use think\faca
/**********************  Slide.php 轮播图控制器  **********************/

<?php
namespace app\admin\controller;

use app\admin\model\SlideModel;
use think\facade\Session;
use think\facade\Request;
use app\admin\controller\Common;

class Slide extends Common
{
   public function index()
   {
       //实例化模型
       $slide = new SlideModel();
       //查询数据并按照id的顺序每页2条数据
       $slides = $slide->order('id','desc')->paginate(2);
       //将数据赋值给模板
       $this->view->slides = $slides;
       //渲染模板
       return $this->fetch();
   }


   public function upload()
   {
       //获取上传图片的信息
       $file = Request::file('file');
       //验证图片并移动到指定目录
       if($info = $file->validate(['ext'=>'jpg,jpeg,png,gif'])->move('upload')){
           //拼接图片路径
           $fileName = '/upload/'.$info->getSaveName();
           //返回上传成功的提示信息
           return json([1,'上传成功!','data'=>$fileName]);
       }else{
           //返回上传成功的提示信息
           return $file->getError();
       }
   }

   public function DoAdd()
   {
       //获取提交的数据
       $data = Request::param();
       //添加时间
       $data['time'] = time();
       //添加管理员
       $data['username'] = Session::get('username');
       //实例化模型
       $slide = new SlideModel();
       //存储并验证
       if($slide->save($data)){
           //返回对应的数据
           return ['res'=>1,'msg'=>'发布成功!'];
       }else{
           return ['res'=>0,'msg'=>'发布失败!'];
       }
   }
   public function add()
   {
       //渲染模板
       return $this->fetch();
   }
   public function del()
   {
       //获取需要删除的分类id
       $slideId = Request::param('id');
       //实例化模型
       $slide = new SlideModel();
       //删除并验证
       if($slide->destroy($slideId)){
           return ['res'=>1];
       }
   }
}

/************************* SlideModel.php 轮播图模块模型 **********************************/

<?php
namespace app\admin\model;
use \think\Model;

class SlideModel extends Model
{
   protected $table = 'slide';

   protected $pk = 'id';
}

/**************************   index.html  轮播图模块列表 *****************************************/

{include file="public/head" /}

<body>
<div class="x-nav">
     <span class="layui-breadcrumb">
       <a href="">首页</a>
       <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"
      href="javascript:location.replace(location.href);" title="刷新">
       <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
   <xblock>
       <button class="layui-btn" onclick="x_admin_show('添加轮播图','{:url(\'add\')}')"><i class="layui-icon"></i>添加</button>
       <span class="x-right" style="line-height:40px">共有数据:88 条</span>
   </xblock>
   <table class="layui-table layui-form">
       <thead>
       <tr>
           <th width="70">轮播图ID</th>
           <th>轮播图</th>
           <th width="200">轮播图说明</th>
           <th width="200">管理员</th>
           <th width="200">发布时间</th>

           <th width="200">操作</th>
       </thead>
       <tbody>
       {volist name="slides" id="slide"}
       <tr>
           <td>{$slide.id}</td>
           <td>
               <img src="{$slide.pic}">
           </td>
           <td>{$slide.desc}</td>
           <td>{$slide.username}</td>
           <td>{$slide.time}</td>
           <td class="td-manage">
               <button class="layui-btn-danger layui-btn layui-btn-xs" onclick="member_del(this,'{$slide.id}')"
                       href="javascript:;"><i class="layui-icon">&#xe640;</i>删除
               </button>
           </td>
       </tr>
       {/volist}
       </tbody>
   </table>
   <div class="page">
       <div>
       </div>
   </div>
</div>
<script>
   layui.use('laydate', function(){
       var laydate = layui.laydate;

       //执行一个laydate实例
       laydate.render({
           elem: '#start' //指定元素
       });

       //执行一个laydate实例
       laydate.render({
           elem: '#end' //指定元素
       });
   });


   /*用户-删除*/
   function member_del(obj,id){
       layer.confirm('确认要删除吗?',function(index){
           //发异步删除数据
           $.get("{:url('del')}",'id='+id,function(data){
               if(data.res ==1){
                   $(obj).parents("tr").remove();
                   layer.msg('已删除!',{icon:1,time:1000});
               }
           })

       });
   }

</script>

</body>

</html>

/*****************************   add.html  轮播图模块添加页面 *********************************/

{include file="public/head" /}

<body>
<div class="x-body">
   <form class="layui-form">
       <div>
           <label class="layui-form-label">轮播图</label>
           <div class="layui-input-block">
               <button type="button" class="layui-btn" id="upload" >图片上传</button>
               <div class="layui-upload-list" id="thumbnail"></div>
           </div>
       </div>
       <div class="layui-form-item">
           <label for="desc" class="layui-form-label">
               <span class="x-red">*</span>轮播图说明
           </label>

           <div class="layui-input-inline">
               <textarea placeholder="请输入内容" id="desc" name="desc" class="layui-textarea"></textarea>
           </div>
       </div>
       <div class="layui-form-item">
           <label for="L_repass" class="layui-form-label">
           </label>
           <button class="layui-btn" lay-filter="add" lay-submit="">
               增加
           </button>
       </div>
   </form>
</div>
<script src="__ADMIN__/lib/layui/layui.js"></script>
<script>
   layui.use(['form', 'layer','upload'], function () {
       $ = layui.jquery;
       var form = layui.form
           , layer = layui.layer,
           upload = layui.upload;

       upload.render({
           elem: '#upload',
           url: "{:url('upload')}",
           multiple: true,
           before: function(obj){
               //预读本地文件示例,不支持ie8
               obj.preview(function(index, file, result){
                   $('#thumbnail').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
               });
           },
           done: function(res){
               //上传完毕
               $('#thumbnail').append('<input type="hidden"  name="pic" id="pic" value="'+res.data +'" />')
           }
       });

       //监听提交
       form.on('submit(add)', function(data){
           console.log(data);
           //发异步,把数据提交给php
           $.post("{:url('DoAdd')}",{
               'desc':$('#desc').val(),
               'pic':$('#pic').val(),
           },function(data){
               if(data.res ==1){
                   layer.alert(data.msg, {icon: 6},function () {
                       // 获得frame索引
                       var index = parent.layer.getFrameIndex(window.name);
                       //关闭当前frame
                       parent.layer.close(index);
                   });
               }else{
                   layer.alert(data.msg, {icon: 6},function () {
                       // 获得frame索引
                       var index = parent.layer.getFrameIndex(window.name);
                       //关闭当前frame
                       parent.layer.close(index);
                   });
               }
           })

           return false;
       });


   });
</script>
</body>

</html>

批改老师:韦小宝批改时间:2018-12-07 16:02:10
老师总结:恩!写的很不错哦!很完整!轮播图模块里唯一一个知识点差不多也就是上传操作了!

发布手记

热门词条