轮播图模块代码

Original 2019-03-02 22:47:01 249
abstract:控制器代码:<?php namespace app\admin\controller; use app\admin\controller\Common; use think\facade\Session; use think\facade\Request; use app\admin\model\SlideModel; class&nbs

控制器代码:

<?php
namespace app\admin\controller;

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

class Slide extends Common
{
	public function index()
	{
		$num = SlideModel::count();
		$sildes = SlideModel::order('id','desc')->paginate(1);
		$this->view->num = $num;
		$this->view->sildes = $sildes;
		return $this->fetch();
	}

	public function add()
	{
		return $this->fetch();
	}

	public function upload()
	{
		$file = Request::file('file');
		$info = $file->validate(['ext'=>'jpg,jpeg,png,gif'])->move('upload');
		if($info){
			$fileName = '/upload/'.$info->getSaveName();
			return ['res'=>1,'msg'=>'上传成功','data'=>$fileName];
		}else{
			return $file->getError();
		}
	}

	public function DoAdd()
	{
		$data = Request::param();
		$data['username'] = Session::get('username');
		$data['time'] = time();
		if(SlideModel::create($data)){
			return ['res'=>1,'msg'=>'添加成功'];
		}else{
			return ['res'=>o,'msg'=>'添加失败'];
		}
	}

	public function del()
	{
		$id  = Request::param('id');
		if(SlideModel::destroy($id)){
			return ['res'=>1,'msg'=>'删除成功'];
		}
	}
}

模型代码:

<?php
namespace app\admin\model;

use think\Model;

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

轮播图列表模板代码:

{include file="public/head"}
  
  <body>
    <div class="x-nav">
      <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(\'Slide/add\')}')"><i class="layui-icon"></i>添加</button>
        <span class="x-right" style="line-height:40px">共有数据:{$num} 条</span>
      </xblock>
      <table class="layui-table">
        <thead>
          <tr>
            <th>ID</th>
            <th>轮播图</th>
            <th>轮播图说明</th>
            <th>发布管理员</th>
            <th>发布日期</th>
            <th >操作</th>
            </tr>
        </thead>
        <tbody>
          {volist name="sildes" id="slide"}
          <tr>
            <td>{$slide.id}</td>
            <td><img src="{$slide.pic}"></td>
            <td>{$slide.desc}</td>
            <td>{$slide.username}</td>
            <td>{$slide.time|date="Y-m-d"}</td>
            
            <td class="td-manage">
              <a title="删除" onclick="member_del(this,'{$slide.id}')" href="javascript:;">
                <i class="layui-icon">&#xe640;</i>
              </a>
            </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(data.msg,{icon:1,time:1000});
                  }
              });
              
          });
      }



    
    </script>

  </body>

</html>

轮播图添加模板代码

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <title>
            X-admin v1.0
        </title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <link rel="stylesheet" href="__ADMIN__/css/x-admin.css" media="all">
    </head>

    
    <body>
        <div class="x-body">
            <form class="layui-form">
                
                <div class="layui-form-item">
                    <label for="link" class="layui-form-label">
                        <span class="x-red">*</span>轮播图
                    </label>
                    <button type="button" class="layui-btn" id="slide">
                      <i class="layui-icon">&#xe67c;</i>上传图片
                    </button>

                </div>
                <div class="layui-form-item">
                    <label  class="layui-form-label">缩略图
                    </label>
                    <img id="LAY_demo_upload" width="400" src="">
                </div>
            
                <div class="layui-form-item layui-form-text">
                    <label for="desc" class="layui-form-label">
                        轮播图说明
                    </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__/js/layui.js" charset="utf-8">
        </script>
        <script src="__ADMIN__/js/x-layui.js" charset="utf-8">
        </script>
         <script src="__ADMIN__/plugins/layui/layui.js" charset="utf-8">
        </script>
        <!-- <script>
        layui.use('upload', function(){
          var upload = layui.upload;
           
          //执行实例
          var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,url: '{:url("upload")}' //上传接口
            ,done: function(res){
              //上传完毕回调
            }
            ,error: function(){
              //请求异常回调
            }
          });
        });
        </script> -->
        <script>
            layui.use(['form','layer','upload'], function(){
                $ = layui.jquery;
              var form = layui.form
              ,layer = layui.layer;

              var upload = layui.upload;
               
              //执行实例
              var uploadInst = upload.render({
                elem: '#slide' //绑定元素
                ,url: '{:url("Slide/upload")}' //上传接口
                ,done: function(res){
                  //上传完毕回调
                  // console.log(res);
                  $('#LAY_demo_upload').attr('src',res.data);
                  

                }
                ,error: function(){
                  //请求异常回调
                }
              });

              // //图片上传接口
              // layui.upload({
              //   url: '' //上传接口
              //   ,success: function(res){ //上传成功后的回调
              //       console.log(res);
              //     $('#LAY_demo_upload').attr('src',res.url);
              //   }
              // });
            

              //监听提交
              form.on('submit(add)', function(data){
                // console.log(data);
                //发异步,把数据提交给php
                $.post('{:url("DoAdd")}',{
                    'pic':$('#LAY_demo_upload').attr('src'),
                    'desc':$('#desc').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>


Correcting teacher:西门大官人Correction time:2019-03-03 10:33:51
Teacher's summary:这里主要是通过model来实现数据的查询上插入操作。注意一下:通过文件的扩展名来识别上传的文件类型是不准确的,如:可以把php程序的扩展名改为.jpg上传。详情可以看一下我的php案全课程,里面有详细的讲解

Release Notes

Popular Entries