返回结合本章学习内......登陆

结合本章学习内容完成轮播图模块

.2019-08-12 11:04:24300

1.png

controller/Slide.php

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

<?php

namespace app\admin\controller;

use app\admin\controller\Common;

use app\admin\model\SlideModel;

use think\facade\Request;

use think\facade\Session;

 

class Slide extends Common

{

    public function index()

    {

        $slide =new SlideModel();

        //查询数据按照id排序并且每页4个数据

        $slides $slide->order('id','desc')->paginate(4);

        $this->view->slides = $slides;

        return $this->fetch();

    }

    public function add()

    {

        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 del()

    {

        $slideId = Request::param('id');

        $slide new SlideModel();

        if($slide->destroy($slideId)){

            return ['res'=>1];

        }

    }

}

model/SlideModel.php

1

2

3

4

5

6

7

8

9

10

<?php

namespace app\admin\model;

use \think\Model;

 

class SlideModel extends Model

{

    protected $table 'slide';

    protected $pk 'id';

 

}

view/add.html

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

{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(\'Slide/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="slide_pic" id="slide_pic" value="'+res.data +'" />')

            }

        });

 

        //监听提交

        form.on('submit(add)', function(data){

            console.log(data);

            //发异步,把数据提交给php

            $.post('{:url(\'Slide/DoAdd\')}',{

                'pic':$('#slide_pic').val(),

                '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>

view/index.html

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

{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(\'Slide/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|date="Y-m-d"}</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>

            {$slides|raw}

        </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(\'Slide/del\')}','id='+id,function(data) {

                if (data.res == 1) {

                    $(obj).parents("tr").remove();

                    layer.msg('已删除!', {icon: 1, time: 1000});

                }

            })

        });

 

    }

 

</script>

 

</body>

 

</html>


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送