产品缩略图模块

原创 2018-12-29 14:55:36 364
摘要:<?php namespace app\admin\model; use \think\Model; class ProductPicModel extends Model {     protected $table = 'product_pic';
<?php
namespace app\admin\model;
use \think\Model;

class ProductPicModel extends Model
{
    protected $table = 'product_pic';

    protected $pk = 'id';
}
<?php
namespace app\admin\controller;

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

class ProductPic extends Common
{
    public function index()
    {
        // 实例化模型
        $proPic = new ProductPicModel();
        $productPic = $proPic->order('id', 'desc')->paginate(4);
        $this->view->productPic = $productPic;
        // 渲染产品缩略图列表
        return $this->fetch();
    }

    public function add()
    {
        // 查询所有产品数据
        $product = ProductModel::all();
        // 将数据赋值给模板
        $this->view->product = $product;
        // 渲染产品缩略图添加界面
        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');
        // 实例化模型
        $proPic = new ProductPicModel();
        // 存储并验证
        if ($proPic->save($data)) {
            // 返回对应的数据
            return ['res' => 1, 'msg' => '发布成功!'];
        } else {
            return ['res' => 0, 'msg' => '发布失败!'];
        }
    }

    public function del()
    {
        // 获取要删除产品的id
        $productId = Request::param('id');
        // 实例化模型
        $productPic = new ProductPicModel();
        // 删除并验证
        if ($productPic->destroy($productId)) {
            return ['res'=>1,'msg'=>'删除成功!'];
        }
    }
}
{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(\'ProductPic/add\')}')"><i class="layui-icon"></i>添加</button>
        <span class="x-right" style="line-height:40px">共有数据:88 条</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="productPic" id="product"}
        <tr>
            <td>{$product.id}</td>
            <td>{:GetProTitle($product.product_id)}</td>
            <td><img src="{$product.pic}"></td>
            <td>{$product.username}</td>
            <td>{$product.time|date="Y-m-d"}</td>
            <td class="td-manage">
                <a title="删除" onclick="member_del(this,'{$product.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('已删除!',{icon:1,time:1000});
                }
            })
        });
    }

</script>
</body>

</html>
{include file="/public/head"}
<body>
<div class="x-body">
    <form class="layui-form">
        <div class="layui-form-item">
            <label for="product_id" class="layui-form-label">
                <span class="x-red">*</span>选择产品
            </label>
            <div class="layui-input-inline">
                <select name="product_id" id="product_id">
                    {volist name="product" id="pro"}
                    <option value="{$pro.id}">{$pro.title}</option>
                    {/volist}
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <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="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;

        var $ = layui.jquery,
            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\')}',{
                'product_id':$('#product_id').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-29 15:22:33
老师总结:不错!把你后面的作业都看了!基本上都是相差不大的增删改查,对于简单的项目来说增删改查掌握了后就等于完成了一大半了!后面继续加油吧!不要骄傲哦!这里就都给你这里评论了哈!

发布手记

热门词条