实战:轮播图模块的实现

原创 2019-05-27 22:21:26 223
摘要:1.控制类代码<?phpnamespace 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{    

1.控制类代码

<?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排序并且每页显示四条数据
       $slides = $slide->order('id', 'desc')->paginate(4);
//将数据复制到模板
       $this->view->slides = $slides;
       //        渲染模板
       return $this->fetch();
   }

   public function add()
   {
//        渲染模板
       return $this->fetch();
   }

   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 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 del()
   {
//        获取需要删除的id
       $slideId = Request::param('id');
//实例化模型
       $slide = new SlideModel();
//        删除并验证
       if ($slide->destroy($slideId)) {
           return ['res'=>1,'msg'=>'删除成功!'];
       }
   }
}

2.模型类代码

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

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

3.视图类代码

<!doctype html>
<html lang="en">
{include file="/public/header"}
<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|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>
       </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});
               } else {
                   $(obj).parents("tr").remove();
                   layer.msg('删除失败!', {icon: 1, time: 1000});
               }
           });
       });
   }
</script>

</body>

</html>

4.运行结果

QQ图片20190527222028.png

批改老师:天蓬老师批改时间:2019-05-28 16:57:22
老师总结:通过这个小案例, 相信你对web开发有了一个深刻 的认识, 借助一些框架, 可以极大的提升开发效率

发布手记

热门词条